layout, title
| layout |
title |
| tutorial_frame |
Zoom Levels Tutorial |
<script>
const map = L.map('map', {
minZoom: 0,
maxZoom: 1
});
const cartodbAttribution = '©
OpenStreetMap contributors, ©
CARTO';
const positron = L.tileLayer('
https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: cartodbAttribution
}).addTo(map);
setInterval(() => {
map.setZoom(0);
setTimeout(() => {
map.setZoom(1);
}, 2000);
}, 4000);
const ZoomViewer = L.Control.extend({
onAdd() {
const gauge = L.DomUtil.create('div');
gauge.style.width = '200px';
gauge.style.background = 'rgba(255,255,255,0.5)';
gauge.style.textAlign = 'left';
map.on('zoomstart zoom zoomend', (ev) => {
gauge.innerHTML = `Zoom level: ${map.getZoom()}`;
});
return gauge;
}
});
const zoomViewer = (new ZoomViewer()).addTo(map);
map.setView([0, 0], 0);
</script>
