zoom to center imagery and AOI on click

hotosm · Aug 28, 2023 · fe1897b · fe1897b
1 parent 1cb1475
commit fe1897b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 21 deletions.
diff --git a/frontend/src/components/Layout/Feedback/Feedback.js b/frontend/src/components/Layout/Feedback/Feedback.js
@@ -123,12 +123,28 @@ const Feedback = (props) => {
     getOriginalAOIs();
     return () => {};
   }, []);
+  const [currentPosision, setCurrentPosision] = useState(null);
+  const [map, setMap] = useState(null);
+
+  useEffect(() => {
+    if (
+      map &&
+      currentPosision &&
+      currentPosision.length > 0 &&
+      currentPosision[0]
+    ) {
+      console.log("props.currentPosision", currentPosision);
+      map.setView(currentPosision, 17);
+      // setZoom(props.zoom);
+      // props.clearCurrentPosision();
+    }
+
+    return () => {};
+  }, [currentPosision, map]);
 
   const [zoom, setZoom] = useState(15);
   const [bounds, setBounds] = useState({});
 
-  const [map, setMap] = useState(null);
-
   const [windowSize, setWindowSize] = useState([
     window.innerWidth,
     window.innerHeight,
@@ -143,6 +159,11 @@ const Feedback = (props) => {
     }
     if (map)
       map.setView([res.data.center[1], res.data.center[0]], res.data.center[2]);
+    setCurrentPosision([
+      res.data.center[1],
+      res.data.center[0],
+      res.data.center[2],
+    ]);
     console.log("OAM data", res.data, "map", map);
     setImagery({
       maxzoom: res.data.maxzoom,
@@ -283,6 +304,10 @@ const Feedback = (props) => {
   const onEachFeatureOriginalAOIs = (feature, layer) => {
     layer.bindPopup("Original dataset AOI");
   };
+
+  const selectAOIHandler = (e, zoom) => {
+    setCurrentPosision([e[0], e[1], zoom]);
+  };
   return (
     <>
       {!feedbackData && (
@@ -483,7 +508,7 @@ const Feedback = (props) => {
                 Total feedbacks: {feedbackData && feedbackData.features.length}
               </Typography>{" "}
               <Typography variant="body1" component="h2">
-                Zoom: {zoom.toFixed(1)}
+                Zoom: {zoom && zoom.toFixed(1)}
               </Typography>
             </Grid>
             <Grid item xs={12} marginBottom={1}>
@@ -500,6 +525,7 @@ const Feedback = (props) => {
                   trainingId={trainingId}
                   refresh={refresh}
                   setAOIs={setAOIs}
+                  selectAOIHandler={selectAOIHandler}
                 ></FeedbackAOI>
               )}
             </Grid>

diff --git a/frontend/src/components/Layout/Feedback/FeedbackAOI.js b/frontend/src/components/Layout/Feedback/FeedbackAOI.js
@@ -29,6 +29,7 @@ import AOIDetails from "./FeedbackAOIDetails";
 import AuthContext from "../../../Context/AuthContext";
 import FeedbackAOIDetails from "./FeedbackAOIDetails";
 import area from "@turf/area";
+import centroid from "@turf/centroid";
 const Demo = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
 }));
@@ -98,7 +99,7 @@ const FeedbackAOI = (props) => {
         console.log(res.error.response.statusText);
       } else {
         // success full fetch
-        props.refresh();
+        // props.setRefresh(Math.random());
         return res.data;
       }
     } catch (e) {
@@ -282,23 +283,11 @@ const FeedbackAOI = (props) => {
                           edge={"end"}
                           aria-label="delete"
                           onClick={(e) => {
-                            const lat =
-                              layer.latlngs.reduce(function (
-                                accumulator,
-                                curValue
-                              ) {
-                                return accumulator + curValue.lat;
-                              },
-                              0) / layer.latlngs.length;
-                            const lng =
-                              layer.latlngs.reduce(function (
-                                accumulator,
-                                curValue
-                              ) {
-                                return accumulator + curValue.lng;
-                              },
-                              0) / layer.latlngs.length;
-                            // [lat, lng] are the centroid of the polygon
+                            console.log("centroid(e)", centroid(layer));
+                            const cneter = centroid(layer);
+                            const lat = cneter.geometry.coordinates[1];
+                            const lng = cneter.geometry.coordinates[0];
+
                             props.selectAOIHandler([lat, lng], 17);
                           }}
                         >