I'm trying to customize the markerCluster color in a non-default way. I've been exploring the API and it looks like the recommendation is to modify a divIcon after creation, possibly like this:
var markers = L.markerClusterGroup({
iconCreateFunction: function(cluster) {
return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
https://github.com/Leaflet/Leaflet.markercluster
Previously, I was populating data upon creation, somewhat similar to this:
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
continuousWorld: true
}
},
cycle: {
name: 'OpenCycleMap',
type: 'xyz',
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
crs: L.CRS.EPSG900913
}
},
cars: {
name: 'Cars',
type: 'markercluster',
visible: true
}
}
},
markers: {
m1: {
lat: 42.20133,
lng: 2.19110,
layer: 'cars',
message: "I'm a moving car"
},
I came across a similar site (and forked version) where I found some inspiration: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0216-layers-overlays-markercluster-example.html I tried adding an icon property with different colors but haven't had any success yet. My goal is to change the color when multiple types are clustered together. Any guidance would be greatly appreciated.
Thanks so much!