react-native-geofencing-blueprint

    1.1.2 • Public • Published

    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

    Install

    npm i react-native-geofencing-blueprint

    DownloadsWeekly Downloads

    8

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    10.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • pintusoliya