Merge pull request #219 from aodn/bugs/5962-spider-error-in-console

Avoid console error with layer check
aodn · Nov 19, 2024 · e1b8446 · e1b8446
2 parents 4cf9f33 + 7932eb3
commit e1b8446
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/src/components/map/mapbox/component/SpatialExtents.tsx b/src/components/map/mapbox/component/SpatialExtents.tsx
@@ -171,13 +171,14 @@ const SpatialExtents: FC<SpatialExtentsProps> = ({
   );
 
   const onEmptySpaceClick = useCallback(
-    (ev: MapLayerMouseEvent) => {
+    (ev: MapLayerMouseEvent, layerIds: string[]) => {
       const point = map?.project(ev.lngLat);
 
       // Query for features at the clicked point, but only in the addedLayerIds
+      const validIds = layerIds.filter((id) => map?.getLayer(id));
       const features = point
         ? map?.queryRenderedFeatures(point, {
-            layers: addedLayerIds,
+            layers: validIds,
           })
         : [];
 
@@ -186,18 +187,20 @@ const SpatialExtents: FC<SpatialExtentsProps> = ({
         onDatasetSelected([]);
       }
     },
-    [map, addedLayerIds, onDatasetSelected]
+    [map, onDatasetSelected]
   );
 
   useEffect(() => {
+    const e = (ev: MapLayerMouseEvent) => onEmptySpaceClick(ev, addedLayerIds);
+
     map?.on("click", layerId, onPointClick);
-    map?.on("click", onEmptySpaceClick);
+    map?.on("click", e);
 
     return () => {
       map?.off("click", layerId, onPointClick);
-      map?.off("click", onEmptySpaceClick);
+      map?.off("click", e);
     };
-  }, [map, layerId, onPointClick, onEmptySpaceClick]);
+  }, [map, layerId, addedLayerIds, onPointClick, onEmptySpaceClick]);
 
   // Remove all layers and sources created by addSpatialExtentsLayer
   useEffect(() => {

diff --git a/src/components/map/mapbox/component/SpiderDiagram.tsx b/src/components/map/mapbox/component/SpiderDiagram.tsx
@@ -125,20 +125,18 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
       const spiderPinsLayerId = getSpiderPinsLayerId(clusterCircleId);
       const spiderLinesLayerId = getSpiderLinesLayerId(clusterCircleId);
 
-      // Remove layers
-      if (map?.getLayer(spiderPinsLayerId)) {
-        map.removeLayer(spiderPinsLayerId);
-      }
-      if (map?.getLayer(spiderLinesLayerId)) {
-        map.removeLayer(spiderLinesLayerId);
+      try {
+        map?.removeLayer(spiderPinsLayerId);
+        map?.removeSource(spiderPinsSourceId);
+      } catch (error) {
+        // Do nothing
       }
 
-      // Remove sources
-      if (map?.getSource(spiderPinsSourceId)) {
-        map.removeSource(spiderPinsSourceId);
-      }
-      if (map?.getSource(spiderLinesSourceId)) {
-        map.removeSource(spiderLinesSourceId);
+      try {
+        map?.removeLayer(spiderLinesLayerId);
+        map?.removeSource(spiderLinesSourceId);
+      } catch (error) {
+        // Do nothing
       }
 
       // Ensure the popup is removed when the spider diagram is unspiderified, even if the mouse hasn't moved.
@@ -350,16 +348,17 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
         if (currentCluster) {
           const spiderPinsLayerId = getSpiderPinsLayerId(currentCluster.id);
 
-          if (!map?.getLayer(spiderPinsLayerId)) return null;
-          const features = map?.queryRenderedFeatures(point, {
-            layers: [spiderPinsLayerId],
-          });
-
-          if (!features || features.length === 0) {
-            unspiderify(currentCluster.id);
-            return null;
-          } else {
-            return currentCluster;
+          if (map?.getLayer(spiderPinsLayerId)) {
+            const features = map?.queryRenderedFeatures(point, {
+              layers: [spiderPinsLayerId],
+            });
+
+            if (!features || features.length === 0) {
+              unspiderify(currentCluster.id);
+              return null;
+            } else {
+              return currentCluster;
+            }
           }
         }