D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
Mapbox GL JS Easing (cribbed from @jfire's example)
<html> <head> <meta charset='utf-8' /> <title>Mapbox GL JS Easing</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.8.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css' rel='stylesheet' /> <link href='https://www.mapbox.com/base/latest/base.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> <a class='button hidden pin-topleft' onclick='map.collisionDebug=!map.collisionDebug'>Toggle collision boxes</a> <a class='button pin-topright margin1 col1 icon adjust-stroke hidden' onclick='tilter()'>Tilt</a> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'faraday2.0a27e92a.json', //stylesheet location center: [55.68037, 12.58979], // starting position zoom: 12.66, // starting zoom, //hash:true }); function rotator(){ map.easeTo({bearing:60, duration:5000, pitch:55, zoom:14}); window.setTimeout(function(){ map.easeTo({bearing:180, duration:8000, pitch:0, zoom:10}); window.setTimeout(function(){ map.easeTo({bearing:220, duration:7000, pitch:70, zoom:13}); window.setTimeout(function(){ rotator() }, 5000) }, 8000) }, 7000) } map.on('load', function(){ rotator() }) </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js