diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html index 3cc356148b..f136feb303 100644 --- a/examples/mapbox-layer.html +++ b/examples/mapbox-layer.html @@ -7,6 +7,7 @@ docs: > tags: "simple, mapbox, vector, tiles" resources: - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js + - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css cloak: - key: ER67WIiPdCQvhgsUjoWK value: Your Mapbox access token from http://mapbox.com/ here diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 0ea4f79824..042c158979 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -34,11 +34,6 @@ class Mapbox extends Layer { const view = map.getView(); const center = toLonLat(view.getCenter(), view.getProjection()); - this.centerLastRender = view.getCenter(); - this.zoomLastRender = view.getZoom(); - this.centerLastRender = view.getCenter(); - this.zoomLastRender = view.getZoom(); - const options = assign(this.baseOptions, { attributionControl: false, boxZoom: false, @@ -56,8 +51,8 @@ class Mapbox extends Layer { }); this.mbmap = new mapboxgl.Map(options); + this.mbmap.on('load', function() { - this.mbmap.getCanvas().remove(); this.loaded = true; this.map_.render(); this.mbmap.getContainer().querySelector('.mapboxgl-control-container').remove(); @@ -73,8 +68,6 @@ class Mapbox extends Layer { const map = this.map_; const view = map.getView(); - this.centerNextRender = view.getCenter(); - // adjust view parameters in mapbox const rotation = frameState.viewState.rotation; if (rotation) { @@ -82,7 +75,7 @@ class Mapbox extends Layer { animate: false }); } - const center = toLonLat(this.centerNextRender, view.getProjection()); + const center = toLonLat(view.getCenter(), view.getProjection()); const zoom = view.getZoom() - 1; this.mbmap.jumpTo({ center: center, @@ -134,38 +127,6 @@ class Mapbox extends Layer { } -mapboxgl.Map.prototype._setupContainer = function _setupContainer() { - const container = this._container; - container.classList.add('mapboxgl-map'); - - const canvasContainer = this._canvasContainer = container.firstChild; - - this._canvas = document.createElement('canvas'); - canvasContainer.insertBefore(this._canvas, canvasContainer.firstChild); - this._canvas.style.position = 'absolute'; - this._canvas.addEventListener('webglcontextlost', this._contextLost, false); - this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false); - this._canvas.setAttribute('tabindex', '0'); - this._canvas.setAttribute('aria-label', 'Map'); - this._canvas.className = 'mapboxgl-canvas'; - - const dimensions = this._containerDimensions(); - this._resizeCanvas(dimensions[0], dimensions[1]); - - this._controlContainer = canvasContainer; - const controlContainer = this._controlContainer = document.createElement('div'); - controlContainer.className = 'mapboxgl-control-container'; - container.appendChild(controlContainer); - - const positions = this._controlPositions = {}; - ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(positionName) { - const elem = document.createElement('div'); - elem.className = 'mapboxgl-ctrl-' + positionName; - controlContainer.appendChild(elem); - positions[positionName] = elem; - }); -}; - const style = new Style({ stroke: new Stroke({ color: '#319FD3',