Map scrollytelling

[danielfdsilva]

One of the components for the Discovery pages (#2) is the map scrollytelling.
Mapbox has a demo for this which illustrates pretty well what we want to accomplish.

There are however some differences at play. We don't want the user to have to configure everything in all chapters. The data should be the same as present throughout the site, and the user should be able to just configure what datasets and layers to use.
This component (like the other ones in discovery pages) should be used in a MDX file.

So, there are a couple of steps a component has to go through:

1. Map setup
   The map has to be setup (initialized with data) so that it can be used. This would mean to add all the layers and information that will be used. Doing this with code is pretty straightforward, but we don’t want the users to be writing code if we can avoid it.
   Given that these maps appear in the context of this application which shows specific datasets we can probably limit (and predict) what the map initial state (and config) would be.

2. Chapter enter
   When a chapter is in view, the map has to do something (zoom, pan, enable layers). We’d need a simple way to give the user power here.
   Maybe something like:

<Chapter
    map={{
      center: [],
      zoom: 1,
      layers: [{
        dataset: 'no2',
        variation: 'diff',
        date: '2020-02-02'
      }]
    }}
  >

The layers property would let the users define what they want shown. By using dataset and variation we tie the data on the map to something that exists in the app, and so we don’t need the user to add layers. This would prevent adding custom layers though.
Here things get tricky. Some layers support date parameters, others gamma values for the color scale. And there could be many more. How do we make this simple and easily documentable?

3. Chapter exit
   When the chapter finished we need to reset the map state for the next chapter, but maybe we can simplify and just revert whatever was done by the previous chapter. For example if on a chapter we set the pitch to 30º, we have to set this back to 0º unless the user specifies another value.

Example usage in the MDX

<MapStory>
  <Chapter props>
    Each chapter would be a box that scrolls over the map
  </Chapter>
  <Chapter>
    The chapter component could even have some props to define how it looks. (besides the map ones)
  </Chapter>
</MapStory>

[danielfdsilva]

Good guide to understand the role position: sticky plays in scrollytelling: https://pudding.cool/process/scrollytelling-sticky/

[danielfdsilva]

This was completed