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.
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.
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 .
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 inlayers.geojsonare drawn, and their colors. Layer ids here matchconfig.js.layers.geojson– the feature shapes used in the story map.index.html– page layout, scroll behavior, and the hillshade layer.