From d6e3a6a3279d4da02293e1f1b8523d3015ac9948 Mon Sep 17 00:00:00 2001
From: christof-wittreich <christof.wittreich@nasa.gov>
Date: Mon, 16 Oct 2023 17:10:06 -0400
Subject: [PATCH] Added overlay removal by id

---
 web/js/map/natural-events/event-track.js | 13 +++++++++----
 web/js/map/natural-events/util.js        |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/js/map/natural-events/event-track.js b/web/js/map/natural-events/event-track.js
index c22878f5d6..3c606bde3c 100644
--- a/web/js/map/natural-events/event-track.js
+++ b/web/js/map/natural-events/event-track.js
@@ -23,10 +23,10 @@ import {
   getTrackLines, getTrackPoint, getArrows, getClusterPointEl,
 } from './util';
 
-const removePointOverlays = (map, pointsAndArrows) => {
+const removePointOverlays = (map, pointsAndArrows, overlayMapping) => {
   lodashEach(pointsAndArrows, (pointOverlay) => {
     if (map.getOverlayById(pointOverlay.getId())) {
-      map.removeOverlay(pointOverlay);
+      map.removeOverlay(overlayMapping[pointOverlay.getId()]);
     }
   });
 };
@@ -144,11 +144,16 @@ function EventTrack () {
   }, [showAllTracks]);
 
   const removeAllTracks = (mapArg) => {
+    const overlayMapping = {};
+    mapArg.getOverlays().forEach((overlay) => {
+      overlayMapping[overlay.getId()] = overlay;
+    });
+
     allTrackDetailsRef.current?.forEach((trackDetail) => {
       const { pointsAndArrows } = trackDetail.newTrackDetails;
       const { track } = trackDetail.newTrackDetails;
-      mapArg.removeOverlay(track);
-      removePointOverlays(mapArg, pointsAndArrows);
+      mapArg.removeOverlay(overlayMapping[track.id]);
+      removePointOverlays(mapArg, pointsAndArrows, overlayMapping);
     });
   };
 
diff --git a/web/js/map/natural-events/util.js b/web/js/map/natural-events/util.js
index 89180ee98b..b27569db0f 100644
--- a/web/js/map/natural-events/util.js
+++ b/web/js/map/natural-events/util.js
@@ -219,7 +219,7 @@ export const getTrackLines = function(map, trackCoords, eventID, date, callback,
     insertFirst: true,
     stopEvent: false,
     element: svgEl,
-    id: 'event-track',
+    id: `event-track-${eventID}`,
   });
 };