maxBounds leaflet

by tomik23

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>

<div id="map"></div>

CSS

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

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

JavaScript

let zoom = 18;
let lat = 52.2297700;
let lon = 21.0117800;

let southWest = L.latLng(52.22855186817617, 21.008005142211918);
let northEast = L.latLng(52.231370975320836, 21.015826463699344);
let bounds = L.latLngBounds(southWest, northEast);

let map = L.map('map', {
  maxBounds: bounds,
  minZoom: 5,
  maxZoom: 18
}).setView([lat, lon], zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


let sn = [];
map.on('dragend', function onDragEnd() {
  Object.entries(map.getBounds()).forEach(item => {
    console.log(item);
    const array = [item[1].lat, item[1].lng];
    sn.push(array);
  });
  console.table(sn);
});