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, 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?