Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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