WebGL

├── .gitignore ├── .travis.yml ├── API.md ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── examples ├── basic.html ├── cluster.html ├── events.html └── overlay.html ├── leaflet-mapbox-gl.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.8" 4 | - "0.10" 5 | before_install: 6 | - npm install -g npm@~1.4.6 7 | -------------------------------------------------------------------------------- /API.md: -------------------------------------------------------------------------------- 1 | ## `L.mapboxGL(options)` 2 | 3 | Create a new Mapbox GL layer in a Leaflet-compatible wrapper. 4 | 5 | _Extends_: `L.Class` 6 | 7 | `options` is an object of options. All options given are passed to a Mapbox GL `Map` object, 8 | so consult [the Mapbox GL .Map documentation](https://www.mapbox.com/mapbox-gl-js/api/#new-mapboxgl-map-options-) 9 | for the full range. 10 | 11 | | Option | Value | Description | 12 | | ---- | ---- | ---- | 13 | | accessToken | string | **Required**: a [Mapbox access token](https://www.mapbox.com/help/define-access-token/) to identify requests for map resources | 14 | | padding | number | [0.15] | Relative padding of the mapbox-gl layer to avoid the background flickering around the edges of the map | 15 | | interactive | boolean | [false] | Wheter or not to register the mouse and keyboard events on the mapbox-gl layer. Turn this on if you intend to use the mapbox-gl layer events. | 16 | 17 | ### `layer.addTo(map)` 18 | 19 | Same behavior as `.addTo` on any Leaflet layer: this adds the layer to a given 20 | map or group. 21 | 22 | ### `layer.getMapboxMap(): mapbox.Map` 23 | 24 | Returns `mapbox-gl.Map` object. 25 | 26 | ### `layer.getContainer(): HTMLDivElement` 27 | 28 | Returns layer's DOM container `div`. 29 | 30 | ### `layer.getCanvas(): HTMLCanvasElement` 31 | 32 | Returns `mapbox-gl.Map` canvas. 33 | 34 | ### `layer.getSize(): L.Point` 35 | 36 | Returns layer size in pixels including padding. 37 | 38 | ### `layer.getBounds(): L.LatLngBounds` 39 | 40 | Returns layer bounds including padding. 41 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](http://keepachangelog.com/) 5 | and this project adheres to [Semantic Versioning](http://semver.org/). 6 | 7 | ## [Unreleased] 8 | 9 | ## [0.0.16] - 2023-06-05 10 | 11 | ### Fixed 12 | - fix jitter during pan in containers defined using percent - #144 :pray: @trygveaa :pray: 13 | - avoid updating layers that have been removed from the map - #155 :pray: @denisones :pray: 14 | 15 | ## [0.0.15] - 2021-05-29 16 | 17 | ### Fixed 18 | - remember GL map when removed and readded to avoid creating a new SKU token - #138 :pray: @vcoppe :pray: 19 | 20 | ## [0.0.14] - 2020-11-24 21 | 22 | ### Fixed 23 | 24 | - fix gl offset issue in low zoom level 25 | 26 | ## [0.0.13] - 2020-08-31 27 | 28 | ### Added 29 | - `.getPaneName()` method 30 | 31 | ### Fixed 32 | - Allow gl tiles to be added to a custom pane defined in options 33 | 34 | ## [0.0.12] - 2020-03-27 35 | 36 | ### Fixed 37 | 38 | - `accessToken` is now optional 39 | 40 | ## [0.0.11] - 2019-11-04 41 | 42 | ### Fixed 43 | 44 | - ensure gl map is added to leaflet TilePane 45 | 46 | ## [0.0.10] - 2019-09-16 47 | 48 | ## Added 49 | 50 | - `.getContainer()`, `.getSize()`, `getBounds()` and `getCanvas()` methods. 51 | 52 | ## Fixed 53 | 54 | - internal code changes to bring it closer to other overlay layers. 55 | 56 | ## [0.0.9] - 2019-09-02 57 | 58 | ## Added 59 | 60 | - Added `interactive` option to make `mapbox-gl` map events handling possible. 61 | - added public accessor to `mapbox-gl` map object 62 | 63 | ## [0.0.8] - 2019-08-07 64 | 65 | ## Added 66 | 67 | - Added a `padding` option to fix the grey backgrougd flickering around the edges of the map while panning/zooming 68 | - bumped the libraries in examples 69 | 70 | ## [0.0.7] - 2019-07-01 71 | 72 | ### Fixed 73 | 74 | - Ensure no blank/gray area is displayed when zooming out. 75 | 76 | ## [0.0.6] - 2019-05-07 77 | 78 | ### Fixed 79 | 80 | - `.git` directory removed from npm tarball. 81 | 82 | ## [0.0.5] - 2019-05-01 83 | 84 | ### Added 85 | 86 | - `leaflet` and `mapbox-gl-js` are now declared as peerDependencies. 87 | 88 | ## [0.0.4] - 2019-02-27 89 | 90 | ### Added 91 | 92 | - UMD wrapper 93 | - support for `pane` in constructor 94 | 95 | ### Fixed 96 | 97 | - webkitTransitionEnd event crash 98 | 99 | ## [0.0.3] - 2017-04-18 100 | 101 | ### Added 102 | 103 | - Improved support for older versions of `mapbox-gl-js` 104 | 105 | ## [0.0.2] - 2017-03-08 106 | 107 | ### Added 108 | 109 | - Introduced support for Leaflet `v1.0.x` 110 | 111 | ## 0.7. - 2016-10-09 112 | 113 | - Compatibility release for Leaflet `v0.7.x` 114 | 115 | [Unreleased]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.16...HEAD 116 | [0.0.16]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.15...v0.0.16 117 | [0.0.15]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.14...v0.0.15 118 | [0.0.14]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.13...v0.0.14 119 | [0.0.13]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.12...v0.0.13 120 | [0.0.12]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.11...v0.0.12 121 | [0.0.11]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.10...v0.0.11 122 | [0.0.10]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.9...v0.0.10 123 | [0.0.9]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.8...v0.0.9 124 | [0.0.8]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.7...v0.0.8 125 | [0.0.7]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.6...v0.0.7 126 | [0.0.6]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.5...v0.0.6 127 | [0.0.5]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.4...v0.0.5 128 | [0.0.4]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.3...v0.0.4 129 | [0.0.3]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.0.2...v0.0.3 130 | [0.0.2]: https://github.com/mapbox/mapbox-gl-leaflet/compare/v0.7...v0.0.2 131 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Release instructions 2 | 3 | 1. bump version number in package.json and package-lock.json manually 4 | 1. Create new CHANGELOG.md entry and update links at bottom of file 5 | 1. commit changes to `master` 6 | 1. `gh-release` (this hydrates the release notes from the CHANGELOG.) 7 | 1. `npm publish` 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014, Mapbox 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Note: this tool is experimental and is not actively supported by Mapbox. For support, please open an issue in this repository.** 2 | 3 | ## Mapbox GL Leaflet 4 | 5 | [![build status](https://secure.travis-ci.org/mapbox/mapbox-gl-leaflet.png)](http://travis-ci.org/mapbox/mapbox-gl-leaflet) 6 | 7 | This is a binding from [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) to the familiar 8 | [Leaflet](http://leafletjs.com/) API. 9 | 10 | ## Code example 11 | ```javascript 12 | // replace with your Mapbox API Access token. Only include a token if you will be using Mapbox tiles. 13 | var token ="pk.XXXX"; 14 | 15 | var map = L.map('map').setView([38.912753, -77.032194], 15); 16 | L.marker([38.912753, -77.032194]) 17 | .bindPopup("Hello Leaflet GL!
Whoa, it works!") 18 | .addTo(map) 19 | .openPopup(); 20 | var gl = L.mapboxGL({ 21 | accessToken: token, 22 | style: 'mapbox://styles/mapbox/bright-v8' 23 | }).addTo(map); 24 | ``` 25 | Note that you can use any vector tile source useable by mapbox-gl. For instance, you can use [OSM2VectorTiles](http://osm2vectortiles.org/) with: 26 | ```javascript 27 | var gl = L.mapboxGL({ 28 | style: 'https://api.maptiler.com/maps/topo/style.json?key=' 29 | }).addTo(map); 30 | ``` 31 | 32 | Once you have created the leaflet layer, the mapbox-gl map object can be accessed using 33 | ```javascript 34 | gl.getMapboxMap().... 35 | // add a source to the mapbox-gl layer 36 | gl.getMapboxMap().addSource({...}) 37 | ``` 38 | 39 | ## Get your Mapbox token 40 | 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.". 41 | 42 | ## Live examples 43 | [Basic example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/basic.html) 44 | 45 | [Cluster example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/cluster.html) 46 | 47 | [Map events example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/events.html) 48 | 49 | Code for these examples is hosted in the [examples folder](https://github.com/mapbox/mapbox-gl-leaflet/tree/master/examples) 50 | 51 | ## Installation 52 | Add a script tag referencing mapbox-gl-leaflet after adding leaflet and mapbox-gl-js in your website: 53 | ```html 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | ``` 64 | You can also use Unpkg as a CDN using: 65 | ```html 66 | 67 | ``` 68 | 69 | ## Motivation 70 | 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. 71 | Here are the main differences between a "pure" mapbox-gl-js map and a Leaflet map using mapbox-gl-leaflet: 72 | - No rotation / bearing / pitch support 73 | - 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. 74 | 75 | On the bright side, the mapbox-gl-leaflet binding will allow you to use all the leaflet features and plugins. 76 | 77 | 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. 78 | 79 | ## API Reference 80 | [API Reference](API.md) 81 | 82 | ## Bug Reports & Feature Requests 83 | Please use the [issue tracker](https://github.com/mapbox/mapbox-gl-leaflet/issues) to report any bugs or file feature requests. 84 | 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. 85 | 86 | ## Licence 87 | ISC © [Mapbox](https://github.com/mapbox) 88 | -------------------------------------------------------------------------------- /examples/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /examples/cluster.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /examples/events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGL 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 | 26 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /examples/overlay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Leaflet debug page 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | 23 |

