https://wafuelfinder.com/js/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        },
17
18        initialize: function (options) {
19            L.setOptions(this, options);
20
21            if (options.accessToken) {
22                mapboxgl.accessToken = options.accessToken;
23            } else {
24                throw new Error('You should provide a Mapbox GL access token as a token option.');
25            }
26
27            /**
28             * Create a version of `fn` that only fires once every `time` millseconds.
29             *
30             * @param {Function} fn the function to be throttled
31             * @param {number} time millseconds required between function calls
32             * @param {*} context the value of `this` with which the function is called
33             * @returns {Function} debounced function
34             * @private
35             */
36            var throttle = function (fn, time, context) {
37                var lock, args, wrapperFn, later;
38
39                later = function () {
40                    // reset lock and call if queued
41                    lock = false;
42                    if (args) {
43                        wrapperFn.apply(context, args);
44                        args = false;
45                    }
46                };
47
48                wrapperFn = function () {
49                    if (lock) {
50                        // called too soon, queue to call later
51                        args = arguments;
52
53                    } else {
54                        // call and lock until later
55                        fn.apply(context, arguments);
56                        setTimeout(later, time);
57                        lock = true;
58                    }
59                };
60
61                return wrapperFn;
62            };
63
64            // setup throttling the update event when panning
65            this._throttledUpdate = throttle(L.Util.bind(this._update, this), this.options.updateInterval);
66        },
67
68        onAdd: function (map) {
69            if (!this._glContainer) {
70                this._initContainer();
71            }
72
73            this.getPane().appendChild(this._glContainer);
74
75            this._initGL();
76
77            this._offset = this._map.containerPointToLayerPoint([0, 0]);
78
79            // work around https://github.com/mapbox/mapbox-gl-leaflet/issues/47
80            if (map.options.zoomAnimation) {
81                L.DomEvent.on(map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
82            }
83        },
84
85        onRemove: function (map) {
86            if (this._map.options.zoomAnimation) {
87                L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
88            }
89
90            this.getPane().removeChild(this._glContainer);
91            this._glMap.remove();
92            this._glMap = null;
93        },
94
95        getEvents: function () {
96            return {
97                move: this._throttledUpdate, // sensibly throttle updating while panning
98                zoomanim: this._animateZoom, // applys the zoom animation to the <canvas>
99                zoom: this._pinchZoom, // animate every zoom event for smoother pinch-zooming
100                zoomstart: this._zoomStart, // flag starting a zoom to disable panning
101                zoomend: this._zoomEnd
102            };
103        },
104
105        _initContainer: function () {
106            var container = this._glContainer = L.DomUtil.create('div', 'leaflet-gl-layer');
107
108            var size = this._map.getSize();
109            container.style.width  = size.x + 'px';
110            container.style.height = size.y + 'px';
111        },
112
113        _initGL: function () {
114            var center = this._map.getCenter();
115
116            var options = L.extend({}, this.options, {
117                container: this._glContainer,
118                interactive: false,
119                center: [center.lng, center.lat],
120                zoom: this._map.getZoom() - 1,
121                attributionControl: false
122            });
123
124            this._glMap = new mapboxgl.Map(options);
125
126            // allow GL base map to pan beyond min/max latitudes
127            this._glMap.transform.latRange = null;
128
129            if (this._glMap._canvas.canvas) {
130                // older versions of mapbox-gl surfaced the canvas differently
131                this._glMap._actualCanvas = this._glMap._canvas.canvas;
132            } else {
133                this._glMap._actualCanvas = this._glMap._canvas;
134            }
135
136            // treat child <canvas> element like L.ImageOverlay
137            L.DomUtil.addClass(this._glMap._actualCanvas, 'leaflet-image-layer');
138            L.DomUtil.addClass(this._glMap._actualCanvas, 'leaflet-zoom-animated');
139
140        },
141
142        _update: function (e) {
143            // update the offset so we can correct for it later when we zoom
144            this._offset = this._map.containerPointToLayerPoint([0, 0]);
145
146            if (this._zooming) {
147            return;
148            }
149
150            var size = this._map.getSize(),
151                container = this._glContainer,
152                gl = this._glMap,
153                topLeft = this._map.containerPointToLayerPoint([0, 0]);
154
155            L.DomUtil.setPosition(container, topLeft);
156
157            var center = this._map.getCenter();
158
159            // gl.setView([center.lat, center.lng], this._map.getZoom() - 1, 0);

160            // calling setView directly causes sync issues because it uses requestAnimFrame
161
162            var tr = gl.transform;
163            tr.center = mapboxgl.LngLat.convert([center.lng, center.lat]);
164            tr.zoom = this._map.getZoom() - 1;
165
166            if (gl.transform.width !== size.x || gl.transform.height !== size.y) {
167                container.style.width  = size.x + 'px';
168                container.style.height = size.y + 'px';
169                if (gl._resize !== null && gl._resize !== undefined){
170                    gl._resize();
171                } else {
172                    gl.resize();
173                }
174            } else {
175                // older versions of mapbox-gl surfaced update publicly
176                if (gl._update !== null && gl._update !== undefined){
177                    gl._update();
178                } else {
179                    gl.update();
180                }
181            }
182        },
183
184        // update the map constantly during a pinch zoom
185        _pinchZoom: function (e) {
186        this._glMap.jumpTo({
187            zoom: this._map.getZoom() - 1,
188            center: this._map.getCenter()
189        });
190        },
191
192        // borrowed from L.ImageOverlay https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
193        _animateZoom: function (e) {
194        var scale = this._map.getZoomScale(e.zoom),
195            offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center);
196
197        L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
198        },
199
200        _zoomStart: function (e) {
201        this._zooming = true;
202        },
203
204        _zoomEnd: function () {
205        var scale = this._map.getZoomScale(this._map.getZoom()),
206            offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), this._map.getZoom(), this._map.getCenter());
207
208        L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
209
210        this._zooming = false;
211        },
212
213        _transitionEnd: function (e) {
214        L.Util.requestAnimFrame(function () {
215            var zoom = this._map.getZoom(),
216            center = this._map.getCenter(),
217            offset = this._map.latLngToContainerPoint(this._map.getBounds().getNorthWest());
218
219            // reset the scale and offset
220            L.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1);
221
222            // enable panning once the gl map is ready again
223            this._glMap.once('moveend', L.Util.bind(function () {
224                this._zoomEnd();
225            }, this));
226
227            // update the map position
228            this._glMap.jumpTo({
229                center: center,
230                zoom: zoom - 1
231            });
232        }, this);
233        }
234    });
235
236    L.mapboxGL = function (options) {
237        return new L.MapboxGL(options);
238    };
239
240}));
241