100%

Mapbox GL zip code map with on off buttons

✓ Published0🌍 Public

Last edited Mar 21, 2018

Created on Mar 19, 2018

This interactive map displays U.S. zip code boundaries as semi-transparent, colored polygon fills with subtle blue outline lines. A menu of on/off buttons toggles the visibility of the "Zip" fill layer and the "zipline" boundary layer. Built with Mapbox GL JS, it loads a vector source and renders layers using the Mapbox Studio style, with hover events logging feature properties to the console.

AI-generated description

Mapbox GL zip code map with on off buttons

Edit

Similar vizzes

Loading thumbnail…

Mapbox GL example of different zones with on off buttons

This Mapbox GL example displays multiple geographic zones around Houston, Texas, with interactive toggle buttons for layering school locations, school zones, zip code areas, and county boundaries on a single map. Using the Mapbox GL JavaScript API, the visualization loads vector tile sources from the author’s Mapbox account and toggles layer visibility through HTML menu links with CSS styling. The map also includes a popup and overlay for additional information, though these features are only partially implemented in the provided code.

JJn1532

81% match

Loading thumbnail…

Mapbox GL Zoom-in Population map

This zoomable choropleth map of the United States visualizes population at the state level when zoomed out, then transitions to county-level population data when zoomed in past a threshold of zoom level 4. Built with Mapbox GL JS v0.27.0, the map uses two vector layers from a Mapbox-hosted source, each with its own color stops and legend. A `zoom` event toggles the visibility of the state and county legends dynamically. The map uses a light basemap style and is centered on the contiguous US.

JJn1532

73% match

Loading thumbnail…

Mapbox GL map example - turn on/off county 5 color

This example displays a Mapbox GL map of U.S. counties with a categorical five-color fill scheme. A menu allows toggling the visibility of the county fill layer on and off. The map uses the Mapbox GL JavaScript API and loads vector data from a Mapbox-hosted source. The layer’s fill color is determined by a categorical property, with each category assigned a distinct hex color stop. The map setup includes a center point in Texas and a zoom level of 5.

JJn1532

72% match

Loading thumbnail…

Zipdecode

Zipdecode displays all U.S. ZIP code locations as a dot map, highlighting those that match the prefix typed into an input field. It uses an AlbersUSA projection to plot each ZIP code’s latitude and longitude from a TSV dataset. As the user enters digits, the map cross-fades between canvases, drawing inactive dots in gray and active matches in red. The implementation uses d3.geo.albersUsa, d3.tsv, d3.select, and canvas transitions, animating opacity over 350 milliseconds before removing old layers.

Mmbostock

69% match

Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un

69% match

Loading thumbnail…

nyc zip code gejson

This example shows a map of New York City ZIP code boundaries, with each postal code drawn as a filled polygon. The map uses d3.geoPath to render the GeoJSON features from a gist, which contains both the polygon geometry and property data such as borough and neighborhood name. The visualization colors each district and includes a longitude/latitude attribute for each ZIP code, enabling geographic context. The GeoJSON file supplies all boundary coordinates and metadata directly, so the rendering relies on d3’s geographic projections to display the polygons in a flat, interactive layout.

JJn1532

68% match

Loading thumbnail…

Zip Codes

This example visualizes the geographic distribution of U.S. zip code tabulation areas, which serves as a rough proxy for population density. It shows a complete map of the contiguous United States, with each zip code represented as a filled polygon. The map is rendered from a TopoJSON file, originally derived from a Census Bureau shapefile and simplified to reduce file size by 99.1%. The code uses `d3.geoPath` to project and draw the shapes, and the visualization is part of the U.S. Atlas project.

Mmbostock

68% match

Loading thumbnail…

Mapbox GL 5 Color map

This interactive map applies the five color theorem to a precomputed GeoJSON county map, ensuring that no two adjacent counties share the same fill color. Built with Mapbox GL JS v0.26.0, it dynamically loads a vector source from Mapbox and adds five fill layers, each filtered to a specific color from a preset palette. The map centers on Texas at zoom level 5, with a toggleable menu for the fill layer. A mouse-move event queries rendered features and logs their properties to the console, demonstrating feature inspection.

JJn1532

67% match