Measure fields and area using google maps api in react native

AliDbouk98 0
Viewed 22

I want to implement a feature in my react native application to let the user measure area or fields with two different methods the first is manual like manually drawing the fields area in the map and secondly automatically by using the gps and entering points while he walk around the field . Could please anyone share some resosurces or any help material that may assist me in achieving this feature. Thanks in advance

measurement gps google-maps geolocation react-native
1 Answers

It is totally doable. Since you didn't mention any particular library, let me explain using react-native-maps (it is an awesome package :). Let's first discuss using the drawing (not sure if you literally mean drawing - at least I don't think you need to add complexity in this).

  1. You can provide the <MapView> component provided by the package with a onTap method, when the user taps, you can add the coordinate a list of coordinates like this:

    const [coordinates, setCoordinates] = useState([]);

then in the map, you can do

<MapView onPress={(coords) => setCoordinates([...coordinates, coords])} ...rest of the code
  1. when the user is done, you can use a bit of mathematics (https://www.mathopenref.com/coordpolygonarea.html) or even a polygon package to calculate the area (https://www.npmjs.com/package/polygon).

Well, the second use case is easier I think as no extra interaction is needed since user can input the coordinates which you can again put in the coordinates array and use to calculate area.

I hope it helps :)

userektt0
Related