Auto zoom when adding a layer from the UI

packages/base/src/mainview/mainView.tsx

@@ -1386,8 +1386,6 @@ export class MainView extends React.Component<IMainViewProps, IStates> {
 
       this.addProjection(newMapLayer);
       await this._waitForSourceReady(newMapLayer);
-
-      this._trackLayerViewState(id, newMapLayer);
     }
 
     this._loadingLayers.delete(id);
@@ -1448,6 +1446,9 @@ export class MainView extends React.Component<IMainViewProps, IStates> {
         const safeIndex = Math.min(index, numLayers);
         this._Map.getLayers().insertAt(safeIndex, newMapLayer);
 
+        const shouldZoom = this.state.initialLayersReady;
+        this._trackLayerViewState(id, newMapLayer as Layer, shouldZoom);
+
         // doing +1 instead of calling method again
         if (
           !this.state.initialLayersReady &&
@@ -1956,10 +1957,26 @@ export class MainView extends React.Component<IMainViewProps, IStates> {
     return zoom ?? view.getZoom() ?? 0;
   }
 
+  private _getLayerCreatorId(layerId: string): number | undefined {
+    const states = this._model.sharedModel.awareness.getStates();
+
+    for (const state of states.values()) {
+      if (state?.lastAddedLayer?.layerId === layerId) {
+        return state.lastAddedLayer.clientId;
+      }
+    }
+
+    return undefined;
+  }
+
   /**
    * Track layer's extent and zoom in model's view state
    */
-  private _trackLayerViewState(layerId: string, olLayer: Layer): void {
+  private _trackLayerViewState(
+    layerId: string,
+    olLayer: Layer,
+    shouldZoom = false,
+  ): void {
     const source = olLayer.getSource();
     const sourceId = source?.get?.('id');
 
@@ -1978,6 +1995,15 @@ export class MainView extends React.Component<IMainViewProps, IStates> {
 
       const view: IViewState[string] = { extent, zoom };
       this._model.updateLayerViewState(layerId, view);
+
+      if (shouldZoom) {
+        const creatorId = this._getLayerCreatorId(layerId);
+        const currentClientId = this._model.getClientId();
+
+        if (creatorId === currentClientId) {
+          this._model.centerOnPosition(layerId);
+        }
+      }
     }
   }
 

packages/schema/src/doc.ts

@@ -12,6 +12,7 @@ import {
   IJGISSource,
   IJGISSources,
   IJGISStoryMap,
+  IJGISViewState,
 } from './_interface/project/jgis';
 import { SCHEMA_VERSION } from './_interface/version';
 import {
@@ -195,11 +196,11 @@ export class JupyterGISDoc
     return JSONExt.deepCopy(this._stories.toJSON());
   }
 
-  get viewState(): JSONObject {
+  get viewState(): IJGISViewState {
     return JSONExt.deepCopy(this._viewState.toJSON());
   }
 
-  set viewState(viewState: JSONObject) {
+  set viewState(viewState: IJGISViewState) {
     this.transact(() => {
       for (const [key, value] of Object.entries(viewState)) {
         this._viewState.set(key, value);

packages/schema/src/interfaces.ts

@@ -27,6 +27,7 @@ import {
   IJGISSource,
   IJGISSources,
   IJGISStoryMap,
+  IJGISViewState,
   LayerType,
   SourceType,
 } from './_interface/project/jgis';
@@ -127,6 +128,7 @@ export interface IJupyterGISDoc extends YDocument<IJupyterGISDocChange> {
   sources: IJGISSources;
   stories: IJGISStoryMaps;
   layerTree: IJGISLayerTree;
+  viewState: IJGISViewState;
   metadata: any;
 
   readonly editable: boolean;
@@ -299,6 +301,7 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   syncViewport(viewport?: IViewPortState, emitter?: string): void;
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void;
   selected: { [key: string]: ISelection } | undefined;
+  syncLastAddedLayer(layerId: string): void;
   setEditingItem(type: SelectionType, itemId: string): void;
   clearEditingItem(): void;
   readonly editing: { type: SelectionType; itemId: string } | null;

packages/schema/src/model.ts

@@ -500,6 +500,7 @@ export class JupyterGISModel implements IJupyterGISModel {
   ): void {
     if (!this.getLayer(id)) {
       this.sharedModel.addLayer(id, layer);
+      this.syncLastAddedLayer(id);
     }
 
     this._addLayerTreeItem(id, groupName, position);
@@ -585,6 +586,12 @@ export class JupyterGISModel implements IJupyterGISModel {
     });
   }
 
+  syncLastAddedLayer(layerId: string): void {
+    this.sharedModel.awareness.setLocalStateField('lastAddedLayer', {
+      layerId,
+      clientId: this.getClientId(),
+    });
+  }
   get selected(): { [key: string]: ISelection } | undefined {
     return this.localState?.selected?.value;
   }