My first experiment with Mapbox GL is a mock up of what astronauts in the ISS could see out of their window.
This map let's you fly over the latitude parallel of your choice. You can change
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></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.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%; } | |
| #start { | |
| position: absolute; | |
| top: 30%; | |
| left: 50%; | |
| width: 400px; | |
| margin-left: -200px; | |
| padding:10px; | |
| z-index: 1000; | |
| background-color: #fff; | |
| opacity: 0.8; | |
| font-size: 16px; | |
| font-family: sans-serif; | |
| cursor: pointer; | |
| } | |
| #baselayer { | |
| position: absolute; | |
| top: 10; | |
| left: 10; | |
| padding:10px; | |
| z-index: 1000; | |
| background-color: #fff; | |
| opacity: 0.8; | |
| font-size: 16px; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <div id='baselayer'> | |
| <form> | |
| <label><input type="radio" name="mode" value="streets" checked onclick="changebaselayer('satellite-hybrid')"> Hybrid</label><br /> | |
| <label><input type="radio" name="mode" value="streets" onclick="changebaselayer('streets')"> Streets</label><br /> | |
| <label><input type="radio" name="mode" value="satellite" onclick="changebaselayer('satellite')"> Satellite</label> | |
| </form> | |
| </div> | |
| <div id='start' onclick='fly(-180,0)'> | |
| <h4>Start flying</h4> | |
| <p>Click this box to start flying over the equator. To fly over another parallel, drag the map left or right and release the mouse.</p><p>While flying you can zoom in and out and change the viewing direction with the controls in the upper right corner. You can also pan left or right to change the parallel your flying over.</p> | |
| </div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoibWVkaWFmaW4iLCJhIjoiaTQ3REl2cyJ9.7A3ClfiCGzqieni6ui9TCA'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/mapbox/satellite-hybrid-v8', | |
| center: [0,0], // starting position | |
| zoom: 4, // starting zoom | |
| bearing: -90, | |
| pitch: 80 | |
| }); | |
| map.on('moveend', function() { | |
| var long = map.getCenter().lng - 180; | |
| fly(long, map.getCenter().lat); | |
| }) | |
| // Add zoom and4rotation controls to the map. | |
| map.addControl(new mapboxgl.Navigation()); | |
| function fly(lng, lat) { | |
| document.getElementById('start').style.visibility = "hidden"; | |
| map.easeTo({ | |
| center: [lng, lat], | |
| duration: 20000, | |
| easing: function(t) { | |
| return t; | |
| } | |
| }); | |
| } | |
| function changebaselayer(layer) { | |
| var url = 'mapbox://styles/mapbox/' + layer + '-v8'; | |
| map.setStyle(url); | |
| } | |
| </script> | |
| </body> | |
| </html> |
