No items found.

Live-coding demo: How to use the Mapbox Storytelling Template to create a story map

when
April 30, 2020
 | 
10:00 am
 
(PST)
Type
April 30, 2020
Duration: 
44:22
Stephen Gheysens
Technical Account Manager, Mapbox
No items found.

Register for webinar

About this episode

Maps make data understandable, powerful and memorable. Join this session to learn how to use our “Storytelling Template” to quickly build an interactive experience with high-quality map visuals. This storytelling format — sometimes called “scrollytelling” — lets you include as much context as you want, and define the locations your users look at. It’s a great way to bring stories to life.

You’ll learn how to...

  • Download the template and choose your style
  • Add the places you want to include in your story
  • Add photos and text content to enrich each chapter
  • Publish your project to share it with the world!

Code-along resources

1. Here's the Interactive Storytelling template which links to the code

2. To code along, create a free Mapbox account.

3. Here's the exact data Stephen uses in his demo.

4. Mapbox documentation for the dataset editor and adding a 3D model to your map.

5. Other helpful links mentioned during the program: codepen.io and netlify.com

6. Inspiring examples using this template:
amazonteam.org/maps/guiana-shield
interactive.aljazeera.com/aje/2020/saving-the-nile
map.huttrip.com
arkansasonline.com/2020marathon
washingtonpost.com/graphics/2020/climate-solutions/

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript