Draw a linear animated line between two markers in MapBox

I have seen few examples of animated line on mapbox but I haven't found any that creates a linear line between two points. I am able to create markers on the map and also to draw a line between these markers. But, I want to create that line slowly from origin(start) to destination(end). here is the code that draw line between two coordinates. I just want to make it slowly(animatedly) and then repeat that animation.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a line</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    #route {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken =
  "pk.eyJ1IjoiaHllb25namlua2ltIiwiYSI6ImNpZXh4dXp5eDA2YjFzaGtyOGR2dnBza2oifQ.a5K673tSr0cOcYoX1rpPhg";

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-122.486052, 37.830348],
    zoom: 5
});

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

    map.addLayer({
        "id": "route",
        "type": "line",

        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-122.414, 37.776],
                        [-77.032, 38.913]
                    ]
                }
            }
        }
    });

});
</script>

</body>
</html>

Here is a complete code for calculating the points(Lat, Long) between source and destination and then creating an animation between these two points.

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Animate a line</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

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

    </style>
  </head>

  <body>

    <div id='map'></div>
    <script>
      mapboxgl.accessToken = 'pk.eyJ1IjoiYWhtZWRraGFuMTAzOSIsImEiOiJjam5iZDgwejYwMnlpM3FyNzJvMDZhZHdoIn0.pcOWSRI2xzY_oMX0mVsLjg';
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        center: [0.11256, 52.201733],
        zoom: 15
      });

      // Create a GeoJSON source with an empty lineString.
      var geojson = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": []
          }
        }]
      };

      var startPoint = [0.108266, 52.202758];
      var endPoint = [0.11556, 52.201733];

      var framesPerSecond = 20;
      var initialOpacity = 1
      var opacity = initialOpacity;
      var initialRadius = 4;
      var radius = initialRadius;
      var maxRadius = 15;

      var speedFactor = 100 // number of frames per longitude degree
      var animation; // to store and cancel the animation

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

        // Point 1
        map.addSource('point1', {
          "type": "geojson",
          "data": {
            "type": "Point",
            "coordinates": [
              startPoint[0], startPoint[1]
            ]
          }
        });
        map.addLayer({
          "id": "circle1",
          "source": "point1",
          "type": "circle",
          "paint": {
            "circle-radius": initialRadius,
            "circle-radius-transition": {
              duration: 0
            },
            "circle-opacity-transition": {
              duration: 0
            },
            "circle-color": "#007cbf"
          }
        });
        map.addLayer({
          "id": "point1",
          "source": "point1",
          "type": "circle",
          "paint": {
            "circle-radius": initialRadius,
            "circle-color": "#007cbf"
          }
        });

        // Point 2
        map.addSource('point2', {
          "type": "geojson",
          "data": {
            "type": "Point",
            "coordinates": [
              endPoint[0], endPoint[1]
            ]
          }
        });
        map.addLayer({
          "id": "circle2",
          "source": "point2",
          "type": "circle",
          "paint": {
            "circle-radius": initialRadius,
            "circle-radius-transition": {
              duration: 0
            },
            "circle-opacity-transition": {
              duration: 0
            },
            "circle-color": "#007cbf"
          }
        });
        map.addLayer({
          "id": "point2",
          "source": "point2",
          "type": "circle",
          "paint": {
            "circle-radius": initialRadius,
            "circle-color": "#007cbf"
          }
        });

        //Line
        map.addLayer({
          'id': 'line-animation',
          'type': 'line',
          'source': {
            'type': 'geojson',
            'data': geojson
          },
          'layout': {
            'line-cap': 'round',
            'line-join': 'round'
          },
          'paint': {
            'line-color': '#ffffff',
            'line-width': 2
          }
        });

        var diffX = endPoint[0] - startPoint[0];
        var diffY = endPoint[1] - startPoint[1];

        var sfX = diffX / speedFactor;
        var sfY = diffY / speedFactor;

        var i = 0;
        var j = 0;

        var lineCoordinates = [];

        while (i < diffX || Math.abs(j) < Math.abs(diffY)) {
          lineCoordinates.push([startPoint[0] + i, startPoint[1] + j]);

          if (i < diffX) {
            i += sfX;
          }

          if (Math.abs(j) < Math.abs(diffY)) {
            j += sfY;
          }
        }

        console.log(lineCoordinates);

        var animationCounter = 0;

        function animateLine() {
          if (animationCounter < lineCoordinates.length) {
            geojson.features[0].geometry.coordinates.push(lineCoordinates[animationCounter]);
            map.getSource('line-animation').setData(geojson);

            requestAnimationFrame(animateLine);
            animationCounter++;
          } else {
            var coord = geojson.features[0].geometry.coordinates;
            coord.shift();
            console.log(coord);

            if (coord.length > 0) {
              geojson.features[0].geometry.coordinates = coord;
              map.getSource('line-animation').setData(geojson);

              //-------------- Point2 Animation End ---------------
              requestAnimationFrame(animateLine);
            }
          }

        }

        animateLine();


      });

    </script>

  </body>

</html>

Recommended topics

Hot tags