wrong react native map boundaries when the map is rotated

39 Views Asked by At

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.

0

There are 0 best solutions below