diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html
index 6e348b21e3..315c44e300 100644
--- a/examples/mapbox-layer.html
+++ b/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.
diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js
index 7d191916dc..b0965a015d 100644
--- a/examples/mapbox-layer.js
+++ b/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,
- interactive: false,
+ container: map.getTargetElement(),
+ 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;