From c5e6728d6db2ee3661573d09105df55cef361810 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Fri, 10 May 2019 10:48:21 +0200 Subject: [PATCH 1/4] Update mapbox-gl to version 0.54.0 --- examples/mapbox-layer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html index 315c44e300..3cc356148b 100644 --- a/examples/mapbox-layer.html +++ b/examples/mapbox-layer.html @@ -6,7 +6,7 @@ docs: > Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired. tags: "simple, mapbox, vector, tiles" resources: - - https://unpkg.com/mapbox-gl@0.51.0/dist/mapbox-gl.js + - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js cloak: - key: ER67WIiPdCQvhgsUjoWK value: Your Mapbox access token from http://mapbox.com/ here From e5e2129a8858b96faf85aa4319d58a3d16965911 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Fri, 10 May 2019 10:48:45 +0200 Subject: [PATCH 2/4] Use toLonLat function in mapbox-layer example --- examples/mapbox-layer.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index e717328572..33d858209d 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import Layer from '../src/ol/layer/Layer'; import {assign} from '../src/ol/obj'; -import {getTransform} from '../src/ol/proj'; +import {toLonLat} from '../src/ol/proj'; import SourceState from '../src/ol/source/State'; import {Stroke, Style} from '../src/ol/style.js'; import VectorLayer from '../src/ol/layer/Vector.js'; @@ -12,7 +12,7 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; class Mapbox extends Layer { /** - * @param {import('./Base.js').Options} options Layer options. + * @param {import('../src/ol/layer/Layer').Options} options Layer options. */ constructor(options) { const baseOptions = assign({}, options); @@ -32,8 +32,7 @@ class Mapbox extends Layer { initMap() { const map = this.map_; const view = map.getView(); - const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326'); - const center = transformToLatLng(view.getCenter()); + const center = toLonLat(view.getCenter(), view.getProjection()); this.centerLastRender = view.getCenter(); this.zoomLastRender = view.getZoom(); @@ -86,7 +85,6 @@ class Mapbox extends Layer { render(frameState) { const map = this.map_; const view = map.getView(); - const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326'); this.centerNextRender = view.getCenter(); const lastRender = map.getPixelFromCoordinate(this.centerLastRender); @@ -104,7 +102,7 @@ class Mapbox extends Layer { } // Re-render mbmap - const center = transformToLatLng(this.centerNextRender); + const center = toLonLat(this.centerNextRender, view.getProjection()); const zoom = view.getZoom() - 1; this.mbmap.jumpTo({ center: center, From 5756003c88dcdf5c41d55e5119594a37308e175e Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Fri, 10 May 2019 10:59:15 +0200 Subject: [PATCH 3/4] Don't create temporary arrays in mapbox-layer example --- examples/mapbox-layer.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 33d858209d..56f54880d5 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -73,7 +73,7 @@ class Mapbox extends Layer { if (this.zoomNextRender) { this.zoomLastRender = this.zoomNextRender; } - this.updateRenderedPosition([0, 0], 1); + this.updateRenderedPosition(0, 0, 1); }.bind(this)); } @@ -89,10 +89,9 @@ class Mapbox extends Layer { this.centerNextRender = view.getCenter(); const lastRender = map.getPixelFromCoordinate(this.centerLastRender); const nextRender = map.getPixelFromCoordinate(this.centerNextRender); - const centerOffset = [lastRender[0] - nextRender[0], lastRender[1] - nextRender[1]]; this.zoomNextRender = view.getZoom(); - const zoomOffset = Math.pow(2, this.zoomNextRender - this.zoomLastRender); - this.updateRenderedPosition(centerOffset, zoomOffset); + const scale = Math.pow(2, this.zoomNextRender - this.zoomLastRender); + this.updateRenderedPosition(lastRender[0] - nextRender[0], lastRender[1] - nextRender[1], scale); const rotation = frameState.viewState.rotation; if (rotation) { @@ -111,11 +110,11 @@ class Mapbox extends Layer { return this.mbmap.getCanvas(); } - updateRenderedPosition(centerOffset, zoomOffset) { + updateRenderedPosition(left, top, scale) { const style = this.mbmap.getCanvas().style; - style.left = Math.round(centerOffset[0]) + 'px'; - style.top = Math.round(centerOffset[1]) + 'px'; - style.transform = 'scale(' + zoomOffset + ')'; + style.left = Math.round(left) + 'px'; + style.top = Math.round(top) + 'px'; + style.transform = 'scale(' + scale + ')'; } setVisible(visible) { From d1fe22a8723540cc95e3e3ba682a62b16e3bead1 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Fri, 10 May 2019 12:39:39 +0200 Subject: [PATCH 4/4] Simplify mapboxgl control container removal --- examples/mapbox-layer.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 56f54880d5..bab60d0b38 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -60,9 +60,7 @@ class Mapbox extends Layer { this.mbmap.getCanvas().remove(); this.loaded = true; this.map_.render(); - [ - 'mapboxgl-control-container' - ].forEach(className => document.getElementsByClassName(className)[0].remove()); + this.mbmap.getContainer().querySelector('.mapboxgl-control-container').remove(); }.bind(this)); this.mbmap.on('render', function() {