Skip to content

About

Mapbox storytelling with maps template, upgraded with more configuration options and features.

Resources

Stars

0 stars

Watchers

0 watching

Forks

 
 

Latest commit

 

History

84 Commits

Folders and files

Repository files navigation

Storymap: Ogiek of Chepkitale, Mount Elgon

A scroll-driven storytelling map documenting the dispossession of the ancestral lands of the Ogiek of Mount Elgon, Kenya.

Built with MapLibre GL JS and Scrollama. The basemap is OpenFreeMap Liberty, a free vector style. Hillshade from Mapterhorn is drawn over the land so the mountain relief shows through the story polygons. It sits under the water, roads, and labels. This is separate from use3dTerrain in config.js, which is off and would raise the map into 3D.

Setup

Open the map through a local server. Loading index.html as a file will not show the map or the video.

$ python -m http.server 8080

# Or you can use

$ npx serve .

Then open http://localhost:8080. Stop the server with Ctrl+C.

Editing the story

Change the writing in story.md. Keep the chapters in the same order as config.js.

  • The first heading is the map title. The line under it is the subtitle.
  • The image under the subtitle is the logo.
  • Each chapter is a heading, then the photo, then the caption, then the text.
  • The text under the line of dashes at the end is the footer.
  • Write a link as [Awana Digital](https://awana.digital/).
  • A YouTube link on its own line becomes a video. The link text is the title: [Title](https://www.youtube.com/watch?v=...). A bare URL uses “Watch on YouTube”.

Photos go in images/. Point at them from story.md, for example ![](images/elgon-road.jpg).

Config

  • story.md – title, subtitle, logo, footer, and each chapter's title, photo, caption, and text.
  • config.js – basemap style, and for each chapter the map position and which layers turn on.
  • layers.js – how features in layers.geojson are drawn, and their colors. Layer ids here match config.js.
  • layers.geojson – the feature shapes used in the story map.
  • index.html – page layout, scroll behavior, and the hillshade layer.

About

Mapbox storytelling with maps template, upgraded with more configuration options and features.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages