100%

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

✓ Published0🌍 Public

Last edited Mar 20, 2018

Created on Mar 18, 2018

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.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

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

88% match

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

75% 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

74% match

Loading thumbnail…

colored-data.geojson

A choropleth-style map displays a small set of U.S. counties colored with a categorical palette. The visualization loads a GeoJSON FeatureCollection, where each county polygon includes a `fill` property defining its color. The code uses `d3.geoPath` to project and render the geographic shapes as SVG paths, assigning each county its designated fill color. It relies on the D3 library to handle the GeoJSON parsing and path generation.

JJn1532

73% match

Loading thumbnail…

Mapbox GL zip code map with on off buttons

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.

JJn1532

72% match

Loading thumbnail…

Mapbox GL county identification/population

A Mapbox GL map highlights individual U.S. counties on mouseover, displaying the county name and total population in a small overlay panel. The example queries vector tile sources for county polygons, uses `map.queryRenderedFeatures` to identify the hovered county, and `map.setFilter` to render all matching county polygons with a distinct purple fill. Population data is summed from the features returned by `map.querySourceFeatures` and formatted with `toLocaleString`. The interaction uses Mapbox GL's Popup API and cursor styling to signal selectable regions.

JJn1532

72% match

Loading thumbnail…

country map

This visualization displays a map of the United States at the county level, using a green fill with black borders that highlight individual county boundaries. Hovering over any county changes its fill color to yellow. The map is rendered as SVG using D3 v5, with geographic projections handled by `d3.geoAlbersUsa` and `d3.geoPath`. County boundaries are generated from TopoJSON data loaded from the us-atlas package, and the code relies on `topojson.feature` to extract geographic features and `topojson.mesh` for boundary calculations.

Ddivyagunuguntla

72% match

Loading thumbnail…

Gist cd3b399ded90abed9e03930563398518

This example displays a Mapbox GL JS map centered on Houston, Texas, at zoom level 10, with a set of airfield-style symbol markers plotted over a custom vector tile source. The visualization uses `map.addSource` to load a hosted vector tileset containing school location data and `map.addLayer` to render those points as icons via the `symbol` layer type. A collapsible overlay panel and a menu for switching map views are included, though the menu’s active state and overlay content are not populated in the provided code. The map style is a custom Mapbox style URL.

JJn1532

70% match