Add demo

mapbox · Oct 14, 2013 · 1819358 · 1819358
1 parent 14266a8
commit 1819358
Show file tree

Hide file tree

Showing 5 changed files with 522 additions and 1 deletion.
diff --git a/Makefile b/Makefile
@@ -1,2 +1,7 @@
+all: tokml.js site/site.js
+
 tokml.js:
 	browserify -s tokml index.js > tokml.js
+
+site/site.js: site/index.js
+	browserify site/index.js > site/site.js
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>tokml</title>
+        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
+        <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
+    </head>
+    <body>
+        <h1>tokml</h1>
+        <p><a href='https://github.com/mapbox/tokml'>A module that converts GeoJSON to KML in Javascript.</a></p>
+        <h2>demo</h2>
+        <input type='text' id='map-id' placeholder='mapbox.map-id' />
+        <button id='convert'>convert from a mapbox map id</button>
+        <hr />
+        <textarea id='map-geojson'></textarea>
+        <button id='convert-raw'>convert from raw geojson input</button>
+        <script src='site/site.js'></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -24,7 +24,9 @@
   "devDependencies": {
     "expect.js": "~0.2.0",
     "mocha": "~1.13.0",
-    "glob": "~3.2.6"
+    "glob": "~3.2.6",
+    "corslite": "0.0.5",
+    "filesaver.js": "~2013.1.23"
   },
   "dependencies": {
     "minimist": "0.0.5",

diff --git a/site/index.js b/site/index.js
@@ -0,0 +1,25 @@
+var convert = document.getElementById('convert'),
+    convertRaw = document.getElementById('convert-raw'),
+    mapGeoJSON = document.getElementById('map-geojson'),
+    mapid = document.getElementById('map-id'),
+    xhr = require('corslite'),
+    saveAs = require('filesaver.js'),
+    tokml = require('../');
+
+convert.onclick = function() {
+    xhr('http://api.tiles.mapbox.com/v3/' + mapid.value + '/markers.geojson', onload, true);
+    function onload(err, resp) {
+        if (err) return alert(err);
+        else return run(JSON.parse(resp.response));
+    }
+};
+
+convertRaw.onclick = function() {
+    run(JSON.parse(mapGeoJSON.value));
+};
+
+function run(gj) {
+    saveAs(new Blob([tokml(gj)], {
+        type: 'application/vnd.google-earth.kml+xml'
+    }), 'map.kml');
+}