mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-08-08 08:29:23 +00:00
45 lines
1.0 KiB
Markdown
45 lines
1.0 KiB
Markdown
---
|
|
layout: tutorial_frame
|
|
title: Zoom Levels Tutorial
|
|
---
|
|
<script>
|
|
|
|
const map = L.map('map', {
|
|
minZoom: 0,
|
|
maxZoom: 1
|
|
});
|
|
|
|
const cartodbAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>';
|
|
|
|
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>
|