Add button to recenter landmark

Author: gjmooney

packages/base/src/commands/index.ts

@@ -1081,6 +1081,7 @@ export function addCommands(
         console.log('shut up');
         return;
       }
+
       const layerParams: ILandmarkLayer = { extent, zoom };
       const layerModel: IJGISLayer = {
         type: 'LandmarkLayer',
@@ -1091,7 +1092,6 @@ export function addCommands(
 
       current.model.addLayer(newLandmarkId, layerModel);
 
-      // TODO Add to story when making landmark
       // check for stories
       const isStoriesExist =
         Object.keys(current.model.sharedModel.storiesMap).length !== 0;

packages/base/src/panelview/components/layers.tsx

@@ -24,7 +24,11 @@ import React, {
 
 import { CommandIDs, icons } from '@/src/constants';
 import { useGetSymbology } from '@/src/dialogs/symbology/hooks/useGetSymbology';
-import { nonVisibilityIcon, visibilityIcon } from '@/src/icons';
+import {
+  nonVisibilityIcon,
+  targetWithCenterIcon,
+  visibilityIcon,
+} from '@/src/icons';
 import { ILeftPanelClickHandlerParams } from '@/src/panelview/leftpanel';
 import { LegendItem } from './legendItem';
 
@@ -568,6 +572,26 @@ const LayerComponent: React.FC<ILayerProps> = props => {
     }
   };
 
+  /**
+   * Set landmark layer to current map view.
+   */
+  const handleSetLandmarkToCurrentView = () => {
+    if (!gisModel) {
+      return;
+    }
+    const { zoom, extent } = gisModel.getOptions();
+    const updatedLayer = {
+      ...layer,
+      parameters: {
+        ...layer.parameters,
+        zoom,
+        extent,
+      },
+    };
+
+    gisModel.sharedModel.updateLayer(layerId, updatedLayer);
+  };
+
   return (
     <div
       className={`${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`}
@@ -644,6 +668,20 @@ const LayerComponent: React.FC<ILayerProps> = props => {
             {name}
           </span>
         )}
+
+        {layer.type === 'LandmarkLayer' && (
+          <Button
+            title={'Set landmark to current view'}
+            onClick={handleSetLandmarkToCurrentView}
+            minimal
+          >
+            <LabIcon.resolveReact
+              icon={targetWithCenterIcon}
+              className={LAYER_ICON_CLASS}
+              tag="span"
+            />
+          </Button>
+        )}
       </div>
 
       {/* Show legend only if supported symbology */}