Skip to content

Fly to Multiple Destinations

This guide shows you how to fly to a destination specified by longitude, latitude and altitude.

The finished example will look like this:

See the example fullscreen

Setup

This guide is the continuation of the Fly to a Destination guide.

Map & Fly

Multiple desired destinations are defined using a longitude, latitude coordinate pair in degrees, as well as a desired camera altitude at the destination, in meters, for each one. The flight duration is specified in milliseconds.

One of the destinations is selected at random each time the Fly button is clicked.

The map supports pan and zoom, and is fully 3D, so holding down the shift key and panning will simultaneously rotate and tilt the map.

How it works

1// Start by setting your token from https://developer.magiclane.com/api/projects
2gem.core.App.token="your_API_key_token";
 1// The main function
 2gem.core.App.registerInitialCallFunction(function () {
 3    // View of the map
 4    var defaultView = gem.core.App.getDefaultScreen().getDefaultMapView();
 5
 6    // Several destinations
 7    var amsterdam = { latitude: 52.3678, longitude: 4.8916, altitude: 30000, bearing: 0 };
 8    var athens = { latitude: 37.9797, longitude: 23.7169, altitude: 30000, bearing: 0 };
 9    var bay_area = { latitude: 37.5201, longitude: -122.2552, altitude: 90000, bearing: 0 };
10    var berlin = { latitude: 52.4957, longitude: 13.3891, altitude: 30000, bearing: 0 };
11    var buenos_aires = { latitude: -34.5912, longitude: -58.4067, altitude: 30000, bearing: 0 };
12    var cairo = { latitude: 29.9660, longitude: 31.2235, altitude: 30000, bearing: 0 };
13    var delhi = { latitude: 28.6054, longitude: 77.2295, altitude: 30000, bearing: 0 };
14    var lima = { latitude: -12.0692, longitude: -77.0337, altitude: 30000, bearing: 0 };
15    var london = { latitude: 51.5076, longitude: -0.1014, altitude: 30000, bearing: 0 };
16    var madrid = { latitude: 40.4240, longitude: -3.6963, altitude: 30000, bearing: 0 };
17    var oslo = { latitude: 59.9399, longitude: 10.6346, altitude: 30000, bearing: 0 };
18    var paris = { latitude: 48.8612, longitude: 2.333, altitude: 30000, bearing: 0 };
19    var rio_de_janeiro = { latitude: -22.9156, longitude: -43.1929, altitude: 30000, bearing: 0 };
20    var san_diego = { latitude: 32.7161, longitude: -117.1612, altitude: 30000, bearing: 0 };
21    var seattle = { latitude: 47.6394, longitude: -122.2608, altitude: 30000, bearing: 0 };
22    var seoul = { latitude: 37.5239, longitude: 126.9873, altitude: 30000, bearing: 0 };
23    var shanghai = { latitude: 31.2368, longitude: 121.4704, altitude: 30000, bearing: 0 };
24    var st_petersburg = { latitude: 59.9563, longitude: 30.1602, altitude: 30000, bearing: 0 };
25    var sydney = { latitude: -33.8889, longitude: 151.1482, altitude: 30000, bearing: 0 };
26    var venezia = { latitude: 45.4361, longitude: 12.3325, altitude: 10000, bearing: 0 };
27
28    // When the button with the "fly" id in the HTML document is clicked, fly!
29    document.getElementById('fly').addEventListener('click', function () {
30        // Default selection
31        var coordinates = paris;
32
33        // Randomly select a destination using system time in msec
34        var d = new Date();
35        var msec = d.getTime();
36        var ans = msec % 20;
37
38        if (ans == 0) { coordinates = amsterdam; }
39        else if (ans == 1) { coordinates = athens; }
40        else if (ans == 2) { coordinates = bay_area; }
41        else if (ans == 3) { coordinates = berlin; }
42        else if (ans == 4) { coordinates = buenos_aires; }
43        else if (ans == 5) { coordinates = cairo; }
44        else if (ans == 6) { coordinates = delhi; }
45        else if (ans == 7) { coordinates = lima; }
46        else if (ans == 8) { coordinates = london; }
47        else if (ans == 9) { coordinates = madrid; }
48        else if (ans == 10) { coordinates = oslo; }
49        else if (ans == 11) { coordinates = paris; }
50        else if (ans == 12) { coordinates = rio_de_janeiro; }
51        else if (ans == 13) { coordinates = san_diego; }
52        else if (ans == 14) { coordinates = seattle; }
53        else if (ans == 15) { coordinates = seoul; }
54        else if (ans == 16) { coordinates = shanghai; }
55        else if (ans == 17) { coordinates = st_petersburg; }
56        else if (ans == 18) { coordinates = sydney; }
57        else if (ans == 19) { coordinates = venezia; }
58
59        var msecFlightDuration = 3000;
60        // Fly
61        defaultView.centerOnCoordinates(coordinates, msecFlightDuration);
62    });
63});
64
65// Initializes the app
66gem.core.App.initApp();
 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8" />
 5    <title>Fly to Multiple Destinations - MagicLane Maps SDK for JavaScript</title>
 6    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
 7
 8    <style>
 9      #fly {
10        display: block;
11        top: 1%;
12        left: calc(50% - 150px);
13        position: absolute;
14        margin: 0px;
15        width: 300px;
16        height: 60px;
17        border: none;
18        font-size: 16px;
19        text-align: center;
20        color: #fff;
21        background: #0000ff;
22        opacity: 0.5;
23        cursor: pointer;
24      }
25    </style>
26  </head>
27
28  <body>
29    <div id="canvasDiv" style="width: 100%; height: 100%; position: absolute; overflow: hidden">
30      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
31    </div>
32    <button id="fly">Fly Again</button>
33
34    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
35    <script type="text/javascript" src="token.js"></script>
36    <script type="text/javascript" src="jsFlyMulti.js"></script>
37  </body>
38</html>
The style block contains the position, size, color and transparency of the Fly button.
The canvas is the drawing area where the map is rendered. The canvas is configured to fill the browser window.
Note that the div elements must be defined before loading the JavaScript source.
At the bottom, gemapi.js, the Maps SDK for JavaScript is loaded.
Next, the JavaScript source of this example is loaded.
Source code at this stage of the project: javascript and html

Files

The finished example consists of the project directory containing these files:

  • JavaScript code (.js file extension)

  • HTML code (.html file extension)

To run the example, the HTML file is loaded in a browser.

Source code for this example:

JavaScript
HTML

right-click on the links and select Save As.

JavaScript Examples

Maps SDK for JavaScript Examples can be downloaded or cloned with Git