57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
|
---
|
||
|
|
layout: tutorial_frame
|
||
|
|
title: Zoom Levels Tutorial
|
||
|
|
---
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var map = L.map('map', {
|
||
|
|
minZoom: 0,
|
||
|
|
maxZoom: 1,
|
||
|
|
zoomSnap: 0.25,
|
||
|
|
dragging: false
|
||
|
|
});
|
||
|
|
|
||
|
|
var cartodbAttribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>';
|
||
|
|
|
||
|
|
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
|
||
|
|
attribution: cartodbAttribution
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
function zoomCycle(){
|
||
|
|
map.setZoom(0);
|
||
|
|
timeouts = [];
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.25); }, 1000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.50); }, 2000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.75); }, 3000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(1); }, 4000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.75); }, 5000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.50); }, 6000));
|
||
|
|
timeouts.push(setTimeout(function(){ map.setZoom(0.25); }, 7000));
|
||
|
|
}
|
||
|
|
zoomCycle();
|
||
|
|
|
||
|
|
var zoomingInterval = setInterval(zoomCycle, 8000);
|
||
|
|
|
||
|
|
var ZoomViewer = L.Control.extend({
|
||
|
|
onAdd: function(){
|
||
|
|
|
||
|
|
var container= L.DomUtil.create('div');
|
||
|
|
var gauge = L.DomUtil.create('div');
|
||
|
|
container.style.width = '200px';
|
||
|
|
container.style.background = 'rgba(255,255,255,0.5)';
|
||
|
|
container.style.textAlign = 'left';
|
||
|
|
map.on('zoomstart zoom zoomend', function(ev){
|
||
|
|
gauge.innerHTML = 'Zoom level: ' + map.getZoom();
|
||
|
|
})
|
||
|
|
container.appendChild(gauge);
|
||
|
|
|
||
|
|
return container;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
(new ZoomViewer).addTo(map);
|
||
|
|
|
||
|
|
map.setView([0, 0], 0);
|
||
|
|
</script>
|