Summary
I'm using react-native-maps for the following issue.
I'm trying to get the visible map boundary using mapRef.current?.getMapBoundaries, it returns { northEast: LatLng, southWest: LatLng }, drawing a polyline of those coordinates is fine until you rotate the map, then it's going to give you wrong coordinates,
is there a better way to get visible map boundaries?
I used to get an output like { topLeft: LatLng, topRight: LatLng, bottomRight: LatLng, bottomLeft: LatLng } from other libraries,
is there a way to get four points like those that represent the map bounradaies.
Reproducible sample code
import { useCallback, useMemo, useRef, useState } from 'react';
import MapView, { BoundingBox, Polyline } from 'react-native-maps';
const initialRegion = {
longitudeDelta: 0.15110325068235397,
latitudeDelta: 0.1793406486560123,
longitude: 55.26689613237977,
latitude: 25.212185223887573,
};
export type ExampleProps = {
//
};
export const Example: React.FC<ExampleProps> = () => {
const mapRef = useRef<MapView>(null);
const [mapBoundaries, setMapBoundaries] = useState<BoundingBox>();
const handleRegionChangeComplete = useCallback(async () => {
const mapBoundaries = await mapRef.current?.getMapBoundaries();
if (!mapBoundaries) return;
setMapBoundaries(mapBoundaries);
}, []);
const polylineCoordinates = useMemo(() => {
if (!mapBoundaries) return [];
return [mapBoundaries.northEast, mapBoundaries.southWest];
}, [mapBoundaries]);
return (
<MapView
ref={mapRef}
initialRegion={initialRegion}
onRegionChangeComplete={handleRegionChangeComplete}
>
<Polyline coordinates={polylineCoordinates} />
</MapView>
);
};
Steps to reproduce
- run the code.
- change the region (by moving in the map).
- a polyline, will be drawn from top right into bottom left.
- now try rotate the map and change the region.
- the polyline will not be drawn properly.
Expected result
the polyline should always be from top right into bottom left, or maybe the lib should give us 4 points instead of 2.
Actual result
the lib will not give me the right boundaries when rotation is applied.
React Native Maps Version
^1.8.0
What platforms are you seeing the problem on?
Android
React Native Version
0.72.6
What version of Expo are you using?
Not using Expo
Device(s)
Samsung Galaxy S21 FE
the polyline should always be from top right into bottom left, or maybe the lib should give us 4 points instead of 2.