let zoom = 6; let lat = 52.2297700; let lon = 21.0117800; let addressPoints = [ [52.22922544734814, 21.008997559547428, 'punk 1'], [52.22941930482576, 21.009861230850223, 'punk 2'], [52.22966244690615, 21.011084318161014, 'punk 3'], [52.22980701724154, 21.01167440414429, 'punk 4'], [52.22998444382795, 21.012511253356937, 'punk 5'], [52.230188154960125, 21.013487577438358, 'punk 6'], [52.230299867119605, 21.01395428180695, 'punk 7'], [51.26191485308451, 17.753906250000004, 'okolice 1'], [51.23440735163461, 17.578125000000004, 'okolice 2'], [50.84757295365389, 17.753906250000004, 'okolice 3'], [50.90303283111257, 18.061523437500004, 'okolice 4'], [51.04139389812637, 17.446289062500004, 'okolice 5'] ]; 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); let markers = L.markerClusterGroup(); for (let i = 0; i < addressPoints.length; i++) { let a = addressPoints[i]; let title = a[2]; let marker = L.marker(new L.LatLng(a[0], a[1]), { title }); marker.bindPopup(title); markers.addLayer(marker); } map.addLayer(markers);
<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> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"> <div id="map"></div>
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; }