How to check my location is in the polygon or in the particular area in react native using react-native-maps?

Question

I am rendering location via server and polygon as well.

When the user is out of polygon it will throw some message.

<MapView
         style={styles.map}
         toolbarEnabled={true}
         region={{
           latitude:this.state.lat,
           longitude: this.state.long,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
         rotateEnabled={true}
         provider={this.props.provider}
         onPress={e => this.onPress(e)}
         {...mapOptions}
         animateToCoordinate={[this.state.initialPosition, 500]}
       >
         {this.state.polygons.map(polygon => (
           <Polygon
             key={polygon.id}
             coordinates={polygon.coordinates}
             holes={polygon.holes}
             strokeColor="#F00"
             fillColor="rgba(255,0,0,0.5)"
             strokeWidth={2}
           />
         ))}
         {this.state.editing && (
           <Polygon
             key={this.state.editing.id}
             coordinates={this.state.editing.coordinates}
             holes={this.state.editing.holes}
             strokeColor="#000"
             fillColor="rgba(255,0,0,0.5)"
             strokeWidth={2}
           />
         )}
         <Marker coordinate={{
          latitude:this.state.lat,
          longitude: this.state.long}} >
       </Marker>
       </MapView>

I am using:

• react-native :0.47.1
• react-native-maps : 0.20.1

Answer 1

In case you have trouble with the onPress for Polygon or MapView

    const MapScreen = (props)=>{
    const [selectedLocation, setSelectedLocation] = useState();
    const [isSelectedLocationinZone, setIsSelectedLocationInZone] = useState(false);
    const mapRegion = {
        latitude: 37.78,
        longitude:-122.43,
        latitudeDelta: 0.0922,
        longitudeDelta:0.0421,
    };

    const coordinates = [
        { name: 'Burger', latitude: 37.8025259, longitude: -122.4351431 },
        { name: 'Pizza', latitude: 37.7946386, longitude: -122.421646  },
        { name: 'Soup', latitude: 37.7665248, longitude: -122.4165628  },
        { name: 'Sushi', latitude: 37.7834153, longitude: -122.4527787  },
        { name: 'Curry', latitude: 37.7948105, longitude: -122.4596065 },
      ]

   
    const selectedLocationHandler = event =>{
        try {setSelectedLocation({
            lat: event.nativeEvent.coordinate.latitude,
            lng: event.nativeEvent.coordinate.longitude,
        })}catch(err){
            console.log(err)
        }
        
    }

    const areaCorrectaHandler = ()=>{
        setIsSelectedLocationInZone(true);
        console.log(selectedLocation)
    }

    console.log(selectedLocation)

    let markerLocation;
    if(selectedLocation){
        markerLocation={
            latitude: selectedLocation.lat,
            longitude: selectedLocation.lng
        }
    }

    const saveLocationHandler = useCallback(()=>{
        if(!selectedLocation){
            Alert.alert(
                "Seleccione una ubicación",
                "No podemos continuar sin punto de entrega",
                [{ text: "Ok" }])
            return;
        }

        if(!isSelectedLocationinZone){
            Alert.alert(
                "No se encuentra al alcance",
                "Todavia no repartimos en tu zona",
                [{ text: "Ok" }])
            return;
        }
        props.navigation.navigate('Checkout', {pickedLocation: selectedLocation});
    },[selectedLocation])

    useEffect(()=>{
        props.navigation.setParams({saveLocation: saveLocationHandler});
    }, [saveLocationHandler])

    



    return <MapView style={styles.map}region={mapRegion} onPress={selectedLocationHandler}>
        <Polygon coordinates = {coordinates} onPress = {areaCorrectaHandler}/>
        {markerLocation && <Marker  title= 'Ubicacion' coordinate = {markerLocation}/>}
    </MapView>
}

Answer 2

use https://github.com/surialabs/react-native-geo-fencing library for check point in polygon

componentDidMount() {
  const polygon = [
    { lat: 3.1336599385978805, lng: 101.31866455078125 },
    { lat: 3.3091633559540123, lng: 101.66198730468757 },
    { lat: 3.091150714460597,  lng: 101.92977905273438 },
    { lat: 3.1336599385978805, lng: 101.31866455078125 } // last point has to be same as first point
  ];

  let point = {
    lat: 2.951269758090068,
    lng: 101.964111328125
  };

  GeoFencing.containsLocation(point, polygon)
    .then(() => console.log('point is within polygon'))
    .catch(() => console.log('point is NOT within polygon'))
}

pass your polygon data to polygon array and marker in point.. it will show you ..point in polygon or not