D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
TheMapSmith
Full window
Github gist
Neon map flyto
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <!--via https://www.mapbox.com/mapbox-gl-js/example/flyto-options/--> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> #fly { display: block; position: relative; margin: 0px auto; width: 50%; height: 40px; padding: 10px; border: none; border-radius: 3px; font-size: 12px; text-align: center; color: #fff; background: #ee8a65; } </style> <div id='map'></div> <br/> <button onclick='fly();' id='fly'>Fly</button> <script> mapboxgl.accessToken = 'pk.eyJ1IjoidGhlbWFwc21pdGgiLCJhIjoiYTdmMDdiZjYxNzNmNzFiOGVjZDJiYzI5MGQ5N2VlMmQifQ.fUnAp-76Ka0d3v4oMNPhFw'; var start = [-99, 32]; var end = [-97.740, 30.274]; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/themapsmith/5bbc84d7', center: start, zoom: 4 }); var isAtStart = true; function fly() { // depending on whether we're currently at point a or b, aim for // point a or b var target = isAtStart ? end : start; // and now we're at the opposite point isAtStart = !isAtStart; map.flyTo({ // These options control the ending camera position: centered at // the target, at zoom level 9, and north up. center: target, zoom: 13, bearing: 0, // These options control the flight curve, making it move // slowly and zoom out almost completely before starting // to pan. speed: 0.5, // make the flying slow curve: 1, // change the speed at which it zooms out // This can be any easing function: it takes a number between // 0 and 1 and returns another number between 0 and 1. easing: function (t) { return t; } }); } </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js