Route Ranges¶

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.

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.

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¶

JavaScript
 1// Start by setting your token from https://developer.magiclane.com/api/projects
 2if (gem.core.App.token === undefined) gem.core.App.token = '';
 3
 4let defaultAppScreen = gem.core.App.initAppScreen({
 5    container: "map-canvas",
 6    center: [48.8612, 2.333, 7000000] // latitude , longitude, altitude
 7});
 8
 9let resultCb = function (routeResult) {
10}
11
12let defaultRoute = new gem.control.RouteControl({
13    waypoints: [{
14        latitude: 41.382991790771484,
15        longitude: 2.177398204803467,
16        altitude: 0,
17        bearing: 0.0
18    }, {
19        latitude: 41.383941650390625,
20        longitude: 2.1604349613189697,
21        altitude: 0,
22        bearing: 0.0
23    }],
24    preferences: {
25        buildTerrainProfile: false,
26        transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Bicycle,
27        routeType: gem.routesAndNavigation.ERouteType.ERT_Fastest,
28        resultDetails: gem.routesAndNavigation.ERouteResultDetails.ERD_Full,
29        routeRanges: {
30           rangelist: [0, 60, 120, 240, 360], // measured in seconds for route type fastest
31           quality: 50
32        }
33    },
34    resultCallback: resultCb
35});
36defaultAppScreen.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.
HTML
 1<!doctype html>
 2<html lang="en-us">
 3
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>Route Ranges Controls - MagicLane Maps SDK for JavaScript</title>
 8    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 9  </head>
10
11  <body>
12    <div id="map-canvas" style="width:100%; height:100%; position:absolute">
13    </div>
14
15    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
16    <script type="text/javascript" src="token.js"></script>
17    <script type="text/javascript" src="routeRangesControls01.js"></script>
18  </body>
19</html>
The map-canvas divider is the drawing area where the map is rendered. The map canvas is configured to fill the entire page.

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.

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 project directory, and then load the HTML file in a web browser to try it out right now!

Or you can continue reading for an explanation of the code.

How it works¶

JavaScript

// 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.

HTML

<!doctype html>
<html lang="en-us">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Route Ranges Controls - MagicLane Maps SDK for JavaScript</title>
    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
  </head>

  <body>
    <div id="map-canvas" style="width:100%; height:100%; position:absolute">
    </div>

    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
    <script type="text/javascript" src="token.js"></script>
    <script type="text/javascript" src="routeRangesControls02.js"></script>
  </body>
</html>

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.

Or you can continue reading for an explanation of the code.

How it works¶

JavaScript

// 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).

HTML

<!doctype html>
<html lang="en-us">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Route Ranges Controls - MagicLane Maps SDK for JavaScript</title>
    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
  </head>

  <body>
    <div id="map-canvas" style="width:100%; height:100%; position:absolute">
    </div>

    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
    <script type="text/javascript" src="token.js"></script>
    <script type="text/javascript" src="routeRangesControls03.js"></script>
  </body>
</html>

Source Code for the Examples¶

Isochrones for route type fastest:
index01.html and routeRangesControls01.js
Isochrones for route type shortest:
index02.html and routeRangesControls02.js
Isochrones for route type economic:
index03.html and routeRangesControls03.js

Right-click on the links and select Save As.

JavaScript Examples¶

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