24 | 25 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /leaflet-mapbox-gl.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | // AMD 4 | define(['leaflet', 'mapbox-gl'], factory); 5 | } else if (typeof exports === 'object') { 6 | // Node, CommonJS-like 7 | module.exports = factory(require('leaflet'), require('mapbox-gl')); 8 | } else { 9 | // Browser globals (root is window) 10 | root.returnExports = factory(window.L, window.mapboxgl); 11 | } 12 | }(this, function (L, mapboxgl) { 13 | L.MapboxGL = L.Layer.extend({ 14 | options: { 15 | updateInterval: 32, 16 | // How much to extend the overlay view (relative to map size) 17 | // e.g. 0.1 would be 10% of map view in each direction 18 | padding: 0.1, 19 | // whether or not to register the mouse and keyboard 20 | // events on the mapbox overlay 21 | interactive: false, 22 | // set the tilepane as the default pane to draw gl tiles 23 | pane: 'tilePane' 24 | }, 25 | 26 | initialize: function (options) { 27 | L.setOptions(this, options); 28 | 29 | if (options.accessToken) { 30 | mapboxgl.accessToken = options.accessToken; 31 | } 32 | 33 | // setup throttling the update event when panning 34 | this._throttledUpdate = L.Util.throttle(this._update, this.options.updateInterval, this); 35 | }, 36 | 37 | onAdd: function (map) { 38 | if (!this._container) { 39 | this._initContainer(); 40 | } 41 | 42 | var paneName = this.getPaneName(); 43 | map.getPane(paneName).appendChild(this._container); 44 | 45 | this._initGL(); 46 | 47 | this._offset = this._map.containerPointToLayerPoint([0, 0]); 48 | 49 | // work around https://github.com/mapbox/mapbox-gl-leaflet/issues/47 50 | if (map.options.zoomAnimation) { 51 | L.DomEvent.on(map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this); 52 | } 53 | 54 | map._addZoomLimit(this); 55 | }, 56 | 57 | onRemove: function (map) { 58 | if (this._map._proxy && this._map.options.zoomAnimation) { 59 | L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this); 60 | } 61 | var paneName = this.getPaneName(); 62 | map.getPane(paneName).removeChild(this._container); 63 | }, 64 | 65 | getEvents: function () { 66 | return { 67 | move: this._throttledUpdate, // sensibly throttle updating while panning 68 | zoomanim: this._animateZoom, // applys the zoom animation to the