Merge pull request #11263 from mike-000/patch-19

Fix rotation reset in Mapbox-gl Layer example

examples/mapbox-layer.css

@@ -0,0 +1,5 @@
+/* Reset font size changed by Mapbox CSS */
+.map {
+  font-size: medium;
+  font-family: 'Quattrocento Sans', sans-serif;
+}

examples/mapbox-layer.html

@@ -7,8 +7,8 @@ docs: >
 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@1.11.1/dist/mapbox-gl.js
-  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
+  - 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/

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';
@@ -39,20 +40,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 +58,12 @@ const mbLayer = new Layer({
 
     return canvas;
   },
+  source: new Source({
+    attributions: [
+      '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
+      '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
+    ],
+  }),
 });
 
 const style = new Style({