Skip to main content
GuidesAPI ReferenceExamples

Fly to a Destination

Estimated reading time: 3 minutes

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

 // Start by setting your token from https://developer.magiclane.com/api/projects
gem.core.App.token="your_API_key_token";
 // The main function
gem.core.App.registerInitialCallFunction(function () {
// View of the map
var defaultView = gem.core.App.getDefaultScreen().getDefaultMapView();

// Desired destination - Paris in this case
var coordinates = { latitude: 48.8612, longitude: 2.333, altitude: 10000, bearing: 0 };
var msecFlightDuration = 3000;

// When the button with the "fly" id in the HTML document is clicked, fly!
document.getElementById('fly').addEventListener('click', function () {
defaultView.centerOnCoordinates(coordinates, msecFlightDuration);
});
});

// Initializes the app
gem.core.App.initApp();

Source code at this stage of the project:

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:

Right-click on the links and select Save As.

JavaScript Examples

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