Make Zip code boundaries in Google Map API

Question

I have seen all the responses to a similar question, however, they are all either old, or no one has answered them.

I have been given the task to obtain zip codes and display their corresponding boundaries to the user on a Google map, like in this example.

I am writing this code in Javascript and using the Google Maps API. I want the user to input a zip code and a marker drops down on their destination with a border representing that zip code area. I see that Google Maps currently has something in their map code that allows one to see the boundaries if someone puts a zip code on maps.google.com. I have used polygons but this wouldn't help make a border around a certain zip code.

Any suggestions on how to obtain this?

Thanks in advance!

Hollingsworth

Have you tried looking at how Google have done this with their own page and their own API? – Tetter

Yes, a lot of the things I find are articles and what not. Another post said that they use Twitter API but I couldn't find that particular one. – Hollingsworth

I just spoke with sales at Digital Map Products inquiring about doing this via their ParcelStream service, and they advised me Google is among their clients. (service is around 10k/month). – Elison

use www.boundaries-io.com worst very well. – Atreus

Answer 1

There is not an easy answer to this that I know of. But here is a high level design of how to do it.

All of the shape files for zip codes can be found at the census site and can be downloaded from this ftp server. However, that's a ton of data, so you need a place to store it. I recommend using the PostgreSQL database with the PostGIS add on. It is free and open source and generally awesome. It has a utility for converting .shp files (the type in the census shape files) into PostGIS geometry form. PostGIS let's you retrieve the shapes back out as KML.

You can either a) retrieve a shape from the database as KML when it is needed and display it on the map or b) pre-generate a kml file for every zip code ahead of time and retrieve a file as it is needed (this would take up quite a bit of space).

Roubaix

O gosh sounds like a long process! :-/ I actually have an excel file full of zipcodes and what not and I can ask the user to input the zip code and a marker will drop in the middle of zip code. Is there not a way to avoid KML? – Hollingsworth

@Hollingsworth You can avoid KML, (I don't use it), but you still need a database full of polygons. You can hardly hold that information in an Excel file. I use PostgreSQL/PostGIS as Mark suggested. And yes, it's a long process, involving many different skills, for which serious clients pay thousands of dollars, so I wouldn't expect to get a freebie. :-) – Ditch

@Hollingsworth It's hard to avoid KML (or GeoJSON or some other gis format) if you want the boundaries of the zip code to be displayed. AFAIK, google doesn't provide the zip code shapes to you. If you are okay just dropping the marker, you can put your spreadsheet in Google Fusion Tables, and pull that data out using the Maps API (developers.google.com/maps/documentation/javascript/…). – Roubaix

@Mark: note that what you get from the Census Bureau are not zip codes as defined by the USPS. Instead they are ZCTA's or 'Zip code tabulation areas'. census.gov/geo/ZCTA/zcta.html – Ditch

Awesome! @Ditch I wasn't looking for a freebie just a simple way to integrate it. :) Seems like a simple idea but hard to implement which is fine. I like challenges. Thanks for telling me the database of polygons! That is a lifesaver. I was "drawing" them and if you had many markers within a zipcode... it gets ugly! – Hollingsworth

You may be able to find the zip code polygons in publicly available FusionTables, you could use a FusionTableLayer to display them if you can find all of them. – Sooth

@Mark, thanks for the link! I have messed with fusion tables but they seem to miscalculate the zip codes I feed them. I shall definitely look into KML and see what I can come up with Both of you all, THANKS! :D – Hollingsworth

@Ditch Good point. True zip codes aren't really polygons, they are routes by which the USPS can deliver the mail (polylines, I guess). But I think the ZCTA's are generally useful for the type of thing njavia is doing. – Roubaix

@Roubaix - I see that redfin.com (real estate site) is not only adding boundaries for zipcodes entered, but they're also doing it for individual properties/parcels somehow. On this redfin link, click on a house pin, then click on "quick maps" on the right, and then notice the polygon around the property address. Does the recommmended solution have polygons for the individual parcels/properties too? – Elison

@Ditch - can you also weigh in on my previous comment? I'd like to get your feedback too. Thanks! – Elison

@Roubaix - I posted it here as another question if you want more info or want to answer it. – Elison

Answer 2

You need to become familiar with GeoJSON formatted FeatureCollections. You can render them on any set of map tiles with OpenLayers (or probably Google API as well)

This may seem pretty hard, but is totally approachable.

You can purchase GeoJSON files for groups of Zipcodes if you search around.

Dianoia

Answer 3

DOwnload the shapefile from here https://catalog.data.gov/dataset/tiger-line-shapefile-2019-2010-nation-u-s-2010-census-5-digit-zip-code-tabulation-area-zcta5-na

Simplifying using GDAL

We can use the ogr2ogr command from the GDAL library to convert the shapefile to geojson but even with only one field and simple coordinates the output file is over 1GB.

ogr2ogr -f GeoJSON -select ZCTA5CE10 -lco COORDINATE_PRECISION=6 zcta.geojson /vsizip/tl_2017_us_zcta510.zip

I tried to simplify this to topojson, but the topojson library chokes on this even on a very powerful 2017 MacBook Pro.

npx topojson -q 1e4 -o zcta_topo.json zcta.geojson >> JavaScript head out of memory

Another method I tried was using the -simplify option in ogr2ogr. The simplify argument is a unit of measure based on the spatial reference system of the shapefile. Since the srs for the ZCTAs is WGS84 the unit is a lat/lon measure.

ogr2ogr -f "GeoJSON" -lco COORDINATE_PRECISION=6 -select ZCTA5CE10 -simplify 0.006 zcta.geojson /vsizip/tl_2017_us_zcta510.zip

This creates a much smaller GeoJSON file (30MB) which the TopoJSON can easily handle and we end up with a more managable (but still too large) 13MB topojson file. Additionally, the topology of the dataset is very poor at medium to large scales.

npx topojson -q 1e5 -o zcta_topo.json zcta.geojson

Simplifying using Postgis

Create a docker volume to use for persistence docker volume create postgresql

Run the postgis docker

docker run --name postgis -p 25432:5432 -it --mount source=postgresql,target=/var/lib/postgresql kartoza/postgis

Load the zcta shapefile into postgis

ogr2ogr -f "PostgreSQL" -progress -select "ZCTA5CE10" -overwrite -lco OVERWRITE=yes -nln zcta -nlt PROMOTE_TO_MULTI -t_srs "EPSG:4326" PG:"dbname='gis' host='localhost' port='25432' user='docker' password='docker'" ~/Downloads/tl_2017_us_zcta510/tl_2017_us_zcta510.shp

Sample query with st_simplifypreservetopology (New England). This takes a long time to run for the entire country and we still lose a lot of the topology.

select st_simplifypreservetopology(wkb_geometry, 0.025) as thegeom, zcta5ce10 from zcta where zcta5ce10 like '0%' OR zcta5ce10 like '1%'

Simplifying using Mapshaper (Best solution)

The Mapshaper library can output TopoJSON directly from the shapefile without JavaScript memory heap errors. This command creates a ~6MB topojson file that we can use. It also manages to keep topology very well by assuming that very close verticies and edges should be coincident.

npx -p mapshaper mapshaper-xl tl_2017_us_zcta510.shp snap -simplify 0.1% -filter-fields ZCTA5CE10 -rename-fields zip=ZCTA5CE10 -o format=topojson zcta_mapshaper.json

source:https://github.com/elastic/ems-file-service/issues/6

Edva