Get started with leaflet.markercluster CDN

MIT licensed

Plugin Leaflet.markercluster: Groups markers into clusters for map performance, clarity.

Tags:
  • maps
  • mobile
  • gis
  • cluster

Stable version

Copied!

How to start using leaflet.markercluster CDN


// Include required libraries
L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/';
const markers = L.markerClusterGroup();

// Create map
const map = L.map('mapid').setView([51.505, -0.09], 13);

// Add a tile layer
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);

// Add markers to the marker cluster group
const markersData = [
  [51.5, -0.09, 'Marker 1'],
  [51.6, -0.08, 'Marker 2'],
  [51.7, -0.07, 'Marker 3'],
];

markersData.forEach(([latlng, title]) => {
  const marker = L.marker(latlng, { title, draggable: false }).addTo(markers);
  markers.addLayer(marker);
});

// Add marker cluster group to the map
map.addLayer(markers);

// Include markercluster library
L.plugin(
  'leaflet-markercluster',
  'https://cdn.cdnhub.io/leaflet.markercluster/1.5.3/leaflet.markercluster.js'
);
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions