From d99f58d7ffcf4e392a85b6afa1a96b38c03fce6a Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 17:45:25 +0100 Subject: [PATCH 1/8] update mapbox gl version --- examples/mapbox-layer.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html index 05a67fdf21..5eb8d65e57 100644 --- a/examples/mapbox-layer.html +++ b/examples/mapbox-layer.html @@ -5,10 +5,9 @@ shortdesc: Example of a Mapbox-gl-js layer integration. docs: > Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired. tags: "simple, mapbox, vector, tiles, maptiler" -experimental: true 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 + - https://unpkg.com/mapbox-gl@1.11.0/dist/mapbox-gl.js + - https://unpkg.com/mapbox-gl@1.11.0/dist/mapbox-gl.css cloak: - key: get_your_own_D6rA4zTHduk6KOKTXzGB value: Get your own API key at https://www.maptiler.com/cloud/ From 5461a1dafd38eb59cb6ffaa5c70b76d4a335a04b Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 17:53:44 +0100 Subject: [PATCH 2/8] Add files via upload --- examples/mapbox-layer.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 examples/mapbox-layer.css diff --git a/examples/mapbox-layer.css b/examples/mapbox-layer.css new file mode 100644 index 0000000000..f242ad463c --- /dev/null +++ b/examples/mapbox-layer.css @@ -0,0 +1,5 @@ +/* Reset font size changed by Mapbox CSS */ +.map { + font-size: medium; /* fallback for Internet Explorer */ + font: initial; +} \ No newline at end of file From 63135dadf6aacd46c61d3f120ffb5b931db77063 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 17:58:17 +0100 Subject: [PATCH 3/8] Reset font size changed by Mapbox CSS --- examples/mapbox-layer.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/mapbox-layer.css b/examples/mapbox-layer.css index f242ad463c..417efdf0fb 100644 --- a/examples/mapbox-layer.css +++ b/examples/mapbox-layer.css @@ -2,4 +2,4 @@ .map { font-size: medium; /* fallback for Internet Explorer */ font: initial; -} \ No newline at end of file +} From 960fad2fc71f30a40d49c4f53797763b5f90280f Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 18:16:32 +0100 Subject: [PATCH 4/8] Fix rotation reset and add attributions --- examples/mapbox-layer.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 5da67e8fb8..0f1035a16c 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -39,20 +39,16 @@ const mbLayer = new Layer({ // adjust view parameters in mapbox const rotation = viewState.rotation; - if (rotation) { - mbMap.rotateTo((-rotation * 180) / Math.PI, { - animate: false, - }); - } mbMap.jumpTo({ center: toLonLat(viewState.center), zoom: viewState.zoom - 1, + bearing: (-rotation * 180) / Math.PI, animate: false, }); // cancel the scheduled update & trigger synchronous redraw // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184 - // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX + // NOTE: THIS MIGHT BREAK IF UPDATING THE MAPBOX VERSION if (mbMap._frame) { mbMap._frame.cancel(); mbMap._frame = null; @@ -61,6 +57,12 @@ const mbLayer = new Layer({ return canvas; }, + source: new Source({ + attributions: [ + '© MapTiler', + '© OpenStreetMap contributors', + ], + }), }); const style = new Style({ From 233269d56c8459cc80af15bc12e5d803493329c1 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 18:27:35 +0100 Subject: [PATCH 5/8] add missing import --- examples/mapbox-layer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js index 0f1035a16c..e2f93463d5 100644 --- a/examples/mapbox-layer.js +++ b/examples/mapbox-layer.js @@ -1,6 +1,7 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import Layer from '../src/ol/layer/Layer.js'; import Map from '../src/ol/Map.js'; +import Source from '../src/ol/source/Source.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; From bee05bbd240a535fd7619610a80d8c2bf373b5c8 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 10 Jul 2020 21:47:31 +0100 Subject: [PATCH 6/8] update to latest mapbox gl version --- examples/mapbox-layer.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html index 5eb8d65e57..86cfbdc9fc 100644 --- a/examples/mapbox-layer.html +++ b/examples/mapbox-layer.html @@ -6,8 +6,8 @@ docs: > Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired. tags: "simple, mapbox, vector, tiles, maptiler" resources: - - https://unpkg.com/mapbox-gl@1.11.0/dist/mapbox-gl.js - - https://unpkg.com/mapbox-gl@1.11.0/dist/mapbox-gl.css + - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.js + - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.css cloak: - key: get_your_own_D6rA4zTHduk6KOKTXzGB value: Get your own API key at https://www.maptiler.com/cloud/ From 49a43444461f6013e4c184b75079618041510d03 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Mon, 13 Jul 2020 10:43:21 +0100 Subject: [PATCH 7/8] reinsert experimental: tag --- examples/mapbox-layer.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html index 86cfbdc9fc..bd8bfa7ec6 100644 --- a/examples/mapbox-layer.html +++ b/examples/mapbox-layer.html @@ -5,6 +5,7 @@ shortdesc: Example of a Mapbox-gl-js layer integration. docs: > Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired. tags: "simple, mapbox, vector, tiles, maptiler" +experimental: true resources: - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.js - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.css From b896fd00109063b11296c637eb67ebfc10ed1c14 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Mon, 13 Jul 2020 10:47:03 +0100 Subject: [PATCH 8/8] specify font family --- examples/mapbox-layer.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/mapbox-layer.css b/examples/mapbox-layer.css index 417efdf0fb..07c3d5d8d2 100644 --- a/examples/mapbox-layer.css +++ b/examples/mapbox-layer.css @@ -1,5 +1,5 @@ /* Reset font size changed by Mapbox CSS */ .map { - font-size: medium; /* fallback for Internet Explorer */ - font: initial; + font-size: medium; + font-family: 'Quattrocento Sans', sans-serif; }