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>-->
<input id="range" type=range min=0 max=1000 value=0 step="1">
<div id='map'>
</div>

CSS

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

#range {
  width: 99%;
}

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

JavaScript

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

var range = document.getElementById("range");
var pos = 0;

var data = {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[41.66015625,41.11246878918088],[4.04296875,47.15984001304432],[-2.63671875,40.17887331434696],[2.98828125,26.115985925333536],[10.37109375,18.646245142670608],[19.51171875,15.961329081596647],[24.2578125,-4.565473550710278]]}};


//var startCoord = [-122, 48];
var startCoord = [32.8271484375,9.275622176792112];
var endCoord = [8.22, 46.81];
var start = turf.point(startCoord);
var end = turf.point(endCoord);
console.log(data);
var data = turf.bezier(data);
data = turf.explode(data);
var length = data.features.length;

range.setAttribute("max",length);


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

range.addEventListener("input", function() {
  updatePos(this.value);
})

map.on('load', function() {
  
})

function updatePos(pos) {
  onNextFrame(function() {
    turf.geomEach(data, function(geom, i, prop) {
      if (i == Math.round(pos)){
        range.value = pos;
        map.easeTo({
          center: geom.coordinates
        })
      }
    })
  })
}
 


function onNextFrame(cb) {
  var nf = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  return nf(cb);
}