Scrollytelling map style update

[jbixon13]

I'm building Deck.gl maps that work with scrollama.js to achieve scrollytelling. As a user scrolls through the story, the map will change accordingly. I can currently update the view and fly to a new location on scroll.

Mapbox has recently released a template for accomplishing a lot of these features, and it appears theirs has the ability to toggle visible layers that are part of the map style (think layers in Mapbox Studio, not Deck.gl layers). Is this possible to accomplish within Deck.gl? As in as a scroll event triggers a change, could you change the map style to activate different layers within the map?

https://github.com/mapbox/storytelling

The code I am using to update the view is as follows, if that is of any use:

    script. 
        var scroller = scrollama();

        function handleStepEnter(response) {
            if (response.direction === 'down') {
                console.log(response)

                currentIndex +=1;

                deckgl.setProps({
                    viewState: {
                        longitude: VIEWS[currentIndex].longitude,
                        latitude: VIEWS[currentIndex].latitude,
                        zoom: VIEWS[currentIndex].zoom,
                        pitch: 60,
                        transitionInterpolator: new FlyToInterpolator(),
                        transitionDuration: 4000
                    }
                })
            }

        }

        function handleStepExit(response) {
            if (response.direction === 'up') {
                currentIndex -=1;

                deckgl.setProps({
                    viewState: {
                        longitude: VIEWS[currentIndex].longitude,
                        latitude: VIEWS[currentIndex].latitude,
                        zoom: VIEWS[currentIndex].zoom,
                        pitch: 60,
                        transitionInterpolator: new FlyToInterpolator(),
                        transitionDuration: 4000
                    }
                })
            }
        }

        scroller 
        .setup({
            step: '.transition',
            debug: false,
            offset: 0.4
        })
        .onStepEnter(handleStepEnter)
        .onStepExit(handleStepExit);

[Pessimistress]

You can call deckgl.setProps({layers}) to update the layers:

const MY_LAYERS = [...]; // deck.gl layers

function handleStepEnter() {
  ...
  deckgl.setProps({
    viewState,
    layers: MY_LAYERS.filter(layer => isLayerInStep(layer, currentIndex))
  });
}

[jbixon13]

to my understanding that will update the deck.gl layers (heatmap, h3, etc). The layers I'm referring to are layers within a Mapbox map style (hillshading, buildings, etc). It appears those are modifiable with Mapbox's implementation, ideally that could be done through deck.gl if possible.

[Pessimistress]

While deck.gl can work with mapbox, mapbox is not a dependency. You need to look into mapbox documentation if you want to change base map style and layers.

[jbixon13]

Right I have worked with changing Mapbox's base map layers, my question was more around whether that can be controlled through Deck.gl since Mapbox seems to have the ability to control base map layer visibility through scroll events.

After looking at the example here: https://github.com/mapbox/storytelling it seems it's controlling data layers, not necessarily base map layers (not sure if there's really a distinction). I think something similar could be done based on what you provided using a geoJSON deck layer. Thank you!

[Pessimistress]

Could you write some sample code for the API you have in mind?

[Pessimistress]

Closing for inactivity.