blueprint-geofencing

Geofencingblueprint is tool which is use for create multiple polygon on map and also apply diffrent color and display name of the polygon for perticuler area.User can also click on polygon and we can handle purticuler polygon click event.Also we can get notification for user enter and exit from area.

Prerequisites

You have to follow all bellow step for run google map in your application and if you didn't do that then follow bellow link all the steps.

https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

Installation

After follow all the stpes for implement google map in your application, and successfully run google map in your application run this command in you project for install geofencing.

npm i react-native-geofencing-blueprint

Usage

// ...
import React, {Component} from 'react';
import { Geofencing } from 'react-native-geofencing-blueprint';

//Ppolygon list for you areas
let polygons = [{
  id: "k1nFj8b0imq9NzALveDA", fencePoints: [
      { latitude: 33.982798, longitude: -118.4710194 },
      { latitude: 33.9941135, longitude: -118.4496422 },
      { latitude: 34.002439, longitude: -118.4669844 },
      { latitude: 33.9946827, longitude: -118.4821803 },
  ], name: "", userCount: 344, fillColor: "rgba(255, 95, 95,0.5)"
},
{
  id: "EtlI49XRiaKGUR8tbwqH", fencePoints: [
      { latitude: 33.9798087, longitude: -118.4680274 },
      { latitude: 34.0075975, longitude: -118.4175163 },
      { latitude: 34.0026524, longitude: -118.4141017 },
      { latitude: 33.9955723, longitude: -118.4231645 },
  ], name: "Marina Del Rey", userCount: 200, fillColor: "rgba(255, 95, 95,0.5)"
},
];
export default class App extends Component {

isInStatus = (isInStatus) => {
  console.log('ISINSTATUS',isInStatus); 
}
onPolygonClick = (areaDetail) => {
  console.log('Polygon Click Detail',areaDetail); 
}
render() {
    return (
      <Geofencing  data={polygons} initialLatitude={33.9957146} initialLongitude={-118.4790071} markerTitle={'Test Title'} markerdescription={'Test Description'} isInArea={this.isInStatus} polygonClick={this.onPolygonClick}/>
    );
  }
}

Props

| Name | Type | Description | Default | | ---- | :---: | --- | --- | | data | Array | Array of polygon which you want to display on map | | initialLatitude | Number | Initial latitude that you want to display when load map | null | initialLongitude | Number | Initial longitude that you want to display when load map | | markerTitle | String | Maker title that you want to display when you click on maker | | markerdescription | String | Maker description that you want to display when you click on maker | | isInArea | Bool | Return user enter and exit from the area. | polygonClick | Function | Detail of polygon on which you click