Google Maps Geojson Overlays

This repository is a simple barebones codebase which renders something like shown below:

This is called Google maps geojson overlay.

Read more about Google Maps Overlays here: https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple

Geojson is a data format which encodes a geographic entities like area, route, river etc. and has format as given below:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

Prepping the data

Finding Geojson format for Indian districts turned out to be a daunting task. So Geojson format was generated by converting shape files available at http://www.gadm.org/country using this tool: https://ogre.adc4gis.com/

Just upload the zip file downloaded fron GADM into Ogre and save the result in a .json file.

Stack used in this project

• jquery and fontawesome
• typescript and sass
• expressjs
• elasticsearch

please note that to render the above shape onto the map ts, sass, elasticsearch and expressjs are unnecessary and can be achieved by simple frontend javascript. The other technologies are used for experimentation purpose only.

Setting up the project

Git clone

git clone https://github.com/anna93/google-maps-overlay.git

Install npm modules

npm install

Install bower modules

bower install

Index the included Geojson into elasticsearch

node elasticindexer.js

Run

node app.js

or if in developmemt mode:

nodemon app.js

You will need to run gulp for auto compilation of ts and sass, use:

gulp sass:ts:watch