Check out other maps of San Diego and its communities. City of San Diego Map Gallery SanGIS Interactive Parcel Map (SanGIS) Parcel Lookup Tool and Geographic Boundary Viewer (SANDAG) Official Zoning Map (Development Services) Capital Improvements Program (CIP) Project Information Geologic Hazards and Faults Maps (Development Services) Historical C & Z Sheet Maps (City Clerk).

City Boundaries With Google Maps

This is a small example web app to illustrate adding city boundaries(limits) to Google Maps. The city data is read from the OpenStreetMapOverpass API:

Breakdown

The JavaScript files used in this project are as follows:

google.maps.Polygon.getBounds.js

Polygon getBounds extension from google. Used to get the bounds of thefinal Polygon created for the cities boundaries and then zoom the mapto that polygon.

jquery-1.10.2.js

Used for AJAX queries.

city-boundaries-googlemaps.js

The main JavaScript file that finds the city boundaries and displaysthem on a Google Maps canvas. Creates a legend with the city entered.

utility-functions.js

A few small utilities.

relation-in-order.js

This JavaScript gets the boundary relation specified and constructs anarray of paths. These paths consist of the nodes that are latitudeand longitude points on the boundary.

Please see the Overpass background section for a discussion on relations,ways and nodes.

To construct the paths this script does the following:

This must be done because neither the ways nor the relation are in order.

This script does not do anything special for inner ways as Google Maps willhandle discovering that a way is contained within another and display itproperly. If not using Google Maps you will have to find if paths arecontained within others. I wrote a script to do that here:

How to use

You must include all the Javascript files in the js folder in your HTML page.To run this example, download the project and open the index.html file.

Overpass background and Overpass QL used

The OpenStreetMap Overpass API is a read-only API that provides OSM data.

The relevant OpenStreetMap data is organized into relations, ways and nodes.

• Relation - http://wiki.openstreetmap.org/wiki/Relation
• Node - http://wiki.openstreetmap.org/wiki/Node
• Way - http://wiki.openstreetmap.org/wiki/Way

I find the relation, read its ways into memory and then add all their nodesinto our paths in the correct order.

The Overpass QL is used to query the Overpass API. Because the OSM data isincosistently labeled I have two sets of queries to find the correct area.These could certainly be tweaked/changed as I know they don't work allthe time. See bugs section for more details.

Query directly for the area:

If that doesn't work also query for associated nodes, and return each node'sassociated areas:

Then get the relation ID from the area ID by subtracting 3600000000 from it.

To get the relation from its ID:

Notes

This can handle cities that are made up of multiple polygons, for exampleNew York, NY. It can also handle cities with holes in them, for exampleDetroit, MI.

Sometimes the Overpass API goes much faster than other times. I use a busyindicator in the example to show when pinging the Overpass servers.

Bugs

The OpenStreetMap city boundary data is missing for some cities. Even somebig ones like Los Angeles and Dallas. There isn't much I can do about this.

Right now, this is more of a starting point, more work must be done to fixthe queries to get the data for cities that are available but aren't found.An example is Houston, TX.

There are still a few issues with drawing polygons with Google Maps as itseems to mess up occasionally. Currently, I am only aware of issues withSan Antonio and I believe this is becuase it is messing up on some of theholes (or in OSM terminology, the inner ways of the boundary relation).