Here is my version of story map based on Wikipedia.

Prepare the script such as these:

<div id="map" style="width: 100%; height: 480px;"></div>

<script>
var storymap_data = "/assets/datasets/wiki_storymap.json";

var storymap_options = {};

var storymap = new VCO.StoryMap('map', storymap_data, storymap_options);
window.onresize = function(event) {
    storymap.updateDisplay();
}
</script>

and this will create an output such as this:

From GeoJSON, straight out of QGIS

The same plugin can build a story straight from a GeoJSON layer — the kind you’d draw in QGIS and export. No hand-written JSON, no separate script block; just point the tag at the file:

{% storymap geojson="/assets/datasets/borneo_kolomee_trail.geojson" height="520px" %}

Here’s a (thoroughly fictional) foodie expedition across Borneo to prove it — note that this is a second map on the same page, and the plugin still only loads the StoryMap assets once:

lungkui.js — the same story on MapLibre GL

lungkui.js is my own no-build, single-file scrollytelling library built on MapLibre GL JS. The {% lungkui %} tag reads the very same GeoJSON and renders it as a vector map story with arrow / keyboard / mouse-wheel navigation, a “Map Overview” locator inset, and a “Back to Beginning” control:

{% lungkui geojson="/assets/datasets/borneo_kolomee_trail.geojson" height="600px" mode="deck" %}