Plugin ecosystem and selection
Quick answer
This tutorial treats plugins as the source of most Leaflet capabilities and gives four criteria for judging them: recent commits, declared compatibility with 1.9, bundled CSS and global namespace changes. It walks through a complete Leaflet.markercluster integration with maxClusterRadius and spiderfyOnMaxZoom, and a hasPlugin feature check that degrades to a plain layer group. Readers can choose and load plugins without silent failures.
Key points
- Check the last commit date and declared peer compatibility before adopting a plugin.
- Load plugin scripts after leaflet.js and include the plugin's own CSS files.
- Add points to L.markerClusterGroup first, then add the group to the map once.
Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script>
var map = L.map('map').setView([39.907359, 116.391263], 10);
var clusters = L.markerClusterGroup({
maxClusterRadius: 60,
spiderfyOnMaxZoom: true,
showCoverageOnHover: false
});
points.forEach(function (p) {
clusters.addLayer(L.marker([p.lat, p.lng]));
});
map.addLayer(clusters); // 一次性加入，别逐个 addTo(map)
</script>function hasPlugin(name) {
return typeof L !== 'undefined' && typeof L[name] === 'function';
}
if (hasPlugin('markerClusterGroup')) {
map.addLayer(buildClusters(points));
} else {
map.addLayer(L.layerGroup(points.map(function (p) {
return L.circleMarker([p.lat, p.lng], { radius: 4 });
})));
}Notes
- Loading a plugin before Leaflet yields L.markerClusterGroup is not a function.
- Project-wide .leaflet-control rules can override plugin CSS and break toolbar layout.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Plugin ecosystem and selection. https://www.jingweizhi.com/en/leaflet/tutorials/plugins.html (accessed 2026-11-03).