Points become little blue dots

[Denissavv]

When I zoom-in or zoom-out, some points feels like trying to become cluster, but turn on into a little blue points.

When I add key (as it shown in the example - key={item.properties?.cluster_id ?? point-${item.properties?.id}} - blue points appear, when I remove key - the issue is fix, but I guess that clusters and points re-render every map changing position.

[JiriHoffmann]

This is most likely an issue with your rendering of map markers - unsure what else could be causing this issue without seeing the code.

[Denissavv]

Sorry for my poor question, let me try to show you the whole implementation:

im using import { YaMap } from 'react-native-yamap';

the thing is - there is no latitudeDelta and longitudeDelta after changing position of maps camera, so I calculated myself.

export const getRegionForZoom = (lat: number, lon: number, zoom: number): MapRegion => {
  const distanceDelta = Math.exp(Math.log(360) - zoom * Math.LN2);
  const { width, height } = Dimensions.get('window');
  const aspectRatio = width / height;
  return {
    latitude: lat,
    longitude: lon,
    latitudeDelta: distanceDelta * aspectRatio,
    longitudeDelta: distanceDelta,
  };
}

const [westLng, setWestLng] = useState(INITIAL_WEST_LNG);
  const [southLat, setSouthLat] = useState(INITIAL_SOUTH_LAT);
  const [eastLng, setEastLng] = useState(INITIAL_EAST_LNG);
  const [northLat, setNorthLat] = useState(INITIAL_NORTH_LAT);

  const convertedArray: IFeature[] = points
    .filter((data) => data.location.longitude !== '0' || data.location.latitude !== '0')
    .map((item) => ({
      type: 'Feature' as const,
      geometry: {
        type: 'Point' as const,
        coordinates: [+item.location.longitude, +item.location.latitude],
      },
      properties: {
        ...item,
        ...item.location,
        ...item.owner,
        id: item._id,
        data: item,
      },
    }));

  const superCluster = new Supercluster(superclusterOptions);
  superCluster.load(convertedArray);

  const clustersAndPoints = superCluster.getClusters([westLng, southLat, eastLng, northLat], zoom);

my render is looks like:

  return (
    <YaMap
      ref={mapRef}
      logoPadding={{ vertical: 670, horizontal: 30 }}
      showUserPosition={false}
      initialRegion={{ lon: MoscowPoint.lon, lat: MoscowPoint.lat }}
      style={RN.StyleSheet.absoluteFillObject}
      onLayout={() => setMapIsReady(true)}
      onCameraPositionChangeEnd={(event) => {
        if (event.nativeEvent.finished) {
          setWestLng(INITIAL_WEST_LNG);
          setSouthLat(INITIAL_SOUTH_LAT);
          setEastLng(INITIAL_EAST_LNG);
          setNorthLat(INITIAL_NORTH_LAT);
          mapRef.current?.getCameraPosition((position) => {
            const { lat, lon } = position.point;
            const { zoom } = position;

            handleChangeRegion({
              ...getRegionForZoom(lat, lon, zoom),
            });
            handleChangeZoom(position.zoom);
          });
        }
      }}
    >
      <UserLocationMarker />
      <Clusterer
        data={clustersAndPoints}
        region={region}
        options={{
          radius: 20,
          extent: 600,
          minPoints: 3,
          minZoom: 0,
        }}
        mapDimensions={MAP_DIMENSIONS}
        renderItem={(item) => {
          const clusterId: number = item.properties?.cluster && item.properties?.cluster_id;
          const markerId: string = item.properties?.id;

          return (
            <ClusterAndMarkerPoint
              points={clustersAndPoints}
              clusterId={clusterId}
              markerId={markerId}
              item={item}
              onPress={
                item?.properties?.cluster &&
                item?.properties?.cluster_id !== null &&
                (() => {
                  const clusterId = item?.properties?.cluster_id;
                  const clusterArr: Array<number> = clustersAndPoints.map((data) => data.properties.cluster_id);
                  const isClusterExist = clusterArr.includes(clusterId);
                  const toCluster = {
                    lon: item?.geometry?.coordinates[0],
                    lat: item?.geometry?.coordinates[1],
                  };
                  if (clusterId !== undefined && isClusterExist) {
                    getClusterZoom(clusterId);
                  } else {
                    if (zoom < 7) {
                      handleChangeZoom(7, toCluster, 0.6);
                    } else if (zoom < 10 && zoom > 7) {
                      handleChangeZoom(10, toCluster, 0.6);
                    } else {
                      handleChangeZoom(zoom + 3, toCluster, 0.6);
                    }
                    console.warn(`No cluster with the specified id: ${clusterId}`);
                  }
                })
              }
            />
          );
        }}
      />
    </YaMap>
  )

and my ClusterAndMarkerPoint:

  export const ClusterAndMarkerPoint: FunctionComponent<Props> = memo(
  ({ item, onPress, clusterId, markerId, points }) => {
    const [logoLoaded, setLogoLoaded] = React.useState(false);

    const clusterArr: Array<number> = points.map((data) => data.properties.cluster_id);

    const handlePress = useRecoilCallback(
      ({ get, set, reset }) =>
        (id: string) => {
          if (get(openedChargePointAtom)) {
            return;
          }

          set(openedChargePointAtom, id);
          chargersScreenBottomSheetsShowablePortal.current?.show(
            `DetailedChargePoint(id=${id})`,
            DetailedStationSheet,
            {
              chargePointId: id,
              onClose: () => {
                reset(openedChargePointAtom);
                mapRef.current?.getCameraPosition((position) => {
                  if (position.zoom > 10) {
                    mapRef.current?.setZoom(position.zoom - 1, 2, 1);
                  } else {
                    mapRef.current?.setZoom(position.zoom, 2, 1);
                  }
                });
              },
            }
          );
        },
      []
    );

    return (
      <YaMarker
        source={item?.properties?.logo_url && { uri: item?.properties?.logo_url }}
        key={clusterId || `${markerId + logoLoaded}`}
        point={{
          lat: +item.geometry.coordinates[1] || Number(item?.properties?.latitude),
          lon: +item.geometry.coordinates[0] || Number(item?.properties?.longitude),
        }}
        onPress={onPress || (() => handlePress(item?.properties?.id))}
      >
        {item?.properties?.cluster && clusterId ? (
          <ClusterComponent key={clusterId} clusterArr={clusterArr} item={item} />
        ) : (
          <>
            {item?.properties?.logo_url && (
              <PointComponent
                key={`${markerId + logoLoaded}`}
                markerId={markerId}
                logoUrl={item?.properties?.logo_url}
                logoLoaded={logoLoaded}
                setLogoLoaded={setLogoLoaded}
              />
            )}
          </>
        )}
      </YaMarker>
    );
  },
  (prevProps, nextProps) =>
    prevProps.item.properties?.cluster_id === nextProps.item.properties?.cluster_id &&
    prevProps.item.properties?.id === nextProps.item.properties?.id &&
    prevProps.item.properties?.point_count === nextProps.item.properties?.point_count &&
    prevProps.item.properties?.onPress === nextProps.item.properties?.onPress &&
    prevProps.item.properties?.getClusterExpansionRegion === nextProps.item.properties?.getClusterExpansionRegion &&
    prevProps.markerId === nextProps.markerId &&
    prevProps.clusterId === nextProps.clusterId
);