Skip to content

Hello Map

This complete example displays a movable and zoomable map, embedded inside an html element on a webpage.

Overview

The interactive map is centered on a desired initial location which is defined as a point using a (longitude, latitude) coordinate pair with altitude in meters.
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

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.
1let defaultAppScreen = gem.core.App.initAppScreen(
2     {
3             container: "canvasDiv",
4             center: [48.8612, 2.333, 1000]
5     }
6);

 1<html>
 2  <head>
 3    <meta charset="utf-8" />
 4    <title>Hello Map 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    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
11    <script type="text/javascript" src="token.js"></script>
12    <script type="text/javascript" src="jsHelloMapBasic.js"></script>
13  </body>
14</html>
The canvas is the drawing area where the map is rendered. The canvas is configured to fill the browser window.
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