Ysurac /
FlightAirMap
| Conditions | 1 |
| Paths | 8 |
| Total Lines | 229 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | (function (root, factory) { |
||
| 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 | map._panes.tilePane.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 | map.getPanes().tilePane.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 | |||
| 242 |
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.