Skip to content

Custom Style Map

This guide shows you how to render an interactive map using a custom map style.

The map style used in this example was created and saved in the Create a Map Style guide.

The finished example will look like this:

See the example fullscreen

When to use

  • To render a map with certain attributes, such as topography or night colors.

What is needed

  • Magic Lane API key token

  • Web server (an example is provided)

  • Map style file saved from the online Map Studio

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. In this project we use a local web server.

How it works

Before the map style is applied:

The Hello Map example is shown above, but using a different center coordinate.

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
1// Set a map style you created in MagicLane Map Studio,
2// and then downloaded into the same directory where this example is
3var defaultAppScreen = gem.core.App.initAppScreen(
4{
5     container: "canvasDiv",
6     center: [  43.643, 9.066,  1000000], // latitude , longitude, altitude
7     style: "./myCustom.style"
8});

 1<html>
 2  <head>
 3    <meta charset="utf-8" />
 4    <title>Hello Map Style 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="jsHelloMapBasicStyle.js"></script>
14  </body>
15</html>

Files

The finished example consists of the project directory containing 3 files:

  • JavaScript code (.js file extension)

  • HTML code (.html file extension)

  • Map style (.style file extension)

To run the example, the HTML file is loaded in a browser.

Source code for this example:

Custom Map Style
HTML file
JavaScript file

right-click on the links and select Save As.

JavaScript Examples

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