DEV Community

Sahil kashyap
Sahil kashyap

Posted on • Edited on

5 2

How to get USA zipcode boundaries and show them on map(mapbox)

step 1:download cb_2018_us_zcta510_500k.zip

https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html

if you want to keep them in mysql

In your mysql create a db of name :spatialdata
run this command

ogr2ogr -f "MySQL" MYSQL:"spatialdata,host=localhost,user=root" -nln "map" -a_srs "EPSG:4683" cb_2018_us_zcta510_500k.shp -overwrite -addfields -fieldTypeToString All -lco ENGINE=MyISAM

i uploaded the file on github USAspatialdata.zip

In your "spatialdata db" there will be 2 table named map & geometry_columns .

  1. In 'map' there will be a column named "shape".

shape column is of type "geometry" and it contains polygon/multipolygon files

  1. In 'geometry_columns' there will will be srid(in my case it was 4683) defined

how to check if point falls in the polygon

SELECT * FROM map WHERE ST_Contains( map.SHAPE, ST_GeomFromText( 'POINT(63.39550 -148.89730 )', 4683 ) )

and want to show boundary on a map

select `zcta5ce10` as `zipcode`, ST_AsGeoJSON(`SHAPE`) sh from `map` where ST_Contains( map.SHAPE, ST_GeomFromText( 'POINT(34.1116 -85.6092 )', 4683 ) )`

"ST_AsGeoJSON" this returns spatial data as geojson.
Use http://geojson.tools/

if you want to generate topojson

mapshaper converts shapefile to topojson (no need to convert it to kml file)

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

If you want to convert shapefile to kml

ogr2ogr -f KML tl_2019_us_zcta510.kml -mapFieldType Integer64=Real tl_2019_us_zcta510.shp

I have used mapbox gl to display 2 zipcodes

If there are more ways(opensource) to do this kindly share them

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay