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 if (!this._glMap) this._glMap = new mapboxgl.Map(options); 130 else { 131 this._glMap.setCenter(options.center); 132 this._glMap.setZoom(options.zoom); 133 } 134 135 // allow GL base map to pan beyond min/max latitudes 136 this._glMap.transform.latRange = null; 137 this._transformGL(this._glMap); 138 139 if (this._glMap._canvas.canvas) { 140 // older versions of mapbox-gl surfaced the canvas differently 141 this._glMap._actualCanvas = this._glMap._canvas.canvas; 142 } else { 143 this._glMap._actualCanvas = this._glMap._canvas; 144 } 145 146 // treat child <canvas> element like L.ImageOverlay 147 var canvas = this._glMap._actualCanvas; 148 L.DomUtil.addClass(canvas, 'leaflet-image-layer'); 149 L.DomUtil.addClass(canvas, 'leaflet-zoom-animated'); 150 if (this.options.interactive) { 151 L.DomUtil.addClass(canvas, 'leaflet-interactive'); 152 } 153 if (this.options.className) { 154 L.DomUtil.addClass(canvas, this.options.className); 155 } 156 }, 157 158 _update: function (e) { 159 if (!this._map) { 160 return; 161 } 162 // update the offset so we can correct for it later when we zoom 163 this._offset = this._map.containerPointToLayerPoint([0, 0]); 164 165 if (this._zooming) { 166 return; 167 } 168
169 var size = this.getSize(), 170 container = this._container, 171 gl = this._glMap, 172 offset = this._map.getSize().multiplyBy(this.options.padding), 173 topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset); 174 175 L.DomUtil.setPosition(container, topLeft); 176 177 this._transformGL(gl); 178 179 var x_round = Math.round(size.x), y_round = Math.round(size.y); 180 181 if (Math.round(gl.transform.width) !== x_round || Math.round(gl.transform.height) !== y_round) { 182 container.style.width = x_round + 'px'; 183 container.style.height = y_round + 'px'; 184 if (gl._resize !== null && gl._resize !== undefined){ 185 gl._resize(); 186 } else { 187 gl.resize(); 188 } 189 } else { 190 // older versions of mapbox-gl surfaced update publicly 191 if (gl._update !== null && gl._update !== undefined){ 192 gl._update(); 193 } else { 194 gl.update(); 195 } 196 } 197 }, 198 199 _transformGL: function (gl) { 200 var center = this._map.getCenter(); 201 202 // gl.setView([center.lat, center.lng], this._map.getZoom() - 1, 0); 203 // calling setView directly causes sync issues because it uses requestAnimFrame 204 205 var tr = gl.transform; 206 tr.center = mapboxgl.LngLat.convert([center.lng, center.lat]); 207 tr.zoom = this._map.getZoom() - 1; 208 }, 209 210 // update the map constantly during a pinch zoom 211 _pinchZoom: function (e) { 212 this._glMap.jumpTo({ 213 zoom: this._map.getZoom() - 1, 214 center: this._map.getCenter() 215 }); 216 }, 217 218 // borrowed from L.ImageOverlay 219 // https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144 220 _animateZoom: function (e) { 221 var scale = this._map.getZoomScale(e.zoom); 222 var padding = this._map.getSize().multiplyBy(this.options.padding * scale); 223 var viewHalf = this.getSize()._divideBy(2); 224 // corrections for padding (scaled), adapted from 225 // https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L1490-L1508 226 var topLeft = this._map.project(e.center, e.zoom) 227 ._subtract(viewHalf) 228 ._add(this._map._getMapPanePos() 229 .add(padding))._round(); 230 var offset = this._map.project(this._map.getBounds().getNorthWest(), e.zoom) 231 ._subtract(topLeft); 232 233 L.DomUtil.setTransform( 234 this._glMap._actualCanvas, 235 offset.subtract(this._offset), 236 scale 237 ); 238 }, 239 240 _zoomStart: function (e) { 241 this._zooming = true; 242 }, 243 244 _zoomEnd: function () { 245 var scale = this._map.getZoomScale(this._map.getZoom()); 246 247 L.DomUtil.setTransform( 248 this._glMap._actualCanvas, 249 // https://github.com/mapbox/mapbox-gl-leaflet/pull/130 250 null, 251 scale 252 ); 253 254 this._zooming = false; 255 256 this._update(); 257 }, 258 259 _transitionEnd: function (e) { 260 L.Util.requestAnimFrame(function () { 261 var zoom = this._map.getZoom(); 262 var center = this._map.getCenter(); 263 var offset = this._map.latLngToContainerPoint( 264 this._map.getBounds().getNorthWest() 265 ); 266 267 // reset the scale and offset 268 L.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1); 269 270 // enable panning once the gl map is ready again 271 this._glMap.once('moveend', L.Util.bind(function () { 272 this._zoomEnd(); 273 }, this)); 274 275 // update the map position 276 this._glMap.jumpTo({ 277 center: center, 278 zoom: zoom - 1 279 }); 280 }, this); 281 }, 282 283 _resize: function (e) { 284 this._transitionEnd(e); 285 } 286 }); 287 288 L.mapboxGL = function (options) { 289 return new L.MapboxGL(options); 290 }; 291 292})); 293
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.