Skip to content

Fly to a Destination

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

When to use

  • A flight animation is desired from the current position to a desired destination (instead of jumping to the destination instantly)

What is needed

  • Magic Lane API key token

Setup

Get your Magic Lane API key token: if you do not have a token, see the Getting Started guide.

Map & Fly

A desired destination is defined using a longitude, latitude coordinate pair in degrees, as well as a desired camera altitude at the destination, in meters. The flight duration is specified in milliseconds.

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    // Desired destination - Paris in this case
 7    var coordinates = { latitude: 48.8612, longitude: 2.333, altitude: 10000, bearing: 0 };
 8    var msecFlightDuration = 3000;
 9
10    // When the button with the "fly" id in the HTML document is clicked, fly!
11    document.getElementById('fly').addEventListener('click', function () {
12        defaultView.centerOnCoordinates(coordinates, msecFlightDuration);
13    });
14});
15
16// Initializes the app
17gem.core.App.initApp();

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8" />
 5    <title>Fly to a Destination - 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: #004040;
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</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="jsFly.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

More

To add functionality to this project, and fly to multiple destinations, continue with the Fly to Multiple Destinations guide.

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