Skip to main content
GuidesAPI ReferenceExamples

Fly to Multiple Destinations

Estimated reading time: 5 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

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​

 // 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();

    // Several destinations
    var amsterdam = { latitude: 52.3678, longitude: 4.8916, altitude: 30000, bearing: 0 };
    var athens = { latitude: 37.9797, longitude: 23.7169, altitude: 30000, bearing: 0 };
    var bay_area = { latitude: 37.5201, longitude: -122.2552, altitude: 90000, bearing: 0 };
    var berlin = { latitude: 52.4957, longitude: 13.3891, altitude: 30000, bearing: 0 };
    var buenos_aires = { latitude: -34.5912, longitude: -58.4067, altitude: 30000, bearing: 0 };
    var cairo = { latitude: 29.9660, longitude: 31.2235, altitude: 30000, bearing: 0 };
    var delhi = { latitude: 28.6054, longitude: 77.2295, altitude: 30000, bearing: 0 };
    var lima = { latitude: -12.0692, longitude: -77.0337, altitude: 30000, bearing: 0 };
    var london = { latitude: 51.5076, longitude: -0.1014, altitude: 30000, bearing: 0 };
    var madrid = { latitude: 40.4240, longitude: -3.6963, altitude: 30000, bearing: 0 };
    var oslo = { latitude: 59.9399, longitude: 10.6346, altitude: 30000, bearing: 0 };
    var paris = { latitude: 48.8612, longitude: 2.333, altitude: 30000, bearing: 0 };
    var rio_de_janeiro = { latitude: -22.9156, longitude: -43.1929, altitude: 30000, bearing: 0 };
    var san_diego = { latitude: 32.7161, longitude: -117.1612, altitude: 30000, bearing: 0 };
    var seattle = { latitude: 47.6394, longitude: -122.2608, altitude: 30000, bearing: 0 };
    var seoul = { latitude: 37.5239, longitude: 126.9873, altitude: 30000, bearing: 0 };
    var shanghai = { latitude: 31.2368, longitude: 121.4704, altitude: 30000, bearing: 0 };
    var st_petersburg = { latitude: 59.9563, longitude: 30.1602, altitude: 30000, bearing: 0 };
    var sydney = { latitude: -33.8889, longitude: 151.1482, altitude: 30000, bearing: 0 };
    var venezia = { latitude: 45.4361, longitude: 12.3325, altitude: 10000, bearing: 0 };

    // When the button with the "fly" id in the HTML document is clicked, fly!
    document.getElementById('fly').addEventListener('click', function () {
        // Default selection
        var coordinates = paris;

        // Randomly select a destination using system time in msec
        var d = new Date();
        var msec = d.getTime();
        var ans = msec % 20;

        if (ans == 0) { coordinates = amsterdam; }
        else if (ans == 1) { coordinates = athens; }
        else if (ans == 2) { coordinates = bay_area; }
        else if (ans == 3) { coordinates = berlin; }
        else if (ans == 4) { coordinates = buenos_aires; }
        else if (ans == 5) { coordinates = cairo; }
        else if (ans == 6) { coordinates = delhi; }
        else if (ans == 7) { coordinates = lima; }
        else if (ans == 8) { coordinates = london; }
        else if (ans == 9) { coordinates = madrid; }
        else if (ans == 10) { coordinates = oslo; }
        else if (ans == 11) { coordinates = paris; }
        else if (ans == 12) { coordinates = rio_de_janeiro; }
        else if (ans == 13) { coordinates = san_diego; }
        else if (ans == 14) { coordinates = seattle; }
        else if (ans == 15) { coordinates = seoul; }
        else if (ans == 16) { coordinates = shanghai; }
        else if (ans == 17) { coordinates = st_petersburg; }
        else if (ans == 18) { coordinates = sydney; }
        else if (ans == 19) { coordinates = venezia; }

        var msecFlightDuration = 3000;
        // Fly
        defaultView.centerOnCoordinates(coordinates, msecFlightDuration);
    });
});

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

Source code for this example:

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.