I currently have a circlemarker which create circles of red colour for the unhealthy instances.
Now on this same world map, I wish to have circles of green color as well for the healthy instances.
To give an example, City name "Phoenix" can have 20 unhealthyinstances and 3 healthyinstances. So in this case I would like to have a circle of RED color for unhealthy instances and a circle of green color for healthy instances for Phoenix.
{
CityMapData.map((city, index) => {
const {
unhealthyInstancesCount,
healthyInstancesCount,
entityName,
totalInstancesCount,
timeZoneData,
} = city;
return (
<CircleMarker
key={index}
center={timeZoneData.coordinates}
radius={10 * Math.log(unhealthyInstancesCount+ 1)}
fillOpacity={0.5}
stroke={false}
color={COLORS.RED}
>
);
})
}
Just choose color depending on a condition and pass unhealthyInstancesCount and healthyInstancesCount as instancesCount to this component wherever you need
const {
instancesCount
entityName,
totalInstancesCount,
timeZoneData,
isHealthy
} = city;
return (
<CircleMarker
key={index}
center={timeZoneData.coordinates}
radius={10 * Math.log(instancesCount+ 1)}
fillOpacity={0.5}
stroke={false}
color={isHealthy ? COLORS.GREEN : COLORS.RED}
>