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;