Zoom into US Zip Codes in Leaflet Map

It has been a while since I touched Leaflet and today I want to play around with mapping zip codes. I really liked Ben Fry’s zipdecode project and have seen other interesting implementations. But, I want to go beyond highlighting and actually zoom into the appropriate areas based on each number of the zip code. I think this would be an interesting take on zip decoding and I am going to implement it on a Leaflet map.

First, we need zip code data. I grabbed the TSV file from Mike Bostock’s zipdecode example and it includes one latitude and longitude geo location per zipcode. This is enough to direct Leaflet to zoom into a specific location but first we need to parse the TSV as JSON and do some filtering. I setup an input element where a user can start typing a zip code and on key presses I filter the zip code array to get geo location information. For the first 2 numbers of a zip code, I just grab the latitude and longitude data for the first zip code in the filtered list and instruct the map to move to that location with a specific zoom value.

For the 3rd number, I want to get a little more specific with the zoom and I create geo points based on all of the zip codes in the filtered list, and then move the map using Leaflet fitBounds method. This makes sure the map is zoomed in for all the zip codes in the selection. For the 4th number, I loop through the filtered list and create markers so that we can actually see all the zip codes on the map. I push the markers into a Leaflet layerGroup so that it is easy to remove the layer from the map when the user makes another selection. Finally, the 5th number just gets zoomed into the appropriate geo location.

Check out the Leaflet Zipdecode Demo and look at the source.

External

Census Bureau ZIP Code Tabulation Areas for 2010 TIGER
zip codes and their boundary data
UCSB zipcodes