zoom slider and tweaking

master
Michael Murtaugh před 6 roky
rodič 3884054005
revize b8ba01d748

@ -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>

@ -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);
})
})();

@ -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);
}
Načítá se…
Zrušit
Uložit