Add link index.html -> styles.html

2016-03-11 10:13:04 +01:00
parent 06b88bbbe7
commit d1e33d04cb
2 changed files with 2 additions and 0 deletions
--- a/public/styles.html
+++ b/public/styles.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="mapbox-gl.css" />
+  <script src="mapbox-gl.js"></script>
+  <title>Offline vector tiles</title>
+  <style>
+      body { margin:0; padding:0; }
+      #map { position:absolute; top:0; bottom:0; width:100%; }
+      #dropdown { position: absolute; top: 10px; left:10px; }
+  </style>
+<body>
+  <div id='map'></div>
+  <select id='dropdown'></select>
+  <script>
+    var styles;
+    var request = new XMLHttpRequest();
+    request.responseType = 'json';
+    request.open('GET', '/styles.json', true);
+    request.onload = function(e) {
+      if (request.readyState != 4) return;
+      if (request.status === 200) {
+        styles = request.response;
+      }
+
+      var map = new mapboxgl.Map({
+        container: 'map',
+          style: 'styles/' + styles[0].id + '.json',
+          center: [0, 0],
+        zoom: 0,
+        hash: true
+      });
+      map.addControl(new mapboxgl.Navigation());
+
+      var select = document.getElementById('dropdown');
+
+      for (var i in styles) {
+        var style = styles[i];
+        var el = document.createElement('option');
+        el.textContent = style.name + ' (' + style.id + '.json)';
+        el.value = style.id;
+        select.appendChild(el);
+      };
+
+      select.onchange = function() {
+        mapboxgl.util.getJSON(
+          'styles/' + document.getElementById('dropdown').value + '.json',
+          function (err, style) {
+            if (err) throw err;
+            map.setStyle(style);
+          });
+      }
+    };
+    request.send(null);
+  </script>
+</body>
+</html>