Overview

Overview

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

VietMap GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and VietMap styles. It is part of the VietMap GL ecosystem.

Quickstart

Include the JavaScript and CSS files in the of your HTML file.

<script src='https://maps.vietmap.vn/sdk/vietmap-gl/1.15.3/vietmap-gl.js'></script>
<link href='https://maps.vietmap.vn/sdk/vietmap-gl/1.15.3/vietmap-gl.css' rel='stylesheet' />

Include the following code in the of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new vietmapgl.Map({
container: 'map',
style: 'https://maps.vietmap.vn/mt/tm/style.json?apikey="your-apikey"', // stylesheet location
center: [10, 106], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>

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. - Properties and options. This section describes VietMap GL JS's global properties and options that you might want to access while initializing your map or accessing information about its status. - Markers and controls. This section describes the user interface elements that you can add to your map. The items in this section exist outside of the map's canvas element. - Geography and geometry. This section includes general utilities and types that relate to working with and manipulating geographic information or geometries. User interaction handlers. The items in this section relate to the ways in which the map responds to user input. - Sources. This section describes the source types VietMap GL JS can handle besides the ones described in the VietMap Style Specification. - Events. This section describes the different types of events that VietMap GL JS can raise.

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.

In the examples, we use vector tiles from MapTiler. Get your own API key if you want to use MapTiler data in your project.

CSP Directives

As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a Content Security Policy (CSP) to specify security policies for your website. If you do, VietMap GL JS requires the following CSP directives:

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

For strict CSP environments without worker-src blob: ; child-src blob: enabled, there's a separate VietMap GL JS bundle (mapbox-gl-csp.js and mapbox-gl-csp-worker.js) which requires setting the path to the worker manually:

<script src='https://maps.vietmap.vn/sdk/vietmap-gl/1.15.3/vietmap-gl-csp.js'></script>
<script>
mapboxgl.workerUrl = "https://maps.vietmap.vn/sdk/vietmap-gl/1.15.3/vietmap-gl-csp-worker.js";
...
</script>

If you use the sandbox directive, and your access token is restricted to certain URLs, the allow-same-origin value is required. This allows requests to have a Referer header that is not null. See the section on Referrer Policies for further information.

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

VietMap CSS

The CSS referenced in the Quickstart is used to style DOM elements created by VietMap code. Without the CSS, elements like Popups and Markers won't work. Including it with a in the head of the document via the UNPKG CDN is the simplest and easiest way to provide the CSS, but it is also bundled in the VietMap module, meaning that if you have a bundler that can handle CSS, you can import the CSS from VietMap-gl/dist/VietMap-gl.css. Note too that if the CSS isn't available by the first render, as soon as the CSS is provided, the DOM elements that depend on this CSS should recover.