fix(maplibre): Update default view once projection is known (#9794)

Author: felixpalmer

modules/mapbox/src/deck-utils.ts

@@ -184,7 +184,7 @@ export function drawLayer(
   });
 }
 
-function getProjection(map: Map): 'mercator' | 'globe' {
+export function getProjection(map: Map): 'mercator' | 'globe' {
   const projection = map.getProjection?.();
   const type =
     // maplibre projection spec

modules/mapbox/src/mapbox-overlay.ts

@@ -8,7 +8,8 @@ import {
   getDefaultView,
   getDeckInstance,
   removeDeckInstance,
-  getDefaultParameters
+  getDefaultParameters,
+  getProjection
 } from './deck-utils';
 
 import type {Map, IControl, MapMouseEvent, ControlPosition} from './types';
@@ -214,6 +215,13 @@ export default class MapboxOverlay implements IControl {
 
   private _handleStyleChange = () => {
     resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
+    if (!this._map) return;
+
+    // getProjection() returns undefined before style is loaded
+    const projection = getProjection(this._map);
+    if (projection && !this._props.views) {
+      this._deck?.setProps({views: getDefaultView(this._map)});
+    }
   };
 
   private _updateContainerSize = () => {

test/modules/mapbox/mapbox-gl-mock/map.ts

@@ -19,6 +19,9 @@ export default class Map extends Evented {
     this.options = options;
     this.version = options.version;
     this.style = new Style(options.style);
+    this.projection = {
+      type: options.projection || 'mercator'
+    };
     this._controls = [];
     this.transform = new Transform(options);
     this._loaded = false;
@@ -76,6 +79,9 @@ export default class Map extends Evented {
   setRenderWorldCopies(value) {
     this.transform.renderWorldCopies = value;
   }
+  getProjection() {
+    return this.projection;
+  }
 
   addControl(control) {
     this._controls.push(control);

test/modules/mapbox/mapbox-overlay.spec.ts

@@ -6,6 +6,7 @@ import test from 'tape-promise/tape';
 
 import {ScatterplotLayer} from '@deck.gl/layers';
 import {MapboxOverlay} from '@deck.gl/mapbox';
+import {_GlobeView as GlobeView, MapView} from '@deck.gl/core';
 
 import {objectEqual} from './mapbox-layer.spec';
 import MockMapboxMap from './mapbox-gl-mock/map';
@@ -354,3 +355,40 @@ test('MapboxOverlay#interleavedFinalizeRemovesMoveHandler', t => {
     t.end();
   });
 });
+
+const PROJECTION_TEST_CASES = [
+  {projection: 'globe', ExpectedView: GlobeView},
+  {projection: 'mercator', ExpectedView: MapView},
+  {ExpectedView: MapView}
+];
+
+for (const {projection, ExpectedView} of PROJECTION_TEST_CASES) {
+  test(`MapboxOverlay#${projection} projection view selection`, t => {
+    const map = new MockMapboxMap({
+      center: {lng: -122.45, lat: 37.78},
+      zoom: 14,
+      projection
+    });
+
+    const overlay = new MapboxOverlay({
+      interleaved: true,
+      layers: [new ScatterplotLayer({id: 'test-layer'})]
+    });
+
+    map.addControl(overlay);
+
+    t.ok(overlay._deck, 'Deck instance is created');
+
+    map.on('render', () => {
+      const mapboxView = overlay._deck.props.views;
+      t.ok(
+        mapboxView instanceof ExpectedView,
+        `should use correct view when map has ${projection} projection`
+      );
+
+      map.removeControl(overlay);
+      t.notOk(overlay._deck, 'Deck instance is finalized');
+      t.end();
+    });
+  });
+}