Merge pull request #9534 from tschaub/simpler-mapbox-layer-example

Remove unnecessary parts from the Mapbox layer example
openlayers · May 15, 2019 · 5a4541d · 5a4541d
2 parents 56ec6b0 + f312706
commit 5a4541d
Showing 1 changed file with 31 additions and 47 deletions.
diff --git a/examples/mapbox-layer.js b/examples/mapbox-layer.js
@@ -1,70 +1,35 @@
 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 style = new Style({
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 2
-  })
-});
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
-  }),
-  style: style
-});
-
-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
-  })
-});
-
-
-// init Mapbox object
-
-const view = map.getView();
-const center = toLonLat(view.getCenter(), view.getProjection());
+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.getTargetElement(),
+  container: 'map',
   doubleClickZoom: false,
   dragPan: false,
   dragRotate: false,
   interactive: false,
   keyboard: false,
   pitchWithRotate: false,
   scrollZoom: false,
-  touchZoomRotate: false,
-  zoom: view.getZoom() - 1
+  touchZoomRotate: false
 });
 
-
-// init OL layers
-
 const mbLayer = new Layer({
   render: function(frameState) {
     const canvas = mbMap.getCanvas();
-    const view = map.getView();
+    const viewState = frameState.viewState;
 
     const visible = mbLayer.getVisible();
     canvas.style.display = visible ? 'block' : 'none';
@@ -73,17 +38,15 @@ const mbLayer = new Layer({
     canvas.style.opacity = opacity;
 
     // adjust view parameters in mapbox
-    const rotation = frameState.viewState.rotation;
+    const rotation = 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,
+      center: toLonLat(viewState.center),
+      zoom: viewState.zoom - 1,
       animate: false
     });
 
@@ -100,5 +63,26 @@ const mbLayer = new Layer({
   }
 });
 
-map.addLayer(mbLayer);
-map.addLayer(vectorLayer);
+const style = new Style({
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 2
+  })
+});
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  }),
+  style: style
+});
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: fromLonLat(center),
+    zoom: 4
+  }),
+  layers: [mbLayer, vectorLayer]
+});