100%

Mapbox GL example of different zones with on off buttons

✓ Published0🌍 Public

Last edited Mar 21, 2018

Created on Mar 19, 2018

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.

AI-generated description

Mapbox GL example of different zones with on off buttons

Edit

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

69% match

Loading thumbnail…

Lots of points in Mapbox Basemap - Test

This example demonstrates a Mapbox GL map with a tilted and rotated view centered on the New York City area. It shows how the map’s basemap style can be dynamically switched via a custom control panel overlaid on the map. The page uses the Mapbox GL JS API to initialize the map with a specific style, pitch, bearing, and zoom level, while the `switchLayer` function updates the map’s style based on user input. A transparent title box with radio buttons allows selection among different style layers, and the Navigation control adds zoom and rotation controls.

WWill Carter

68% match

Loading thumbnail…

Mapbox 1.X Reference Examples

This example showcases a collection of Mapbox GL JS code snippets, extracted from official documentation at version 1.12.0, demonstrating various interactive mapping techniques. It features an animated image overlay on a map, using the Mapbox GL JS API to handle tile rendering and camera controls. The snippets illustrate how to integrate custom vector tiles and geospatial data, with code for styling layers and managing user interactions. The project serves as a reference for common mapping tasks, such as adding markers, drawing polygons, and animating data over time.

CCurran Kelleher

66% match