Implement zoom to layer

packages/base/src/commands.ts

@@ -834,13 +834,22 @@ export function addCommands(
   });
 
   commands.addCommand(CommandIDs.zoomToLayer, {
-    label: trans.__('Select the completion suggestion.'),
+    label: trans.__('Zoom to Layer'),
     execute: () => {
       const currentWidget = tracker.currentWidget;
       if (!currentWidget || !completionProviderManager) {
         return;
       }
       console.log('zooming');
+      const model = tracker.currentWidget.context.model;
+      const selectedItems = model.localState?.selected.value;
+
+      if (!selectedItems) {
+        return;
+      }
+
+      const layerId = Object.keys(selectedItems)[0];
+      model.centerOnAnnotation(layerId);
     }
   });
 }

packages/base/src/mainview/mainView.tsx

@@ -72,6 +72,7 @@ import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
 import { FollowIndicator } from './FollowIndicator';
 import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
+import TileSource from 'ol/source/Tile';
 
 interface IProps {
   viewModel: MainViewModel;
@@ -1241,10 +1242,37 @@ export class MainView extends React.Component<IProps, IStates> {
   }
 
   private _onZoomToAnnotation(_: IJupyterGISModel, id: string) {
+    // annotation?
     const annotation = this._model.annotationModel?.getAnnotation(id);
     if (annotation) {
       this._moveToPosition(annotation.position, annotation.zoom);
     }
+
+    // layer?
+    const olLayer = this.getLayer(id) as Layer;
+    const source = olLayer?.getSource();
+
+    let extent;
+
+    if (source instanceof VectorSource) {
+      extent = source.getExtent();
+    }
+
+    if (source instanceof TileSource) {
+      // Tiled sources don't have getExtent() so we get it from the grid
+      const tileGrid = source.getTileGrid();
+      extent = tileGrid?.getExtent();
+    }
+
+    if (extent) {
+      this._Map.getView().fit(extent, {
+        size: this._Map.getSize(), // Ensure the map view fits within the map size
+        maxZoom: 16, // Optional: Set a maximum zoom level
+        duration: 500
+      });
+    } else {
+      console.warn('Layer has no extent.');
+    }
   }
 
   private _moveToPosition(