Change color of specific cluster

[Quentin Jezequel]

Hello,

Context :
I have a nodejs server to serve tiles with .mbtiles file and I use MarkerClusterGroup on my client to display markers with a .geojson file which represent a state of communication. Markers are .png red or blue according to their state of communication. I try to have an interactive map which display markers and show if the communication is OK (blue.png) or if the communication is down (red.png).

I can get all markers and test it to change or not the marker with `setIcon` function in red or blue depending of their state.

I try to change only one cluster (only change the color) if one or more "childMarker" is in red. And change again in green if all child markers are in correct state.

Like this example, one cluster with 2 markers in correct state and another cluster with some markers with an incorrect state :

Zoom in :

Zoom in :

Zoom in :

This is exactly what I try to do. If anyone has ideas that may help me.

Thanks !

[ghybs]

Hi Quentin,

Use the `iconCreateFunction` option of your MarkerClusterGroup:
https://github.com/Leaflet/Leaflet.markercluster/tree/master#customising-the-clustered-markers

You can start with a copy/paste of the default function: https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerClusterGroup.js#L636-L649
Then customize to display the appropriate colour if the cluster contains markers with a given state.
Use `yourMCG.getAllChildMarkers()` to get the array of contained markers, then loop through it to check if one has a given state.

The default `iconCreateFunction` uses 3 different CSS classes, to style the cluster with 3 different background colours depending on the number of contained markers:
https://github.com/Leaflet/Leaflet.markercluster/blob/master/dist/MarkerCluster.Default.css
Obviously you can use your own CSS classes for your application.

Good luck!

[Quentin Jezequel]

Thank you so much for your response very clear !

I succeeded in getting what I wanted to do with your solution.

If someone want to do the same thing, do not hesitate to contact me =).

[Robert Hill]

Hi Quentin, I am trying to do something similar, do you have your solution posted anywhere where I can see?

Thanks in advance!

[Quentin Jezequel]

Hi,

I haven't the code anymore, but what I have done if I remember, it was to loop on each child cluster during the creation (https://github.com/Leaflet/Leaflet.markercluster/tree/master#customising-the-clustered-markers) in iconCreateFunction in order to check if at least one child was in error state. Then I set a custom css class with red color if needed.

I hope it will help you.

Quentin