How can I create a storytelling map with CARTO.js?

Overview

A storytelling map combines CARTO.js with Storymap.js to create an interactive narrative experience. You can advance through the story by scrolling down the map’s left side, or by clicking on the arrow that appears at bottom-left. As users progress, the map dynamically adjusts its zoom level and center point to display relevant locations for each narrative section.

Implementation Steps

To build a storytelling map, follow these steps:

1. Create a CARTO.js map with one layer (following standard CARTO.js examples)
2. Define map scenes using <section> HTML elements with data-scene attributes containing location information, coordinates, and descriptive content
3. Build a layers object containing both your CARTO data layer and basemap
4. Create a scenes object with individual scenes (scene1, scene2, etc.) that specify coordinates, zoom levels, layers, and names
5. Initialize Storymap.js with your configuration settings

Storymap.js Initialization

Initialize the Storymap.js object with the following structure:

// initialize storymap
$('#storymap').storymap({
    scenes: scenes,
    layers: layers,
    baselayer: layers.basemap,
    legend: true,
    loader: true,
    flyto: false,
    scalebar: true,
    scrolldown: true,
    progressline: true,
    navwidget: true,
    createMap: function () {
        let map = L.map($(".storymap-map")[0], { zoomControl: false }).setView([30, 0], 3);
        // add basemap
        this.baselayer.layer.addTo(map);
        // add carto layer
        layers.cartoLayer.layer.addTo(map)
        return map;
    }
});

For comprehensive details, consult the Storymap.js library documentation.