Mapbox 1.X Reference Examples

100%

Mapbox 1.X Reference Examples

✓ Published0🌍 Public

Last edited Dec 16, 2020

Created on Dec 16, 2020

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.

AI-generated description

This Gist contains code snippets extracted from official Mapbox-GL-JS examples at version 1.12.0.

https://web.archive.org/web/20200924081502/https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/

Similar vizzes

Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532

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

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

67% match

Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile

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

66% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

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

66% match

Loading thumbnail…

Klokantech Basic Preview

This example demonstrates an interactive map of geographic regions, combining OpenMapTiles vector data with a custom local vector source for King County census block groups. It uses Mapbox GL JS to render a full-screen map with a Klokantech Basic style, featuring filled polygons for land cover, water, parks, and agricultural areas, each styled with distinct colors and opacity. The map loads a `klokantech-basic.json` style, which defines layers for residential, grass, wood, and other land-use categories, and overlays the local census data. Navigation controls and URL hash syncing are enabled for user interaction, with styling driven by the Mapbox style specification.

FFloydBull

66% match