41 lines
1.0 KiB
Markdown
41 lines
1.0 KiB
Markdown
|
---
|
||
|
|
layout: tutorial_frame
|
||
|
|
title: Zoom Levels Tutorial
|
||
|
|
---
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var map = L.map('map', {
|
||
|
|
minZoom: 0,
|
||
|
|
maxZoom: 18,
|
||
|
|
zoomSnap: 0,
|
||
|
|
zoomDelta: 0.25
|
||
|
|
});
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
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>
|