fitBounds 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 featureGroups = [
  L.marker([52.22966244690615, 21.011084318161014]).bindPopup('A'),
  L.marker([52.234616998160874, 21.008858084678653]).bindPopup('B'),
  L.marker([52.22998444382795, 21.012511253356937]).bindPopup('C'),
  L.marker([52.22858801170828, 21.00593984127045]).bindPopup('D')
];

let map = L.map('map', {
  minZoom: 0,
  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);

for (let i = 0; i < featureGroups.length; i++) {
  featureGroups[i].addTo(map);
}

let group = new L.featureGroup(featureGroups);
map.fitBounds(group.getBounds(), {padding: [50, 50]});