How to use react-native-maps methods like fitToSuppliedMarkers?

[eurobob]

I was using the following code with the regular package:

onMapReady={() => {
          mapRef.current.fitToSuppliedMarkers(
            markers.map(({_id}) => _id),
            {
              edgePadding: {top: 50, right: 50, bottom: 50, left: 50},
            },
          );
        }}

Is it possible to also have this functionality with clustering?

[wolfzer44]

Hey @eurobob , did you find a solution for it?

[bsor-dev]

+1

[denizmersinlioglu]

This workaround works for me, I hope will help you too 🙏 Basically,

• Disable the clustering and fit markers to the map.
• Open clustering.

const [clusteringEnabled, setClusteringEnabled] = useState(false);
const mapRef = useRef<Map | null>(null);  //  import Map, {Marker, Region} from 'react-native-maps';

<MapView
    mapRef={(ref) => (mapRef.current = ref)}
    clusteringEnabled={clusteringEnabled}
    onMapReady={() => {
          mapRef.current?.fitToSuppliedMarkers(myMarkerIds);
          setClusteringEnabled(true);
    }}
/>

[lucksp]

I am also having issues, with none of the suggestions working.

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:

However, what I see is this on initial render:

I have tried various suggestions: setting a timeout, using fitToElements, this thread's suggestion 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?