[Leaflet] Zoom Levels

by 1004lucifer

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

html,body { width:100%; height:100%; margin:0; padding:0; }
#map { width:100%; height:100%; }

JavaScript

var map = L.map('map', {
  minZoom: 0,
  maxZoom: 18,
  zoomSnap: 0,
  zoomDelta: 0.25
});

var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

var positron = L.tileLayer('https://{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);