react-native-map-clustering
react-native-map-clustering copied to clipboard
venits
How can we render different sets of cluster with different colors?
For Example arr1 = [marker1, marker2] -> should show in red arr2 = [marker3, marker4] -> should show in green
I guess you should use the renderCluster prop. Maybe some conditional to validate something and put the right background color that you want.
You can put the marker inside renderCluster based on this example, it's the default cluster of MapView.
Would also love to see support for cluster groups with separate colors, ie. a clusterByProp property on the MapView that could take an arbitrary property to divvy them up by then even something basic like a clusterGroupColors array
Elaborating on @noghartt 's comment, one way you could do this is by creating a Custom ClusterMarker off of the example of the boiler plate cluster marker, then using superClusterRef and some custom logic to determine the color of the individual markers and color the cluster depending on what those markers' pin colors were (or some other variable in the individual markers' properties if you so chose).
What worked for my situation, where I wanted the cluster color to change depending on whether one of it's child markers was a certain color, was this:
-Creating a copy of the example, changing the backgroundColor on lines 37 and 48 to a new custom property (which I will pass down from it's parent in renderCluster):
Line 6
const CustomClusteredMarker: React.FC<Props> = ({
geometry,
properties,
onPress,
clusterColor,
clusterTextColor,
clusterFontFamily,
tracksViewChanges,
pinColor //my new custom property
Line 33
<View
style={[
styles.wrapper,
{
backgroundColor: pinColor,
width,
height,
borderRadius: width / 2,
},
]}
/>
Line 44
<View
style={[
styles.cluster,
{
backgroundColor: pinColor,
width: size,
height: size,
borderRadius: size / 2,
},
]}
>
-then adding some custom logic to my renderCluster function that finds the cluster's id and children (using superClusterRef) and then using that to determine the color I pass down to the Component:
renderCluster={(props)=> {
let clusterChildren = superClusterRef.current.getChildren(props.properties.cluster_id);
const hasSearchMarker = clusterChildren.map((child: any) => child.properties.pinColor).includes('#91c000');
return <CustomClusterMarker
key={props.properties.cluster_id}
pinColor={hasSearchMarker ? '#91c000' : '#005ae2'} //where I pass in this new property
{...props}
/> `
}}
Result:
It's not perfect, gets a little unpredictable at different zoom levels, but in my case this only displays at a set latitude/longitude delta where it works fine for me every time. I'm sure with some more revisits and time this can be optimized even better; it's a quick solution for now that got me out of a pinch :)
