daily pastebin goal
36%
SHARE
TWEET

Untitled

a guest Oct 23rd, 2018 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='utf-8' />
  5.     <title>Animate a line</title>
  6.     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  7.     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
  8.     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
  9.     <style>
  10.         body { margin:0; padding:0; }
  11.         #map { position:absolute; top:0; bottom:0; width:100%; }
  12.     #route {
  13.   stroke-dasharray: 1000;
  14.   stroke-dashoffset: 1000;
  15.   animation: dash 1s linear alternate infinite;
  16. }
  17.  
  18. @keyframes dash {
  19.   from {
  20.     stroke-dashoffset: 1000;
  21.   }
  22.   to {
  23.     stroke-dashoffset: 0;
  24.   }
  25. }
  26.     </style>
  27. </head>
  28. <body>
  29.  
  30. <div id='map'></div>
  31. <script>
  32. mapboxgl.accessToken =
  33.   "pk.eyJ1IjoiaHllb25namlua2ltIiwiYSI6ImNpZXh4dXp5eDA2YjFzaGtyOGR2dnBza2oifQ.a5K673tSr0cOcYoX1rpPhg";
  34.  
  35. var map = new mapboxgl.Map({
  36.     container: 'map',
  37.     style: 'mapbox://styles/mapbox/streets-v9',
  38.     center: [-122.486052, 37.830348],
  39.     zoom: 5
  40. });
  41.  
  42. map.on('load', function () {
  43.  
  44.     map.addLayer({
  45.         "id": "route",
  46.         "type": "line",
  47.  
  48.         "source": {
  49.             "type": "geojson",
  50.             "data": {
  51.                 "type": "Feature",
  52.                 "properties": {},
  53.                 "geometry": {
  54.                     "type": "LineString",
  55.                     "coordinates": [
  56.                         [-122.414, 37.776],
  57.                         [-77.032, 38.913]
  58.                     ]
  59.                 }
  60.             }
  61.         }
  62.     });
  63.  
  64. });
  65. </script>
  66.  
  67. </body>
  68. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top