Clustering with fitToSuppliedMarkers does not show all markers

16 Views Asked by At

As you can see, my map has 3 pins spread out between NY & CO, which should represent the initial view when my data is loaded to the map: expected initial render

However, what I see is this on initial render: actual initial render

I have tried various suggestions: setting a timeout, using fitToElements, toggling clusteringEnabled and more all without success.

export const LogView = () => {
  const { currentLocation } = useLocationContext();
const mapRef = useRef<MapView | null>(null);
  // const [isMapReady, setMapReady] = useState(false);
  // const [clusteringEnabled, setClusteringEnabled] = useState(false);

  const { data, isLoading } = useSWR(fetcher);


  const INITIAL_REGION = {
    latitude: currentLocation?.coords.latitude || 0,
    longitude: currentLocation?.coords.longitude || 0,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  };

  const onMapReady = () => {
    const ids = data?.map(datum => datum.id);

    // setMapReady(true);
    // mapRef.current?.fitToElements();
    mapRef.current?.fitToSuppliedMarkers(ids || []);
    // setClusteringEnabled(true);
  };

  return (
    <ClusterMap
        clusterColor={colors.main.default}
        initialRegion={INITIAL_REGION}
        mapPadding={{
          top: insets.top,
          right: 16,
          left: 16,
          bottom: insets.bottom,
        }}
        mapType="mutedStandard"
        onMapReady={onMapReady}
        ref={mapRef}
        showsMyLocationButton
        style={[StyleSheet.absoluteFill]}
      >
        {data?.map(datum => {
          const { location } = (datum.location as unknown as Result).geometry;

          return (
            <Marker
              coordinate={{ latitude: location.lat, longitude: location.lng }}
              identifier={datum.id}
              key={datum.id}
            >
              <Pressable>
                <MapPinIcon
                  color={colors.main.default}
                  height="40"
                  width="40"
                />
              </Pressable>
            </Marker>
          );
        })}
      </ClusterMap>
  )
}

My package versions:

    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "1.7.1",
    "react-native": "0.72.10",
    "expo": "^49.0.1",

What are the expectations for clustering when there are large variations in distance? Is it OK to use the current user location as the INITIAL_REGION? Any other suggestions?

0

There are 0 best solutions below