MapVina GL Leaflet

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

Code example

var map = L.map("map", {
    maxBounds: [[180, -Infinity], [-180, Infinity]], // restrict bounds to avoid max latitude issues with MapVina GL
    maxBoundsViscosity: 1, // make the max bounds "solid" so users cannot pan past them
    minZoom: 1 // prevent sync issues at zoom 0
  }).setView([38.912753, -77.032194], 15);

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

var gl = L.mapvinaGL({
  style: 'https://maps.mapvina.com/styles/v2/streets.json',
}).addTo(map);

Once you have created the leaflet layer, the mapvina-gl map object can be accessed using

gl.getMapvinaMap()....
// add a source to the mapvina-gl layer
gl.getMapvinaMap().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 mapvina-gl-leaflet after adding leaflet and mapvina-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>

<!-- Mapvina GL -->
<link
  href="https://unpkg.com/mapvina-gl@latest/dist/mapvina-gl.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/mapvina-gl@latest/dist/mapvina-gl.js"></script>

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

Motivation

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

• No rotation / bearing / pitch support
• Slower performances: When using mapvina-gl-leaflet, mapvina-gl-js is set as not interactive. Leaflet receives the touch/mouse events and updates the mapvina-gl-js map behind the scenes. Because mapvina-gl-js doesn't redraw as fast as Leaflet, the map can seem slower.
• MapVina 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 MapVina.
• Setting minZoom: 1 is also recommended to reduce some issues with the map syncing at zoom level 0.

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

If you only need the mapvina-gl-js features (adding a map with a mapbox-style, adding a GeoJSON, etc.), you are probably better off using it directly.

API Reference

API Reference