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: '© <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!