100%

04: Custom Map Controls

✓ Published0🌍 Public

Last edited Apr 11, 2018

Created on Apr 11, 2018

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.

AI-generated description

04 Adding Custom Map Controls

In this example we add a couple buttons to our map (their style could be improved, sorry!) which allow for toggling the hexbins and crashes point data on and off.

Things to Try out

See if you can add a slider for each layer, to change its opacity.
What other UI elements might we need for this map? How would we go about making them?

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/clhenrick/'>clhenrick</a>'s block: <a href='http://bl.ocks.org/clhenrick/54868a85037c69e54f5e43ffe07c7ee9'>ischool-geo-viz-template</a>

forked from <a href='http://bl.ocks.org/clhenrick/'>clhenrick</a>'s block: <a href='http://bl.ocks.org/clhenrick/57a76d0f25877840568ab26515eb03ac'>ischool-geo-viz-02</a>

forked from <a href='http://bl.ocks.org/clhenrick/'>clhenrick</a>'s block: <a href='http://bl.ocks.org/clhenrick/b60428829fc936a16706ac9964f8b450'>ischool-geo-viz-04</a>

mit Licensed

Similar vizzes

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

74% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example presents a dark-themed interactive map of New York City motor vehicle crash locations, visualized as a point dataset over a base map. The view centers on the city and uses an initial zoom level of 10, with a full-screen map container. The visualization relies on the Mapbox GL JS API (v0.43.0) to render the base map and manage user interaction. It loads crash data from a remote GeoJSON file and also references a second JSON file containing hexbin aggregates, although the code shown only initializes the map and sets the access token. The map is configured with the "dark-v9" style, and D3 v4 is included in the page.

MMartiHearst

74% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example shows a map of New York City traffic crashes, with each crash represented by a colored circle that indicates the type of severity (injury, fatality, or no injury). The map is built using Mapbox GL JS for the interactive basemap, while D3.js (v3) handles fetching the GeoJSON crash data and styling the circle layer’s color and radius. The circle size scales dynamically with zoom level, and Turf.js is loaded but not used in the visible code. The data comes from the `nyc_crashes.geojson` file hosted on GitHub.

MMartiHearst

73% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This visualization maps motor-vehicle crash locations in New York City, colored by crash type (injury, fatality, etc.), using a dark Mapbox basemap. It shows clustered point data to reveal geographic patterns of crash severity. The code uses Mapbox GL JS with D3.js v3 to load GeoJSON data from a GitHub repository, create a clustered circle layer, and apply categorical color mapping with radius scaling. The map includes navigation controls and a zoom-dependent radius transition.

55un

73% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This interactive map visualizes New York City motor vehicle crash locations using Mapbox GL and D3.js. The page displays raw crash data points from a GeoJSON file alongside hexbin aggregations loaded from a separate processed JSON source. A dark map style provides the base layer, with the map centered on the city at zoom level 10. The implementation initializes a Mapbox GL map instance and references two remote data URLs, showing how to combine geographic data sources in a workshop template.

MMartiHearst

72% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example shows a blank dark-themed Mapbox map centered on New York City, with no visible data layers or points of interest. The visualization is a workshop template, so the map is intentionally empty, waiting for users to add their own geographic data. It loads a Mapbox GL map with a navigation control, using Mapbox’s dark style and an access token for tile access. The code references a local GeoJSON dataset of NYC crashes as a remote URL, but the data is not yet drawn on the map, making this a starting point for hands-on geovisualization exercises.

55un

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

71% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example visualizes New York City traffic crash data as a clustered point map, distinguishing crash types—no injury, injury, fatality, and combined injury and fatality—through a categorical color scale. It uses Mapbox GL for the interactive basemap and layer rendering, while D3 v4 fetches and loads the GeoJSON data. The map clusters points at higher zoom levels using Mapbox GL’s built-in clustering, with circle radius scaling dynamically based on zoom. The underlying data comes from a public GitHub repository containing NYC crash records, rendered over a dark map style for contrast.

FFred-Fan

71% match