Browse Source

zoom slider and tweaking

master
Michael Murtaugh 3 years ago
parent
commit
b8ba01d748
3 changed files with 26 additions and 0 deletions
  1. 1
    0
      index.html
  2. 6
    0
      map.js
  3. 19
    0
      styles.css

+ 1
- 0
index.html View File

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

+ 6
- 0
map.js View File

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

+ 19
- 0
styles.css View File

@@ -85,3 +85,22 @@ p.caption a.url:hover {
85 85
   /*background: #FF0;*/
86 86
   /*color: black;*/
87 87
 }
88
+
89
+#slider-wrapper {
90
+  display: inline-block;
91
+/*  width: 20px;
92
+  height: 150px;
93
+*/  padding: 0;
94
+  position: absolute;
95
+  left: 15px;
96
+  top: 100px;
97
+  z-index: 1000;
98
+}
99
+
100
+#slider-wrapper input {
101
+  width: 150px;
102
+  height: 20px;
103
+  margin: 0;
104
+  transform-origin: 75px 75px;
105
+  transform: rotate(-90deg);
106
+}

Loading…
Cancel
Save