Style clusters and markers with L.Div and L.Marker options. More information about Feature Layers can be found in the L.esri.FeatureLayer documentation.
<html>
<head>
<meta charset="utf-8" />
<title>Styling clusters</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector.js" crossorigin=""></script>
<!-- Load Leaflet MarkerCluster and Esri Leaflet Cluster from CDN -->
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"
crossorigin=""
/>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css""
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"
crossorigin=""
></script>
<script src="https://unpkg.com/esri-leaflet-cluster@3.0.1/dist/esri-leaflet-cluster.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<style>
.cluster {
background: #2d84c8;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 1px solid #2d84c8;
font-family: monospace;
}
.cluster:before {
content: " ";
position: absolute;
border-radius: 50%;
z-index: -1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 1px solid white;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 35px;
margin-top: -17px;
margin-left: -17px;
}
.digits-2:before {
border-width: 2px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 47px;
line-height: 47px;
border-width: 3px;
margin-top: -24px;
margin-left: -24px;
}
.digits-3:before {
border-width: 3px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 57px;
border-width: 4px;
margin-top: -29px;
margin-left: -29px;
}
.digits-4:before {
border-width: 4px;
}
</style>
<div id="map"></div>
<script>
const apiKey = "YOUR_API_KEY";
const map = L.map("map", {
maxZoom: 18 // The clustering plugin needs to understand the map's maxZoom
}).setView([0, 0], 2);
L.esri.Vector.vectorBasemapLayer("arcgis/navigation-night", {
apikey: apiKey
}).addTo(map);
// create a new cluster layer (new syntax at 2.0.0)
const earthquakes = L.esri.Cluster.featureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0",
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
disableClusteringAtZoom: 8,
iconCreateFunction: function (cluster) {
// this function defines how the icons
// representing clusters are created
// get the number of items in the cluster
const count = cluster.getChildCount();
// figure out how many digits long the number is
const digits = (count + "").length;
return L.divIcon({
// Return a new L.DivIcon with our classes so we can
// style them with CSS. Take a look at the CSS in
// the head to see these styles. You have to set
// iconSize to null if you want to use CSS to set the
// width and height.
html: count,
className: "cluster digits-" + digits,
iconSize: null
});
},
pointToLayer: function (geojson, latlng) {
// This function defines how individual markers
// are created. You can see we are using the
// value of the "magnitude" field to set the symbol
const magnitude = geojson.properties.magnitude;
let earthquakeSymbol = "";
if (!magnitude) {
earthquakeSymbol = "https://esri.github.io/esri-leaflet/img/earthquake-icon.png";
} else if (magnitude <= 4.999) {
earthquakeSymbol = "https://esri.github.io/esri-leaflet/img/yellow-triangle.png";
} else if (magnitude >= 5 && magnitude <= 6.999) {
earthquakeSymbol = "https://esri.github.io/esri-leaflet/img/orange-triangle.png";
} else if (magnitude >= 7) {
earthquakeSymbol = "https://esri.github.io/esri-leaflet/img/red-triangle.png";
}
const mapIcon = L.icon({
iconUrl: earthquakeSymbol,
iconSize: [20, 20]
});
return L.marker(latlng, {
icon: mapIcon
});
}
}).addTo(map);
earthquakes.bindPopup(function (layer) {
return L.Util.template("Magnitude <strong>{magnitude}</strong> earthquake", layer.feature.properties);
});
</script>
</body>
</html>