Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mapbox/mapbox-gl-leaflet
binding from Mapbox GL JS to the Leaflet API
https://github.com/mapbox/mapbox-gl-leaflet
Last synced: 8 days ago
JSON representation
binding from Mapbox GL JS to the Leaflet API
- Host: GitHub
- URL: https://github.com/mapbox/mapbox-gl-leaflet
- Owner: mapbox
- License: isc
- Created: 2014-06-25T19:05:45.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-06-06T04:45:24.000Z (over 1 year ago)
- Last Synced: 2024-10-13T06:05:42.693Z (22 days ago)
- Language: JavaScript
- Homepage:
- Size: 166 KB
- Stars: 522
- Watchers: 131
- Forks: 155
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vector-tiles - mapbox-gl-leaflet - Create Mapbox GL layers in Leaflet (Clients)
README
**Note: this tool is experimental and is not actively supported by Mapbox. For support, please open an issue in this repository.**
## Mapbox GL Leaflet
[](http://travis-ci.org/mapbox/mapbox-gl-leaflet)
This is a binding from [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) to the familiar
[Leaflet](http://leafletjs.com/) API.
## Code example
```javascript
// replace with your Mapbox API Access token. Only include a token if you will be using Mapbox tiles.
var token ="pk.XXXX";
var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
.bindPopup("Hello Leaflet GL!
Whoa, it works!")
.addTo(map)
.openPopup();
var gl = L.mapboxGL({
accessToken: token,
style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);
```
Note that you can use any vector tile source useable by mapbox-gl. For instance, you can use [OSM2VectorTiles](http://osm2vectortiles.org/) with:
```javascript
var gl = L.mapboxGL({
style: 'https://api.maptiler.com/maps/topo/style.json?key='
}).addTo(map);
```
Once you have created the leaflet layer, the mapbox-gl map object can be accessed using
```javascript
gl.getMapboxMap()....
// add a source to the mapbox-gl layer
gl.getMapboxMap().addSource({...})
```
## Get your Mapbox token
Create a mapbox account, then head to [https://www.mapbox.com/studio/](https://www.mapbox.com/studio/) and copy your access token that was automatically created for you. The access token should start with "pk.".
## Live examples
[Basic example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/basic.html)
[Cluster example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/cluster.html)
[Map events example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/events.html)
Code for these examples is hosted in the [examples folder](https://github.com/mapbox/mapbox-gl-leaflet/tree/master/examples)
## Installation
Add a script tag referencing mapbox-gl-leaflet after adding leaflet and mapbox-gl-js in your website:
```html
```
You can also use Unpkg as a CDN using:
```html
```
## Motivation
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.](https://www.mapbox.com/mapbox-gl-js/examples/)), you are probably better off using it directly.
## API Reference
[API Reference](API.md)
## Bug Reports & Feature Requests
Please use the [issue tracker](https://github.com/mapbox/mapbox-gl-leaflet/issues) to report any bugs or file feature requests.
You can fork this [jsfiddle template](https://jsfiddle.net/fnicollet/9w9er53v/) to reproduce a bug, then share the URL of your fork in the GitHub issue.
## Licence
ISC © [Mapbox](https://github.com/mapbox)