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.
Files¶
The finished example consists of the project directory containing these files:
JavaScript code (
.jsfile extension)HTML code (
.htmlfile extension)
To run the example, the HTML file is loaded in a browser.
Source code for this example:
JavaScriptHTML
right-click on the links and select Save As.