https://www.guide-des-landes.com/scripts/leaflet/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 <canvas>
69                zoom: this._pinchZoom, // animate every zoom event for smoother pinch-zooming
70                zoomstart: this._zoomStart, // flag starting a zoom to disable panning
71                zoomend: this._zoomEnd,
72                resize: this._resize
73            };
74        },
75
76        getMapboxMap: function () {
77            return this._glMap;
78        },
79
80        getCanvas: function () {
81            return this._glMap.getCanvas();
82        },
83
84        getSize: function () {
85            return this._map.getSize().multiplyBy(1 + this.options.padding * 2);
86        },
87
88        getBounds: function () {
89            var halfSize = this.getSize().multiplyBy(0.5);
90            var center = this._map.latLngToContainerPoint(this._map.getCenter());
91            return L.latLngBounds(
92                this._map.containerPointToLatLng(center.subtract(halfSize)),
93                this._map.containerPointToLatLng(center.add(halfSize))
94            );
95        },
96
97        getContainer: function () {
98            return this._container;
99        },
100
101        // returns the pane name set in options if it is a valid pane, defaults to tilePane
102        getPaneName: function () {
103            return this._map.getPane(this.options.pane) ? this.options.pane : 'tilePane';
104        },
105
106        _initContainer: function () {
107            var container = this._container = L.DomUtil.create('div', 'leaflet-gl-layer');
108
109            var size = this.getSize();
110            var offset = this._map.getSize().multiplyBy(this.options.padding);
111            container.style.width  = size.x + 'px';
112            container.style.height = size.y + 'px';
113
114            var topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
115
116            L.DomUtil.setPosition(container, topLeft);
117        },
118
119        _initGL: function () {
120            var center = this._map.getCenter();
121
122            var options = L.extend({}, this.options, {
123                container: this._container,
124                center: [center.lng, center.lat],
125                zoom: this._map.getZoom() - 1,
126                attributionControl: false
127            });
128
129            // console.log({options})
130			if (!this._glMap) {
131				this._glMap = new mapboxgl.Map(options);
132				var $this = this;
133				this._glMap.on('sourcedata', function (event) {
134					// console.log('sourcedata', event);
135					// console.log('areTilesLoaded', this.areTilesLoaded());
136					if (this.areTilesLoaded()) {
137						if ($this._events.tileload) {

138							$this._events.tileload.forEach(function (event) {
139								event.fn();
140							})
141						}
142
143					}
144				})
145            } else {
146                this._glMap.setCenter(options.center);
147                this._glMap.setZoom(options.zoom);
148            }
149
150            // allow GL base map to pan beyond min/max latitudes
151            this._glMap.transform.latRange = null;
152            this._transformGL(this._glMap);
153
154            if (this._glMap._canvas.canvas) {
155                // older versions of mapbox-gl surfaced the canvas differently
156                this._glMap._actualCanvas = this._glMap._canvas.canvas;
157            } else {
158                this._glMap._actualCanvas = this._glMap._canvas;
159            }
160
161            // treat child <canvas> element like L.ImageOverlay
162            var canvas = this._glMap._actualCanvas;
163            L.DomUtil.addClass(canvas, 'leaflet-image-layer');
164            L.DomUtil.addClass(canvas, 'leaflet-zoom-animated');
165            if (this.options.interactive) {
166                L.DomUtil.addClass(canvas, 'leaflet-interactive');
167            }
168            if (this.options.className) {
169                L.DomUtil.addClass(canvas, this.options.className);
170            }
171        },
172
173        _update: function (e) {
174            if (!this._map) {
175                return;
176            }
177            // update the offset so we can correct for it later when we zoom
178            this._offset = this._map.containerPointToLayerPoint([0, 0]);
179
180            if (this._zooming) {
181                return;
182            }
183
184            var size = this.getSize(),
185                container = this._container,
186                gl = this._glMap,
187                offset = this._map.getSize().multiplyBy(this.options.padding),
188                topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
189
190            L.DomUtil.setPosition(container, topLeft);
191
192            this._transformGL(gl);
193
194            var x_round = Math.round(size.x), y_round = Math.round(size.y);
195
196            if (Math.round(gl.transform.width) !== x_round || Math.round(gl.transform.height) !== y_round) {
197                container.style.width  = x_round + 'px';
198                container.style.height = y_round + 'px';
199                if (gl._resize !== null && gl._resize !== undefined){
200                    gl._resize();
201                } else {
202                    gl.resize();
203                }
204            } else {
205                // older versions of mapbox-gl surfaced update publicly
206                if (gl._update !== null && gl._update !== undefined){
207                    gl._update();
208                } else {
209                    gl.update();
210                }
211            }
212        },
213
214        _transformGL: function (gl) {
215            var center = this._map.getCenter();
216
217            // gl.setView([center.lat, center.lng], this._map.getZoom() - 1, 0);
218            // calling setView directly causes sync issues because it uses requestAnimFrame
219
220            var tr = gl.transform;
221            tr.center = mapboxgl.LngLat.convert([center.lng, center.lat]);
222            tr.zoom = this._map.getZoom() - 1;
223        },
224
225        // update the map constantly during a pinch zoom
226        _pinchZoom: function (e) {
227            this._glMap.jumpTo({
228                zoom: this._map.getZoom() - 1,
229                center: this._map.getCenter()
230            });
231        },
232
233        // borrowed from L.ImageOverlay
234        // https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
235        _animateZoom: function (e) {
236            var scale = this._map.getZoomScale(e.zoom);
237            var padding = this._map.getSize().multiplyBy(this.options.padding * scale);
238            var viewHalf = this.getSize()._divideBy(2);
239            // corrections for padding (scaled), adapted from
240            // https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L1490-L1508
241            var topLeft = this._map.project(e.center, e.zoom)
242                ._subtract(viewHalf)
243                ._add(this._map._getMapPanePos()
244                .add(padding))._round();
245            var offset = this._map.project(this._map.getBounds().getNorthWest(), e.zoom)
246                ._subtract(topLeft);
247
248            L.DomUtil.setTransform(
249                this._glMap._actualCanvas,
250                offset.subtract(this._offset),
251                scale
252            );
253        },
254
255        _zoomStart: function (e) {
256            this._zooming = true;
257        },
258
259        _zoomEnd: function () {
260            var scale = this._map.getZoomScale(this._map.getZoom());
261
262            L.DomUtil.setTransform(
263                this._glMap._actualCanvas,
264                // https://github.com/mapbox/mapbox-gl-leaflet/pull/130
265                null,
266                scale
267            );
268
269            this._zooming = false;
270
271            this._update();
272        },
273
274        _transitionEnd: function (e) {

275            L.Util.requestAnimFrame(function () {
276                var zoom = this._map.getZoom();
277                var center = this._map.getCenter();
278                var offset = this._map.latLngToContainerPoint(
279                    this._map.getBounds().getNorthWest()
280                );
281
282                // reset the scale and offset
283                L.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1);
284
285                // enable panning once the gl map is ready again
286                this._glMap.once('moveend', L.Util.bind(function () {
287                    this._zoomEnd();
288                }, this));
289
290                // update the map position
291                this._glMap.jumpTo({
292                    center: center,
293                    zoom: zoom - 1
294                });
295            }, this);
296        },
297
298        _resize: function (e) {
299            this._transitionEnd(e);
300        }
301    });
302
303    L.mapboxGL = function (options) {
304        return new L.MapboxGL(options);
305    };
306
307}));