Skip to main content
SimilarExport ZIP
100%

Mapbox Storytelling

✓ Published0🌍 Public
TThandolwethu Shakes Dlamini
Last edited Nov 4, 2021
Created on Nov 4, 2021
Forked from HTML Starter

This interactive map tells a scrollytelling story about Philadelphia’s bicycle infrastructure. Using the Mapbox GL JS API, a fixed map is paired with scroll-driven chapters that reveal and hide separate layers—such as bike lanes, Indego bike-share stations, and trail networks—by adjusting their paint property opacities. The Scrollama library and Intersection Observer handle the chapter activation, while a JavaScript config file defines the narrative content and camera positions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

HHirosaji
69% match
Loading thumbnail…

Fork of Sample_Leaflet_scrollytelling2

This example demonstrates a scrollytelling interaction where scrolling through text sections triggers corresponding map views in a fixed panel. It uses a scrollable column with content sections and a fixed column containing a Leaflet map, along with hidden alternative fixed content. The JavaScript listens to scroll events on the scrollable column, checks section visibility with `getBoundingClientRect()`, and calls `map.flyTo()` to animate the map to different coordinates and zoom levels for each section. The map itself uses Leaflet with CartoDB Voyager tiles, and the interaction is built with vanilla JavaScript and CSS, without additional frameworks like React.

FFrancesco Di Filippo
67% match
Loading thumbnail…

Mapbox - ScrollyTelling with FreeCamera API

A scrolling narrative climbs Mt. Fuji using a Mapbox map with the FreeCamera API. As the user scrolls, the camera moves along a defined route while the view follows a hiking path drawn as a line layer, with terrain exaggeration and an atmospheric sky. The example combines Mapbox GL JS, D3.js for CSV data loading, and Turf.js to interpolate the camera and target routes.

HHirosaji
66% match
Loading thumbnail…

Health Tech Accelerators

This interactive map-based story uses a scrolling interface to guide viewers through the locations of health tech accelerators. The visualization pairs a CartoDB-powered basemap with an Odyssey.js scroll-driven narrative, where map bounds and sublayer SQL queries update as the user progresses. It shows a sequence of geographic focuses, with text overlays providing context, while the map re-centers and re-filters data for each section. The code leverages the Leaflet and CartoDB libraries, with a custom scroll trigger managing the transitions between stops.

BBenHeubl
66% match
Loading thumbnail…

Story Map D3JS

This example presents a scrollable story map that follows the historical travels of Bošković as a sequence of dated path segments across a geographic region. It shows the journey as a continuous line with distinct daily segments, highlighted by city markers along the route. The visualization is built using D3.js v5.15.0, utilizing the Mercator projection and topological data from JSON files. It renders the map as an SVG and incorporates scroll-driven animation to reveal the narrative of the journey as the user scrolls.

MMarin Govorcin
66% match
Loading thumbnail…

Untitled

This interactive scrollytelling visualization tells the story of a 2017 San Diego Data Visualization meetup, summarizing attendance, device types, and age ranges. As the user scrolls, animated SVG grids and bar charts transition with elastic easing, using D3.js v3 for data joins and transitions, while Waypoints triggers each scene. The data is generated with `d3.range` and random age values, rendered as colored rectangles and text labels.

TThandolwethu Shakes Dlamini
65% match
Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji
65% match
Loading thumbnail…

A scoll application with a map several data sets to load in

This interactive scrollytelling visualization presents “The Cash Race,” a data-driven story that loads multiple datasets into a single scrolling application. It combines a choropleth map of U.S. counties, a bar chart, and a line chart to explore economic and donation-related trends. Built with D3.js, it uses SVG for rendering and animation, employing scales like `d3.time.scale` and `d3.scale.linear`, plus `d3.geo.albersUsa` for the map projection. The data, sourced from a gist by BenHeubl, is parsed and updated as users scroll, with transitions controlling element opacity and position.

BBenHeubl
64% match