make polylines in the singapore mrt map easier to click

Signed-off-by: Vu Van Dung <[email protected]>
joulev · Jun 8, 2024 · 3b15b4a · 3b15b4a
1 parent 625ef26
commit 3b15b4a
Showing 1 changed file with 33 additions and 13 deletions.
diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx b/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx
@@ -64,6 +64,7 @@ function MapPolyline({
   sessionIndex: number;
 }) {
   const polylineRef = useRef<google.maps.Polyline | null>(null);
+  const clickedPolylineRef = useRef<google.maps.Polyline | null>(null);
 
   const { activeSession, setActiveSession, setPanelIsExpanded } = useActiveSession();
 
@@ -79,7 +80,7 @@ function MapPolyline({
   }, [setPanelIsExpanded, setActiveSession, lineIndex, sessionIndex]);
 
   const refreshStyling = useCallback(() => {
-    if (!polylineRef.current) return;
+    if (!polylineRef.current || !clickedPolylineRef.current) return;
     polylineRef.current.setOptions({
       strokeColor:
         isActive || isHover
@@ -89,28 +90,47 @@ function MapPolyline({
             : "#555555",
       zIndex:
         isActive || isHover
-          ? 9999
+          ? 8999
           : lineIsActive
-            ? 9997
+            ? 8997
             : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex],
       strokeOpacity: 1,
       strokeWeight: 2,
     });
+    clickedPolylineRef.current.setOptions({
+      strokeOpacity: 0,
+      strokeWeight: 10,
+      zIndex:
+        isActive || isHover
+          ? 9999
+          : lineIsActive
+            ? 9997
+            : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex],
+    });
   }, [isActive, isHover, lineIsActive, activeSession.lineIndex, lineIndex]);
 
   useEffect(() => refreshStyling(), [refreshStyling]);
 
   return (
-    <Polyline
-      onLoad={polyline => {
-        polylineRef.current = polyline;
-        refreshStyling();
-      }}
-      path={coordinates}
-      onMouseOver={onHoverEnter}
-      onMouseOut={onHoverLeave}
-      onClick={onClick}
-    />
+    <>
+      <Polyline
+        onLoad={polyline => {
+          polylineRef.current = polyline;
+          refreshStyling();
+        }}
+        path={coordinates}
+      />
+      <Polyline
+        onLoad={polyLine => {
+          clickedPolylineRef.current = polyLine;
+          refreshStyling();
+        }}
+        path={coordinates}
+        onMouseOver={onHoverEnter}
+        onMouseOut={onHoverLeave}
+        onClick={onClick}
+      />
+    </>
   );
 }