Area Geofencing on a Google Maps — React JS Example Projects

Safei Muslim
Apr 27, 2017 · 3 min read
Image for post
Image for post

# 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

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
Image for post
Image for post

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

SkyshiDigital

We help scale up your startup to the next level

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store