feat: implement zoom to feature in identify pane

#541
agrc · Aug 30, 2023 · 3b6d7ea · 3b6d7ea
1 parent c2a026b
commit 3b6d7ea
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
+import useMap from '../contexts/useMap';
 import Button from '../utah-design-system/Button';
 import Icon from '../utah-design-system/Icon';
 import Link from '../utah-design-system/Link';
@@ -12,7 +13,6 @@ const buttonClasses = 'border-none px-2 my-1';
 const urlRegex = /^https?:\/\/\S*$/;
 function Cell({ value }) {
   // if this is a link, return an anchor tag
-  console.log('value', value);
   if (urlRegex.test(value)) {
     return (
       <Link external href={value}>
@@ -30,9 +30,11 @@ Cell.propTypes = {
 };
 
 const Identify = forwardRef(function Identify(
-  { attributes, fields, onBack, links },
+  { attributes, fields, geometry, links, onBack },
   forwardedRef,
 ) {
+  const { zoom } = useMap();
+
   const columns = [
     {
       accessorKey: 'field',
@@ -64,7 +66,7 @@ const Identify = forwardRef(function Identify(
         <Tabs.Trigger value="attributes">Attributes</Tabs.Trigger>
         <Tabs.Trigger value="related">Related Records</Tabs.Trigger>
         <Tabs.Trigger value="links">Links</Tabs.Trigger>
-        <Button className={buttonClasses} onClick={() => {}} disabled>
+        <Button className={buttonClasses} onClick={() => zoom(geometry)}>
           <Icon
             name={Icon.Names.search}
             className="mr-2"
@@ -108,13 +110,14 @@ const Identify = forwardRef(function Identify(
 Identify.propTypes = {
   attributes: PropTypes.object.isRequired,
   fields: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onBack: PropTypes.func.isRequired,
+  geometry: PropTypes.object.isRequired,
   links: PropTypes.arrayOf(
     PropTypes.shape({
       text: PropTypes.string.isRequired,
       url: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  onBack: PropTypes.func.isRequired,
 };
 
 export default Identify;
diff --git a/src/components/ResultTable.jsx b/src/components/ResultTable.jsx
@@ -1,3 +1,4 @@
+import { fromJSON } from '@arcgis/core/geometry/support/jsonUtils';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
 import ky from 'ky';
@@ -28,7 +29,7 @@ export default function ResultTable({
               f: 'json',
               where: `OBJECTID = ${oid}`,
               outFields: '*',
-              returnGeometry: false,
+              returnGeometry: true,
             },
           },
         )
@@ -39,6 +40,11 @@ export default function ResultTable({
       setIdentifyResults({
         attributes,
         fields: result.fields,
+        geometry: fromJSON({
+          ...result.features[0].geometry,
+          type: result.geometryType,
+          spatialReference: result.spatialReference,
+        }),
       });
     },
     [queryLayerResult],
@@ -169,6 +175,7 @@ export default function ResultTable({
             attributes={identifyResults.attributes}
             fields={identifyResults.fields}
             links={getLinks()}
+            geometry={identifyResults.geometry}
           />
         ) : (
           <Table

diff --git a/src/contexts/MapProvider.jsx b/src/contexts/MapProvider.jsx
@@ -6,13 +6,22 @@ export default function MapProvider({ children }) {
   const [mapView, setMapView] = useState(null);
   const [selectedGraphicInfo, setSelectedGraphicInfo] = useState(null);
 
+  const zoom = (geometry) => {
+    if (!mapView) {
+      console.warn('attempting to zoom before the mapView is set');
+    } else {
+      mapView.goTo(geometry);
+    }
+  };
+
   return (
     <MapContext.Provider
       value={{
         mapView,
         setMapView,
         selectedGraphicInfo,
         setSelectedGraphicInfo,
+        zoom,
       }}
     >
       {children}