NMaps GL JS Docs
All docsNMaps GL JS DocsAPI Reference

NMaps GL JS

Current version: v1.6.6

  • Custom map styles
  • Fast vector maps
  • Compatible with other NMaps tools

NMaps GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and NMaps styles.

Quickstart

Include the JavaScript and CSS files in the <head> of your HTML file. The CSS file is required to display the map and make elements like Popups and Markers work.

<script src='https://cdn.ndrive.com/nmapsgl/v1.6.6/nmaps-gl.js'></script>
<link href='https://cdn.ndrive.com/nmapsgl/v1.6.6/nmaps-gl.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
nmapsgl.baseApiUrl = '<your api url>';
nmapsgl.accessToken = '<your access token here>';
var map = new nmapsgl.Map({
container: 'map',
style: 'Streets',
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>

You can see and interact with similar code in these NMaps GL JS examples:

Note

The CSS referenced in the Quickstart is required. If the CSS isn't available by the first render, as soon as the CSS is provided, the DOM elements that depend on the styles should recover.

Including it with a <link> in the head of the document via the NMaps CDN is the simplest and easiest way to provide the CSS, but it is also bundled in the NMaps module, meaning that if you have a bundler that can handle CSS, you can import the CSS from nmaps-gl/dist/nmaps-gl.css.

Reading this documentation

This documentation is divided into several sections:

  • Map. The Map object is the map on your page. It lets you access methods and properties for interacting with the map's style and layers, respond to events, and manipulate the user's perspective with the camera.
  • Drawing on the map. User interface elements that can be added to the map: Marker, Popup, Shapes and Ruler. The items in this section exist outside of the map's canvas element.
  • Interact with the Map. Elements that allow you to interact with the map: Controls, Handlers and Events.
  • Display data. This section describes the Sources and Layers supported by NMaps GL JS, as well as controls for manipulating those layers.
  • Properties. This section describes NMaps GL JS's global properties and options that you might want to access while initializing your map or accessing information about its status.

Each section describes classes or objects as well as their properties, parameters, instance members, and associated events. Many sections also include inline code examples and related resources.

Referrer Policies

If you use a URL-restricted access token, you have to make sure that the browser sends the correct referrer header. This is the default setting. But if you use the Referrer-Policy header on your website, pick a value that still sends a Referer header, like no-referrer-when-downgrade, origin, origin-when-cross-origin, or strict-origin. Specifically, same-origin and no-referrer will never send a referrer header, and thus NMaps API calls won't work.

If you limit the referrer to the origin, make sure that the URL you restrict your access token to doesn't contain path information, because the Origin header doesn't contain a path by definition.