From 1527d57d238e439e8eb5b6d67b4ef1c4269feaf2 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:01:40 +0800
Subject: [PATCH] allow popup freezing [#282] (#378)

* allow popup freezing [#282]

* formatting
---
 app/src/MaplibreMap.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
index 58c6e56..ec02aab 100644
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -33,6 +33,8 @@ const MapContainer = styled("div", {
 
 const PopupContainer = styled("div", {
   color: "black",
+  maxHeight: "400px",
+  overflowY: "scroll",
 });
 
 const FeatureRow = styled("div", {
@@ -344,6 +346,10 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
   const [layersVisibility, setLayersVisibility] = useState<LayerVisibility[]>(
     []
   );
+  const [popupFrozen, setPopupFrozen] = useState<boolean>(false);
+  const popupFrozenRef = useRef<boolean>();
+  popupFrozenRef.current = popupFrozen;
+
   const mapRef = useRef<maplibregl.Map | null>(null);
   const hoveredFeaturesRef = useRef<Set<MapGeoJSONFeature>>(new Set());
 
@@ -410,6 +416,9 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
     mapRef.current = map;
 
     map.on("mousemove", (e) => {
+      if (popupFrozenRef.current) {
+        return;
+      }
       const hoveredFeatures = hoveredFeaturesRef.current;
       for (const feature of hoveredFeatures) {
         map.setFeatureState(feature, { hover: false });
@@ -448,6 +457,10 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
       }
     });
 
+    map.on("click", (e) => {
+      setPopupFrozen((p) => !p);
+    });
+
     return () => {
       map.remove();
     };