D3 Examples - Fly over latitude parallel

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)

xxxxxxxxxx
 
<!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: 2000 * Math.pow(2,map.getZoom()),
        easing: function(t) {
    return t;
  }
    });
​
}
​
function changebaselayer(layer) {
    var url = 'mapbox://styles/mapbox/' + layer + '-v8';
    map.setStyle(url);
}
</script>
​
</body>
</html>
    