leaflet

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
  <div class="zoom"></div>
  <div id='map'></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

.zoom {
  font-size: 4rem;
  font-weight: 700;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  color: #fff;
}

JavaScript

let mapExtent = [0.00000000, -4100.00000000, 4100.00000000, 0.00000000];
let minZoom = 0;
let maxZoom = 6;
let maxBounds = [
  [0, 0],
  [-4100, 4100]
];
let mapMaxResolution = 0.2500000;
let mapMinResolution = Math.pow(2, maxZoom) * mapMaxResolution;

let crs = L.CRS.Simple;

crs.scale = function(zoom) {
  console.log(zoom);
  return Math.pow(2, zoom) / mapMinResolution;
};
crs.zoom = function(scale) {
  return Math.log(scale * mapMinResolution) / Math.LN2;
};

let map = L.map('map', {
  crs,
  minZoom,
  maxZoom,
  maxBounds,
  zoomSnap: 0, // important
  maxBoundsViscosity: 1.0,
  attributionControl: false,
  zoomControl: true
});

L.tileLayer('http://breamap.hostronavt.ru/map_png/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxNativeZoom: 4,
  noWrap: true,
  minZoom,
  maxZoom
}).addTo(map);

let fitBounds = map.fitBounds([
  crs.unproject(L.point(mapExtent[2], mapExtent[3])),
  crs.unproject(L.point(mapExtent[0], mapExtent[1]))
]);

map.on('zoomend', () => {
  document.querySelector('.zoom').innerText = map.getZoom();
});