Clusters with custom cluster icons
Show the number of markers in a cluster with custom simplestyle markers
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Clusters with custom cluster icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
// We add the backing styleLayer and use the featureLayer for its data.
var map = L.mapbox.map('map')
.setView([37.77396, -122.4366], 12)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer('/mapbox.js/assets/data/sf_locations.geojson').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup({
// The iconCreateFunction takes the cluster as an argument and returns
// an icon that represents it. We use L.mapbox.marker.icon in this
// example, but you could also use L.icon or L.divIcon.
iconCreateFunction: function(cluster) {
return L.mapbox.marker.icon({
// show the number of markers in the cluster on the icon.
'marker-symbol': cluster.getChildCount(),
'marker-color': '#422'
});
}
});
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.