Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // add your points
- var points = [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [0, 0]
- },
- "properties": {}
- },
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [10, -10]
- },
- "properties": {}
- },
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [50, 50]
- },
- "properties": {}
- }
- ]
- // add a variable for keeping track of points
- var y = 0;
- // Start drawing the polyline.
- add();
- function add() {
- // add a point on the line for the new marker
- polyline.addLatLng(
- L.latLng(points[y].geometry.coordinates[1],
- points[y].geometry.coordinates[0])
- );
- // Pan the map along with where the line is being added.
- map.setView(points[y].geometry.coordinates, 3);
- // Continue to draw and pan the map by calling `add()`
- // until `y` reaches the number of points
- if (++y < points.length) window.setTimeout(add, 1000);
- }
- <!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>
Add Comment
Please, Sign In to add comment