Vietmap GL Leaflet

This is a binding from Vietmap GL JS to the familiar Leaflet API. It is based on maplibre-gl-leaflet, which was originally developed for Mapbox (https://github.com/mapbox/mapbox-gl-leaflet) and was migrated to MapLibre after Mapbox changed its license.

Code example

You need a Vietmap API key to load the Vietmap basemap styles. Get one from the Vietmap Maps API portal, then replace YOUR_API_KEY below.

var VIETMAP_API_KEY = 'YOUR_API_KEY';

var map = L.map("map", {
    maxBounds: [[180, -Infinity], [-180, Infinity]], // restrict bounds to avoid max latitude issues with Vietmap GL
    maxBoundsViscosity: 1, // make the max bounds "solid" so users cannot pan past them
    minZoom: 1 // prevent sync issues at zoom 0
  }).setView([10.762622, 106.660172], 13); // Ho Chi Minh City

L.marker([10.762622, 106.660172])
  .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
  .addTo(map)
  .openPopup();

var gl = L.vietmapGL({
  // Available styles: tm (default), lm (light), dm (dark)
  style: 'https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=' + VIETMAP_API_KEY,
}).addTo(map);

Once you have created the leaflet layer, the Vietmap GL JS map object can be accessed using

gl.getVietmapMap()....
// add a source to the Vietmap GL layer
gl.getVietmapMap().addSource({...})

Live examples

Basic example

Cluster example

Map events example

Code for these examples is hosted in the examples folder

Installation

Add a script tag referencing vietmap-gl-leaflet after adding leaflet and @vietmap/vietmap-gl-js in your website:

<!-- Leaflet -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- Vietmap GL -->
<link
  href="https://unpkg.com/@vietmap/[email protected]/dist/vietmap-gl.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/@vietmap/[email protected]/dist/vietmap-gl.js"></script>

<script src="https://unpkg.com/@vietmap/vietmap-gl-leaflet/leaflet-vietmap-gl.js"></script>

Motivation

This project makes it possible to easily add a Vietmap GL JS layer in your Leaflet map. When using vietmap-gl-leaflet, you won't be able to use some of the Vietmap GL JS features. Here are the main differences between a "pure" Vietmap GL JS map and a Leaflet map using vietmap-gl-leaflet:

• No rotation / bearing / pitch support
• Slower performances: When using vietmap-gl-leaflet, Vietmap GL JS is set as not interactive. Leaflet receives the touch/mouse events and updates the Vietmap GL JS map behind the scenes. Because Vietmap GL JS doesn't redraw as fast as Leaflet, the map can seem slower.
• Vietmap GL JS restricts the maximum latitude of the map in a stricter way then Leaflet. In order to maximize compatibility it it is recommended to set a maxBounds: [[180, -Infinity], [-180, Infinity]] and maxBoundsViscosity: 1 on your Leaflet Map to prevent users from panning past the minimum and maximum latitude supported by Vietmap GL JS.
• Setting minZoom: 1 is also recommended to reduce some issues with the map syncing at zoom level 0.

On the bright side, the vietmap-gl-leaflet binding will allow you to use all the leaflet features and plugins.

If you only need the Vietmap GL JS features (adding a map with a style, adding a GeoJSON, etc.), you are probably better off using it directly.

API Reference

API Reference

Bug Reports & Feature Requests

Please use the issue tracker to report any bugs or file feature requests.

License

ISC © Vietmap © MapLibre © Mapbox