JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
<span>scroll to follow a path</span>
<div id='map'>
</div>
<div id="cover">
  <div id="scroll">
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 100%;
}

#cover {
  position: absolute;
  top: 20px;
  bottom: 0px;
  width: 100%;
  overflow: auto;
}

#scroll {
  position: relative;
  height: 1000%;
  width: 100%;
  overflow: auto;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';

var startCoord = [-122, 48];
var endCoord = [8.22, 46.81];
var start = turf.point(startCoord);
var end = turf.point(endCoord);

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v9',
  center: startCoord,
  zoom: 3
});

var gc = turf.greatCircle(start, end, {
  'name': 'Seattle to DC'
}, 100);
var pl = turf.explode(gc);
var co = document.getElementById("cover");
var rect = co.getBoundingClientRect();
var pos = 0;
map.on('load', function() {
  // thomas, je sais, il manque les comments. C'est un proto.
  co.onscroll = function() {

    pos = Math.round((co.scrollTop / rect.height) * 100);
    turf.geomEach(pl, function(geom, i, prop) {
      if (i == pos) {
        map.jumpTo({
          center: geom.coordinates
        })
      }
    })

  };


});