Hice una función personalizada para crear CircleMarkers para un valor dado de "InstancesCount" en un mapa.
Anteriormente, estaba llamando a la función <CircleMarker> directamente en el código, que funcionaba bien. Pero he decidido crear una función separada, pero la nueva función no parece estar creando los marcadores en MAP
Código VIEJO que estaba creando CircleMarker (funcionando perfectamente):
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} > ); }) }NUEVO Código que NO está creando 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 ); } }) }Los ejemplos de datos en la ciudad incluyen:
City=Phoenix, instancesCount=56, timeZoneData.timeZoneId= ET, timeZoneData.coordinates.Latitude 34.867608, timeZoneData.coordinates.Longitude=-84.318978Probablemente solo falte una declaración de return para generar el resultado de su llamada a la función createCircleMarkerOnMap .
Pero puede que le preocupe la posibilidad de generar a veces 2 elementos en su lugar, dependiendo de su indicador showBothHealthyAndUnhealthy .
En ese caso, una de las posibles soluciones podría ser usar <React.Fragment> para envolver los elementos de salida potencialmente múltiples:
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> ); } );Por cierto, tenga en cuenta que en el caso de que genere 2 marcadores por elemento, los coloca exactamente en las mismas coordenadas, por lo tanto, se superpondrán visualmente.