Note: this tool is experimental and is not actively supported by Mapbox. For support, please open an issue in this repository.
Mapbox GL Leaflet
var token ="pk.XXXX"; // replace with your Mapbox API Access token. Create a Mapbox account and find it onvar map = L;L;var gl = L;
Note that you can use any vector tile source useable by mapbox-gl. For instance, you can use OSM2VectorTiles with:
var gl = L;
Once you have created the leaflet layer, the mapbox-gl map object can be accessed using
gl...// add a source to the mapbox-gl layergl
Get your Mapbox token
Create a mapbox account, then head to https://www.mapbox.com/studio/ and copy your access token that was automatically created for you. The access token should start with "pk.".
Code for these examples is hosted in the examples folder
Add a script tag referencing mapbox-gl-leaflet after adding leaflet and mapbox-gl-js in your website:
<!-- Leaflet --><!-- Mapbox GL -->
You can also use Unpkg as a CDN using:
This project makes it possible to easily add a mapbox-gl-js layer in your Leaflet map. When using mapbox-gl-leaflet, you won't be able to use some of the mapbox-gl-js features. Here are the main differences between a "pure" mapbox-gl-js map and a Leaflet map using mapbox-gl-leaflet:
- No rotation / bearing / pitch support
- Slower performances: When using mapbox-gl-leaflet, mapbox-gl-js is set as not interactive. Leaflet receives the touch/mouse events and updates the mapbox-gl-js map behind the scenes. Because mapbox-gl-js doesn't redraw as fast as Leaflet, the map can seem slower.
On the bright side, the mapbox-gl-leaflet binding will allow you to use all the leaflet features and plugins.
If you only need the mapbox-gl-js features (adding a map with a mapbox-style, adding a GeoJSON, etc.), you are probably better off using it directly.
Bug Reports & Feature Requests
ISC © Mapbox