Scrollytelling map

This is a test of a map component found at this site:

https://docs.mapbox.com/mapbox.js/example/v1.0.0/scroll-driven-navigation/

It seems to work well so here is a WordPress test. The html file is self contained with all data inside the html file. It seems pretty straightforward to use. Insert your own mapbox key, story, map-points and match the id’s of the html elements and you Lat Lng points and that should be it.

So does it work?????

Yes, but one http url copied from my media library needed and extra ‘s’ in front to become secure and for the browser to load the map.

In order to try this at all you need a mapbox token which you can can find under your mapbox user. Then paste that token onto this line which is around line 95 in my code:

L.mapbox.accessToken = '<your access token here>';

Here is a little change in the map around line 169 to make the active text remain until it is a little bit higher on the screen:

    var narrativeHeight = (narrative.offsetHeight - 40);

So th minus forty is the adjustment.

Here is another change to make the inactive text fully transparent, I did not like the semi transparent text elemtns and decided it is better to make them fully transparent. This is in the CSS section around line 30-45 in my code:

.sections {
  background:rgba(255,255,255,0);
  width:240px;
  }
section {
  padding:20px;
  color:rgba(0,0,0,0);
  -webkit-transition:background 500ms, color 500ms;
          transition:background 500ms, color 500ms;
  }

The important thing to note on both these elements to get full transparency is the last parameter for the rgba color rule. On th eoriginal code the value is 0.5 for 50% transparency. Set it to 0 like in the sample code above to get fully transparent inactive text.