From 663f14236ccb9246efa8882c0dfa44e8cbcba0f7 Mon Sep 17 00:00:00 2001
From: Mark Goetz <breakawayblue@gmail.com>
Date: Thu, 18 Jan 2024 20:38:38 -0500
Subject: [PATCH] feat: Pass selected property to map view

---
 src/app/components/PropertyMap.tsx | 19 +++++++++++++++++--
 src/app/map/page.tsx               |  1 +
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/components/PropertyMap.tsx b/src/app/components/PropertyMap.tsx
index a26b442a..e6d0e3e9 100644
--- a/src/app/components/PropertyMap.tsx
+++ b/src/app/components/PropertyMap.tsx
@@ -7,7 +7,7 @@ import React, {
   Dispatch,
   SetStateAction,
 } from "react";
-import mapboxgl, { Map as MapboxMap, Point, PointLike } from "mapbox-gl";
+import mapboxgl, { Map as MapboxMap, PointLike } from "mapbox-gl";
 import { mapboxAccessToken } from "../../config/config";
 import { useFilter } from "@/context/FilterContext";
 import LegendControl from "mapboxgl-legend";
@@ -70,13 +70,15 @@ const MapControls = () => (
 interface PropertyMapProps {
   setFeaturesInView: Dispatch<SetStateAction<any[]>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
+  selectedProperty: MapboxGeoJSONFeature | null;
   setSelectedProperty: (property: MapboxGeoJSONFeature | null) => void;
 }
 const PropertyMap: React.FC<PropertyMapProps> = ({
   setFeaturesInView,
   setLoading,
+  selectedProperty,
   setSelectedProperty,
-}: any) => {
+}) => {
   const { filter } = useFilter();
   const [popupInfo, setPopupInfo] = useState<any | null>(null);
   const [map, setMap] = useState<MapboxMap | null>(null);
@@ -231,6 +233,19 @@ const PropertyMap: React.FC<PropertyMapProps> = ({
     }
   }, [map, filter, updateFilter]);
 
+  const id = selectedProperty?.properties?.OPA_ID ?? null;
+  useEffect(() => {
+    /** Ticket #87 - focus on map when a property is selected */
+    if (id && map != null) {
+      const features = map.queryRenderedFeatures(undefined, {
+        layers: ["vacant_properties"],
+      });
+      const mapItem = features.find(feature => feature.properties?.OPA_ID === id);
+      console.log({ mapItem });
+      // TODO: Focus the map on the given lat/long.
+    }
+  }, [id]);
+
   const changeCursor = (e: any, cursorType: "pointer" | "default") => {
     e.target.getCanvas().style.cursor = cursorType;
   };
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index 7ec284e7..7b539ce8 100644
--- a/src/app/map/page.tsx
+++ b/src/app/map/page.tsx
@@ -31,6 +31,7 @@ const Page: FC = () => {
               <PropertyMap
                 setFeaturesInView={setFeaturesInView}
                 setLoading={setLoading}
+                selectedProperty={selectedProperty}
                 setSelectedProperty={setSelectedProperty}
               />
             </div>