markerClusterGroup 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>
  <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>

CSS

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

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

JavaScript

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: '&copy; <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);