Created
October 17, 2015 01:08
-
-
Save TheMapSmith/197a28fecfb39370d2d9 to your computer and use it in GitHub Desktop.
Neon map flyto
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment