diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js
index 1207b5eb7c..13c21245a6 100644
--- a/examples/mapbox-layer.js
+++ b/examples/mapbox-layer.js
@@ -1,12 +1,68 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Layer from '../src/ol/layer/Layer';
-import {toLonLat} from '../src/ol/proj';
+import {toLonLat, fromLonLat} from '../src/ol/proj';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
+const center = [-98.8, 37.9];
+const key = 'ER67WIiPdCQvhgsUjoWK';
+
+const mbMap = new mapboxgl.Map({
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
+  attributionControl: false,
+  boxZoom: false,
+  center: center,
+  container: 'map',
+  doubleClickZoom: false,
+  dragPan: false,
+  dragRotate: false,
+  interactive: false,
+  keyboard: false,
+  pitchWithRotate: false,
+  scrollZoom: false,
+  touchZoomRotate: false
+});
+
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const viewState = frameState.viewState;
+
+    const visible = mbLayer.getVisible();
+    canvas.style.display = visible ? 'block' : 'none';
+
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
+
+    // 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,
+      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
+    if (mbMap._frame) {
+      mbMap._frame.cancel();
+      mbMap._frame = null;
+    }
+    mbMap._render();
+
+    return canvas;
+  }
+});
+
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
@@ -25,80 +81,8 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [-10997148, 4569099],
-    zoom: 4,
-    minZoom: 1,
-    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
-    smoothExtentConstraint: false,
-    smoothResolutionConstraint: false
-  })
+    center: fromLonLat(center),
+    zoom: 4
+  }),
+  layers: [mbLayer, vectorLayer]
 });
-
-
-// init Mapbox object
-
-const view = map.getView();
-const center = toLonLat(view.getCenter(), view.getProjection());
-const key = 'ER67WIiPdCQvhgsUjoWK';
-
-const mbMap = new mapboxgl.Map({
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
-  attributionControl: false,
-  boxZoom: false,
-  center: center,
-  container: map.getTargetElement(),
-  doubleClickZoom: false,
-  dragPan: false,
-  dragRotate: false,
-  interactive: false,
-  keyboard: false,
-  pitchWithRotate: false,
-  scrollZoom: false,
-  touchZoomRotate: false,
-  zoom: view.getZoom() - 1
-});
-
-
-// init OL layers
-
-const mbLayer = new Layer({
-  render: function(frameState) {
-    const canvas = mbMap.getCanvas();
-    const view = map.getView();
-
-    const visible = mbLayer.getVisible();
-    canvas.style.display = visible ? 'block' : 'none';
-
-    const opacity = mbLayer.getOpacity();
-    canvas.style.opacity = opacity;
-
-    // adjust view parameters in mapbox
-    const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      mbMap.rotateTo(-rotation * 180 / Math.PI, {
-        animate: false
-      });
-    }
-    const center = toLonLat(view.getCenter(), view.getProjection());
-    const zoom = view.getZoom() - 1;
-    mbMap.jumpTo({
-      center: center,
-      zoom: zoom,
-      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
-    if (mbMap._frame) {
-      mbMap._frame.cancel();
-      mbMap._frame = null;
-    }
-    mbMap._render();
-
-    return canvas;
-  }
-});
-
-map.addLayer(mbLayer);
-map.addLayer(vectorLayer);