I made a custom function to create CircleMarkers for a given value of "InstancesCount" on a Map.
Previously, I was calling <CircleMarker> function directly in the code, which was working fine. But I have decided to create a separate function, but the new function does not seem to be creating the markers on MAP
OLD Code which was creating CircleMarker(working perfectly):
import { LatLngExpression } from "leaflet";
{
CityMapData.map((city, index) =>
{
const {
instancesCount,
timeZoneData,
} = city;
return (
<CircleMarker
key={index}
center={timeZoneData.coordinates}
radius={10 * Math.log(instancesCount + 1)}
fillOpacity={0.5}
stroke={false}
color={COLORS.RED}
>
);
})
}
NEW Code which is NOT creating CircleMarker:
import { LatLngExpression } from "leaflet";
const createCircleMarkerOnMap = (
index: number,
instancescount: number,
circleColor: string,
timezoneData_timeZoneId: string,
timezoneData_coordinates: LatLngExpression
) => {
return <CircleMarker
key={index}
center={timezoneData_coordinates}
radius={10 * Math.log(instancescount + 1)}
fillOpacity={0.5}
stroke={false}
color={circleColor}
>
</CircleMarker>;
};
{
CityMapData.map((city, index) =>
{
const {
healthyinstancesCount,
unhealthyinstancesCount,
timeZoneData,
} = city;
createCircleMarkerOnMap
(
index,
unhealthyinstancesCount,
"COLORS.RED",
timeZoneData.timeZoneId,
timeZoneData.coordinates
);
if(showBothHealthyAndUnhealthy)
{
createCircleMarkerOnMap
(
index,
healthyinstancesCount,
"COLORS.GREEN",
timeZoneData.timeZoneId,
timeZoneData.coordinates
);
}
})
}
Example of Data in City include:
City=Phoenix,
instancesCount=56,
timeZoneData.timeZoneId= ET,
timeZoneData.coordinates.Latitude 34.867608,
timeZoneData.coordinates.Longitude=-84.318978
Probably just missing a return statement to output the result of your call to createCircleMarkerOnMap function.
But you may be troubled by the possibility to sometimes output 2 elements instead, depending on your showBothHealthyAndUnhealthy flag?
In that case, one of the possible solutions could be to use <React.Fragment> to wrap the potentially multiple output elements:
CityMapData.map((city, index) =>
{
const {
healthyinstancesCount,
unhealthyinstancesCount,
timeZoneData,
} = city;
// Do not forget to return something from the mapper callback
return (
// Use <React.Fragment> to output a single element, but which may contain multiple children
<React.Fragment key={index}>
{
createCircleMarkerOnMap
(
index,
unhealthyinstancesCount,
"COLORS.RED",
timeZoneData.timeZoneId,
timeZoneData.coordinates
)
}
{
showBothHealthyAndUnhealthy &&
createCircleMarkerOnMap
(
index,
healthyinstancesCount,
"COLORS.GREEN",
timeZoneData.timeZoneId,
timeZoneData.coordinates
)
}
</React.Fragment>
);
}
);
BTW, note that in the case you generate 2 Markers per item, you place them at the exact same coordinates, hence they will visually overlap.