Skip to main content
GuidesAPI ReferenceExamples

Custom Style Map

Estimated reading time: 3 minutes

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

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

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.

How it works​

Before the map style is applied:

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

 // Start by setting your token from https://developer.magiclane.com/api/projects
 gem.core.App.token="your_API_key_token";

The first step in JavaScript is to set your API key token gem.core.App.token

 // Set a map style you created in MagicLane Map Studio,
 // and then downloaded into the same directory where this example is
 var defaultAppScreen = gem.core.App.initAppScreen(
 {
     container: "canvasDiv",
     center: [  43.643, 9.066,  1000000], // latitude , longitude, altitude
     style: "./myCustom.style"
 });

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:

Right-click on the links and select Save As.

See Hello Map for this example with the default map style.

JavaScript Examples​

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