Merge pull request #327 from hotosm/feat/orthophoto-display

feat: Implemented viewport-based tile loading for orthophotos.
hotosm · Nov 6, 2024 · 8c6f4f3 · 8c6f4f3
2 parents 694155a + 7a00b7a
commit 8c6f4f3
Showing 1 changed file with 45 additions and 4 deletions.
diff --git a/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx b/src/frontend/src/components/DroneOperatorTask/ModalContent/TaskOrthophotoPreview.tsx
@@ -51,6 +51,12 @@ const TaskOrthophotoPreview = () => {
     [projectId, taskId],
   );
 
+  useEffect(() => {
+    if (!map || !isMapLoaded || !taskOutline) return;
+    const { bbox } = taskOutline.properties;
+    map?.fitBounds(bbox as LngLatBoundsLike, { padding: 50, duration: 500 });
+  }, [map, isMapLoaded, taskOutline]);
+
   useEffect(() => {
     if (
       !map ||
@@ -61,11 +67,46 @@ const TaskOrthophotoPreview = () => {
       !taskOutline
     )
       return;
-    const { bbox } = taskOutline.properties;
-    map?.fitBounds(bbox as LngLatBoundsLike, { padding: 50, duration: 500 });
 
-    map.addSource('ortho-photo', orhtophotoSource.source);
-    map.addLayer(orhtophotoSource.layer);
+    // check if the map view intersects the bbox of task
+    function isInOrthophotoBoundsAndZoom() {
+      const bounds = map?.getBounds(); // Get the current map bounds (sw, ne)
+      const zoom = map?.getZoom();
+      if (!bounds || !zoom) return null;
+      const { bbox } = taskOutline.properties; // tasks bbox
+      return (
+        bounds.getWest() < bbox[2] &&
+        bounds.getEast() > bbox[0] &&
+        bounds.getNorth() > bbox[1] &&
+        bounds.getSouth() < bbox[3] &&
+        zoom > 12
+      );
+    }
+
+    function addOrthophotoLayerIfInBounds() {
+      if (!map || !orhtophotoSource) return;
+      if (isInOrthophotoBoundsAndZoom()) {
+        if (!map.getSource('ortho-photo')) {
+          map.addSource('ortho-photo', orhtophotoSource.source);
+          map.addLayer(orhtophotoSource.layer);
+        }
+      } else {
+        if (map.getLayer('ortho-photo')) {
+          map.removeLayer('ortho-photo');
+        }
+        if (map.getSource('ortho-photo')) {
+          map.removeSource('ortho-photo');
+        }
+      }
+    }
+
+    map.on('moveend', () => {
+      addOrthophotoLayerIfInBounds();
+    });
+
+    map.on('zoomend', () => {
+      addOrthophotoLayerIfInBounds();
+    });
   }, [map, isMapLoaded, projectId, taskId, orhtophotoSource, taskOutline]);
 
   useEffect(() => {