Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fly over latitude parallel

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

  • the baselayer (hybrid, streest of satellite)
  • the parallel you are flying over (pan left or right)
  • the zoom (+ and - in upper right corner)
  • rotation of view (the compass in the upper right corner)
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.