Route¶

This complete example displays an interactive map, embedded inside an HTML element on a webpage and uses route controls with defining a departure and a destination point to calculate the route, draw it and zoom to it.

The route labels display information about the distance, estimated travel time, traffic delays and if there are tolls along the route. The labels are interactive so a different active route can be selected.

Overview¶

A desired route is defined using at least a given starting point and a given destination, both specified using (longitude, latitude) coordinate pairs. Optionally, additional waypoints can be added between the starting and destination points, to more precisely determine the desired resulting route.

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.

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¶

JavaScript
1// Start by setting your token from https://developer.magiclane.com/api/projects
2gem.core.App.token="your_API_key_token";
The first step in JavaScript is to set your API key token gem.core.App.token, which you can get at the Magic Lane website, see the Getting Started tutorial.

You only need to type your email address and create a new password.
 1var defaultAppScreen = gem.core.App.initAppScreen({
 2  container: "canvasDiv",
 3  center: [48.8612, 2.333, 7000000], // latitude , longitude, altitude
 4});
 5var resultCb = function (routeResult) {
 6  // do something when route finishes calculating
 7}
 8var defaultRoute = new gem.control.RouteControl({
 9  waypoints: [{
10    latitude: 37.7749,
11    longitude: -122.4194,
12    altitude: 0,
13    bearing: 0.0
14  }, {
15    latitude: 38.5816,
16    longitude: -121.4944,
17    altitude: 0,
18    bearing: 0.0
19  }],
20  preferences: {
21    buildTerrainProfile: false,
22    transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Car,
23    avoidTraffic: true
24  },
25  resultCallback: resultCb
26});
27
28defaultAppScreen.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.

The callback function which is called when the requested route computation completes can be defined using resultCallback.
HTML
 1<html>
 2  <head>
 3    <meta charset="utf-8" />
 4    <title>Route Example - MagicLane Maps SDK for JavaScript</title>
 5    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
 6  </head>
 7
 8  <body>
 9    <div id="canvasDiv" style="width: 100%; height: 100%; position: absolute;"></div>
10
11    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
12    <script type="text/javascript" src="token.js"></script>
13    <script type="text/javascript" src="jsHelloRoute.js"></script>
14  </body>
15</html>
The canvasDiv 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.

Source code for this example:

HTML and JavaScript

right-click on the links and select Save As.

JavaScript Examples¶

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