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: '© <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]});
<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>
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; }