Area Geofencing on a Google Maps — React JS Example Projects

# Introduction

Welcome to the first series React JS Example Projects. This series explain how to create Area Geofencing in Google Maps with React JS, hopefully we can learn together.

DEMO DOWNLOAD

To create area geofencing we must find area boundaries and draw on google maps as polygon. During the writing of this series, area boundaries feature not available in the Google Maps API. The solution is using OpenStreetMap API for getting area boundaries.

# Getting Started

Our first step to architecting an application is defining what it should do. We want to:

1. Getting area boundaries using OpenStreetMap API
2. Drawing area boundaries on Google Map as polygon

First, create your react project

You can learn from scratch with follow this tutorial

$ create-react-app gmaps-geofence
$ cd gmaps-geofence
$ npm start

Second, install component

For searching area i’am using AsyncTypeahead component. The AsyncTypeahead component is provided to help in cases where data is being fetched asynchronously from an endpoint.

Using lodash debounce, creates a debounced function that delays invoking function until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed function invocations and a flush method to immediately invoke them.

$ npm install --save react-bootstrap-typeahead
$ npm install --save lodash

Third, Let’s Code

1 . Load google maps in componentDidMount() method
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

componentDidMount(){
 map = new window.google.maps.Map(document.getElementById(‘map’),{
   center: {lat: -6.226996, lng: 106.819894},
   zoom: 10,
   zoomControl: true,
   zoomControlOptions: {
    position: window.google.maps.ControlPosition.RIGHT_CENTER
   },
   scrollwheel: false,
   streetViewControl: false,
   mapTypeControl: false,
   mapTypeId: ‘roadmap’,
  });
 }

2 . Add _handleSearch method to handle AsyncTypeahead input

_handleSearch(query) {
    if (!query) {
      return;
    }
    fetch(`https://nominatim.openstreetmap.org/search.php?q=${query}&polygon_geojson=1&format=json`)
      .then(resp => resp.json())
      .then(data => {
        let filterGeoJsonType = data.filter(function(data){
          return data.geojson.type === "MultiPolygon" || data.geojson.type === "Polygon"
        });
        this.setState({options: filterGeoJsonType});
      });
  }

We pass the query to end point Nominatim , Nominatim is a tool to search OSM data by name and address and to generate synthetic addresses of OSM points (reverse geocoding).

• url

https://nominatim.openstreetmap.org/search.php?

• Output format

format=[html|xml|json|jsonv2]

• Output geometry of results in geojson format

polygon_geojson=1

• Query string to search for. Alternatively can be entered as:

q=<query>

3 . Add AsyncTypeahead input in render() method

<AsyncTypeahead
    align="justify"
    multiple
    selected={this.state.selected}
    labelKey="display_name"
    onSearch={_.debounce(this._handleSearch.bind(this), 2000)}
    options={this.state.options}
    placeholder="Search city, ex: tomang or jakarta selatan..."
    renderMenuItemChildren={(option, props, index) => (
        <div onClick={this._onSelectOptions.bind(this, option)}>
          <span>{option.display_name}</span>
      </div>
    )}/>

Finally, run your project

Run the Application with npm start

Area Geofencing on a Google Maps — React JS Example Projects

DEMO DOWNLOAD