Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ivancrneto/service-areas

Little sample project where company owners can setup service areas by using polygons in maps api
https://github.com/ivancrneto/service-areas

Last synced: 8 days ago
JSON representation

Little sample project where company owners can setup service areas by using polygons in maps api

Awesome Lists containing this project

README

        

# service-areas
=============

Little sample project where company owners can setup service areas by using polygons in maps api

# Draw Page

## Drawing Areas

Service Areas starts by default in the draw page, where you can just click Draw Area button to start drawing. You can then click in some points of the map and a polygon will show up based on the points you chose, at least three.

![](http://i61.tinypic.com/fb9qvn.png)

## Drawing More Areas

You can draw multiple areas by just clicking on Finish Drawing... button then clicking Draw Area button again. You can draw as many areas as you want.

![](http://i62.tinypic.com/eqzi91.png)

## Showing Coordinates

By clicking Show Coordinates, a InfoWindow will show up for every vertex your areas have. Click on it again to hide the coordinates.

![](http://i61.tinypic.com/acc3l0.png)

## Clearing and Submitting

You can click on Clear Button to clear the areas you drawn and start over.
After clicking on Submit button, your work will be stored so you can query the areas in the Query page.

![](http://i58.tinypic.com/r27xts.png)

# Query Page

## Showing Coordinates

You can still show coordinates on Query Page, by doing the same you did on Draw Page. This is important to check if the coordinates match.

![](http://i60.tinypic.com/347cpx2.png)

## Querying Area

To query an area, just click Query Area button then click anywhere in the map. A message will show up saying if the point you clicked is inside any of the areas or not. Click the button again to stop querying.

![](http://i57.tinypic.com/28chbpj.png)

![](http://i62.tinypic.com/116m62t.png)

![](http://i62.tinypic.com/azcvat.png)