From 6a8a20642cab592cf1709acc8d78d0b4d2144c5c Mon Sep 17 00:00:00 2001
From: rogup <rohit5.gup@gmail.com>
Date: Fri, 22 Nov 2024 17:15:15 +0000
Subject: [PATCH] [front-end] Toggle popup when marker clicked

---
 apps/front-end/src/components/map/mapLibre.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/front-end/src/components/map/mapLibre.ts b/apps/front-end/src/components/map/mapLibre.ts
index 71de548..517ab33 100644
--- a/apps/front-end/src/components/map/mapLibre.ts
+++ b/apps/front-end/src/components/map/mapLibre.ts
@@ -41,6 +41,11 @@ const openPopup = async (
   popupClosedCallback: () => void,
   offset?: [number, number],
 ) => {
+  if (popup?.isOpen() && popupIx === itemIx) {
+    console.log(`Popup for item @${itemIx} already open`);
+    return;
+  }
+
   console.log(`Open popup for item @${itemIx} ${coordinates}`);
 
   // Shift the popup up a bit so it doesn't cover the marker
@@ -250,6 +255,16 @@ export const createMap = (
         const coordinates = feature.geometry.coordinates.slice();
         const itemIx = feature.properties?.ix;
 
+        if (popup?.isOpen() && popupIx === itemIx) {
+          console.log(
+            `Popup for item @${itemIx} already open so toggle closed`,
+          );
+          popup?.remove();
+          popupIx = undefined;
+          popup = undefined;
+          return;
+        }
+
         // ease to a position so that the popup is fully visible
         map
           .easeTo({
@@ -339,6 +354,8 @@ export const createMap = (
       // Remove previous popup - remove listener to prevent looping back and confusing React code
       popup?.off("close", popupClosedCallback);
       popup?.remove();
+      popupIx = undefined;
+      popup = undefined;
       flyToThenOpenPopupRecursive();
     });