zoom slider and tweaking

master
Michael Murtaugh 6 years ago
parent 3884054005
commit b8ba01d748

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

@ -272,4 +272,10 @@ var polyline = L.polyline(xpath, {color: '#dd2e57'}).addTo(map);
map.setView(xy(0.5 * TILESIZE, -0.5 * TILESIZE), 0); 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);
})
})(); })();

@ -85,3 +85,22 @@ p.caption a.url:hover {
/*background: #FF0;*/ /*background: #FF0;*/
/*color: black;*/ /*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);
}
Loading…
Cancel
Save