zoom slider and tweaking

index.html

@@ -14,6 +14,7 @@
         <div id="map" style="width: 100%; height: 100%; background: black"></div>
         <div id="text" style="position: absolute; left: 50px; top: 10px; width: auto; color: white">
         </div>
+        <div id="slider-wrapper"><input id="zoom-slider" type="range" min="0" max="20" value="0" step="1" /></div>
     </div>
 <script src="map.js"></script>
 </body>

map.js

@@ -272,4 +272,10 @@ var polyline = L.polyline(xpath, {color: '#dd2e57'}).addTo(map);
 
 map.setView(xy(0.5 * TILESIZE, -0.5 * TILESIZE), 0);
 
+var zoomslider = document.getElementById("zoom-slider");
+zoomslider.addEventListener("input", function () {
+  // console.log("zoom", zoomslider.value);
+  map.flyTo([-128.0,128],zoomslider.value);
+})
+
 })();

styles.css

@@ -85,3 +85,22 @@ p.caption a.url:hover {
   /*background: #FF0;*/
   /*color: black;*/
 }
+
+#slider-wrapper {
+  display: inline-block;
+/*  width: 20px;
+  height: 150px;
+*/  padding: 0;
+  position: absolute;
+  left: 15px;
+  top: 100px;
+  z-index: 1000;
+}
+
+#slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}