Skip to main content
GuidesAPI ReferenceExamples

Route Ranges

Estimated reading time: 8 minutes

This complete example displays an interactive map, embedded inside an HTML element on a webpage and uses route controls with various range options for bicycle transport mode to draw isochrones accessible within the range measurement.

What is needed​

  • Magic Lane API key token
  • Web server (an example is provided)

Setup​

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

info

This project needs a web server. If you do not have access to a web server, you can easily install a local web server, see the Installing a Local Web Server guide. In this project we use a local web server.

Isochrones for Route Type Fastest​

This example illustrates bicycle route ranges with option route type fastest. In this case the unit of measurement for the range areas is seconds. On the map you can see the areas that are reachable by bicycle within the specified amounts of time from the selected waypoints, highlighted with different colours.

See the example fullscreen

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. If you want to jump right in, you can download the HTML file and the JavaScript file for this example in the same directory, and then load the HTML file in a web browser to try it out right now!

Or you can continue reading for a detailed explanation of the code.

How it works​

// Start by setting your token from https://developer.magiclane.com/api/projects
if (gem.core.App.token === undefined) gem.core.App.token = '';

let defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    center: [48.8612, 2.333, 7000000] // latitude , longitude, altitude
});

let resultCb = function (routeResult) {
}

let defaultRoute = new gem.control.RouteControl({
    waypoints: [{
        latitude: 41.382991790771484,
        longitude: 2.177398204803467,
        altitude: 0,
        bearing: 0.0
    }, {
        latitude: 41.383941650390625,
        longitude: 2.1604349613189697,
        altitude: 0,
        bearing: 0.0
    }],
    preferences: {
        buildTerrainProfile: false,
        transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Bicycle,
        routeType: gem.routesAndNavigation.ERouteType.ERT_Fastest,
        resultDetails: gem.routesAndNavigation.ERouteResultDetails.ERD_Full,
        routeRanges: {
        rangelist: [0, 60, 120, 240, 360], // measured in seconds for route type fastest
        quality: 50
        }
    },
    resultCallback: resultCb
});
defaultAppScreen.addControl(defaultRoute);

The default view of the map is loaded: gem.core.App.initAppScreen();
Sample departure and destination coordinates are defined for the route using waypoints.
Altitude is in meters, and bearing(heading) is in degrees, where 0 is north, 90 is east, 180 is south and 270 (or -90) is west.
Optionally, additional waypoints could be added between the departure and the destination, so the calculated route passes through those locations.
Other route options are defined using preferences through which we have set the transport mode to bicycle, the route type to fastest and the result details to full.
The route ranges options are specified using routeRanges and for the route type fastest the unit of measurement for the rangeList array items is seconds. The option quality can be adjusted to view higher or lower detailed route areas. The callback function which is called when the requested route computation completes can be defined using resultCallback.

The example is 2 plain text files, one with the HTML code ( .html file extension) and the other with the JavaScript code ( .js file extension). To run the example, the HTML file is loaded in a browser. The .js file should be in the same directory, as it will be loaded automatically.

Isochrones for Route Type Shortest​

This example illustrates bicycle route ranges with option route type shortest. In this case the unit of measurement for the range areas is meters. On the map you can see the areas that are reachable by bicycle within the specified distance in meters from the selected waypoints, highlighted with different colours.

See the example fullscreen

If you want to jump right in, you can download the HTML file and the JavaScript file for this example in the same directory, and then load the HTML file in a web browser to try it out right now!

Or you can continue reading for a detailed explanation of the code.

// Start by setting your token from https://developer.magiclane.com/api/projects
if (gem.core.App.token === undefined) gem.core.App.token = '';

let defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    center: [48.8612, 2.333, 7000000] // latitude , longitude, altitude
});

let resultCb = function (routeResult) {
}

let defaultRoute = new gem.control.RouteControl({
    waypoints: [{
        latitude: 41.382991790771484,
        longitude: 2.177398204803467,
        altitude: 0,
        bearing: 0.0
    }, {
        latitude: 41.383941650390625,
        longitude: 2.1604349613189697,
        altitude: 0,
        bearing: 0.0
    }],
    preferences: {
        buildTerrainProfile: false,
        transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Bicycle,
        routeType: gem.routesAndNavigation.ERouteType.ERT_Shortest,
        resultDetails: gem.routesAndNavigation.ERouteResultDetails.ERD_Full,
        routeRanges: {
        rangelist: [0, 100, 500, 1000, 2000], // measured in meters for route type shortest
        quality: 75
        }
    },
    resultCallback: resultCb
});
defaultAppScreen.addControl(defaultRoute);

Route options are defined using preferences through which we have set the transport mode to bicycle, the route type to shortest and the result details to full.
The route ranges options are specified using routeRanges and for the route type shortest the unit of measurement for the rangeList array items is meters. The option quality can be adjusted to view higher or lower detailed route areas.

Isochrones for Route Type Economic​

This example illustrates bicycle route ranges with option route type economic. In this case the unit of measurement for the range areas is watt-hour. On the map you can see the areas that are reachable by bicycle within the specified energy thresholds from the selected waypoints, highlighted with different colours.

See the example fullscreen

If you want to jump right in, you can download the HTML file and the JavaScript file for this example in the same directory, and then load the HTML file in a web browser to try it out right now!

Or you can continue reading for a detailed explanation of the code.

How it works​

// Start by setting your token from https://developer.magiclane.com/api/projects
if (gem.core.App.token === undefined) gem.core.App.token = '';

let defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    center: [48.8612, 2.333, 7000000], // latitude , longitude, altitude
});

let resultCb = function (routeResult) {
}

let defaultRoute = new gem.control.RouteControl({
    waypoints: [{
        latitude: 41.382991790771484,
        longitude: 2.177398204803467,
        altitude: 0,
        bearing: 0.0
    }, {
        latitude: 41.383941650390625,
        longitude: 2.1604349613189697,
        altitude: 0,
        bearing: 0.0
    }],
    preferences: {
        buildTerrainProfile: false,
        transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Bicycle,
        resultDetails: gem.routesAndNavigation.ERouteResultDetails.ERD_Full,
        routeType: gem.routesAndNavigation.ERouteType.ERT_Economic,
        bikeProfile: gem.routesAndNavigation.EBikeProfile.BP_City,

        eBikeProfile: {
            type: gem.routesAndNavigation.EEBikeType.EBP_PowerOnDemand,
            bikeMass: 15.0,
            bikerMass: 60.0,
            auxConsumptionDay: 0.0,
            auxConsumptionNight: 0.0
        },

        routeRanges: {
            rangelist: [0, 30, 60, 90, 150], // measured in watts per hour for route type economic
            quality: 100
        }
    },
    resultCallback: resultCb
});
defaultAppScreen.addControl(defaultRoute);

Route options are defined using preferences through which we have set the transport mode to bicycle, the bicycle type to city, the route type to economic and the result details to full.
The route ranges options are specified using routeRanges and for the route type economic the unit of measurement for the rangeList array items is watts per hour. The option quality can be adjusted to view higher or lower detailed route areas.
Additional options can be specified for the bike profile through option object eBikeProfile such as type, bikeMass and bikerMass (in kilograms), auxConsumptionDay and auxConsumptionNight (in watts).

Source Code for the Examples​

Right-click on the links and select Save As.

JavaScript Examples​

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