JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl-dev.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css">
<div id="map">

</div>

CSS

body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibW1tYXR0b3MiLCJhIjoiY2lnMDh1czNhMDZ5anRhbHZwbXlxMnBmNSJ9.bJraGjWy-QmhJheR0k9KfA';

var animationStep = 50;
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-122.486052, 37.830348],
    zoom: 15
});
function enableLineAnimation(layerId) {
  var step = 0;
  let dashArraySeq = [
    [0, 4, 3],
    [1, 4, 2],
    [2, 4, 1],
    [3, 4, 0],
    [0, 1, 3, 3],
    [0, 2, 3, 2],
    [0, 3, 3, 1]
  ];
  setInterval(() => {
      step = (step + 1) % dashArraySeq.length;
      map.setPaintProperty(layerId, 'line-dasharray', dashArraySeq[step], {validate: false});
    }, animationStep);
}

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

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                       ...