React native map draw a polygon on map press

React native map draw a polygon on map press.

To draw a polygon on a map in React Native when the user presses on the map, you can use the react-native-maps library along with the PanResponder to capture the touch events and draw the polygon accordingly. Here’s an example of how you can achieve this:

Firstly, make sure you have installed react-native-maps and linked it to your project:

npm install react-native-maps

Here’s an example code snippet:

 

import React, { useState } from 'react';
import MapView, { Polygon } from 'react-native-maps';
import { View, StyleSheet } from 'react-native';

const MapWithPolygon = () => {
  const [coordinates, setCoordinates] = useState([]);
  const [polygonCoordinates, setPolygonCoordinates] = useState([]);

  const handleMapPress = (event) => {
    const newCoordinates = [...coordinates, event.nativeEvent.coordinate];
    setCoordinates(newCoordinates);

    if (newCoordinates.length >= 3) {
      setPolygonCoordinates(newCoordinates);
    }
  };

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        onPress={handleMapPress}
        initialRegion={{
          latitude: /* Initial latitude */,
          longitude: /* Initial longitude */,
          latitudeDelta: /* Some value */,
          longitudeDelta: /* Some value */,
        }}
      >
        {polygonCoordinates.length > 0 && (
          <Polygon
            coordinates={polygonCoordinates}
            fillColor="rgba(0, 0, 255, 0.5)" // Set the fill color for the polygon
            strokeColor="rgba(0, 0, 255, 1)" // Set the stroke color for the polygon
            strokeWidth={2}
          />
        )}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default MapWithPolygon;

This code sets up a MapView component and listens for onPress events. When the user presses the map, it captures the coordinates and adds them to the coordinates state. If there are at least three coordinates collected, it updates the polygonCoordinates state, which draws the polygon on the map using the Polygon component from react-native-maps.

You can modify the initial region and styling properties according to your requirements.

Remember to handle the actual initial region, latitude, and longitude values appropriately for your use case.