Add rotation in mapbox-gl example

examples/mapbox-layer.html

@@ -1,6 +1,6 @@
 ---
 layout: example.html
-title: Mapbox Layer
+title: Mapbox-gl Layer
 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 Mapbox API key when using this example. No map will be visible when the API key has expired.

examples/mapbox-layer.js

@@ -41,16 +41,18 @@ class Mapbox extends Layer {
     this.zoomLastRender = view.getZoom();
 
     const options = assign(this.baseOptions, {
+      attributionControl: false,
+      boxZoom: false,
       center,
-      scrollZoom: false,
+      container: map.getTargetElement(),
-      interactive: false,
+      doubleClickZoom: false,
       dragPan: false,
       dragRotate: false,
-      boxZoom: false,
+      interactive: false,
       keyboard: false,
-      doubleClickZoom: false,
+      pitchWithRotate: false,
+      scrollZoom: false,
       touchZoomRotate: false,
-      container: map.getTargetElement(),
       zoom: view.getZoom() - 1
     });
 
@@ -81,7 +83,7 @@ class Mapbox extends Layer {
    *
    * @inheritDoc
    */
-  render() {
+  render(frameState) {
     const map = this.map_;
     const view = map.getView();
     const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
@@ -94,6 +96,13 @@ class Mapbox extends Layer {
     const zoomOffset = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
     this.updateRenderedPosition(centerOffset, zoomOffset);
 
+    const rotation = frameState.viewState.rotation;
+    if (rotation) {
+      this.mbmap.rotateTo(-rotation * 180 / Math.PI, {
+        animate: false
+      });
+    }
+
     // Re-render mbmap
     const center = transformToLatLng(this.centerNextRender);
     const zoom = view.getZoom() - 1;