From 27618ee31d617969da80332c2d5ea42a77d1b245 Mon Sep 17 00:00:00 2001
From: Will Enright <wenright0@gmail.com>
Date: Wed, 7 Aug 2024 23:44:34 -0500
Subject: [PATCH] null check projected coordinates for `Marker`s

This change hides markers that exist outside of the projection. Since the projection function can return null, attempting to destructure the result could throw an error.

This should resolve issues #282, #224, and #79
---
 src/components/Marker.js | 50 ++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/Marker.js b/src/components/Marker.js
index ed5dfaa..cb63cf5 100644
--- a/src/components/Marker.js
+++ b/src/components/Marker.js
@@ -24,7 +24,7 @@ const Marker = forwardRef(
     const [isPressed, setPressed] = useState(false)
     const [isFocused, setFocus] = useState(false)
 
-    const [x, y] = projection(coordinates)
+    const [x, y] = projection(coordinates) ?? [null, null]
 
     function handleMouseEnter(evt) {
       setFocus(true)
@@ -59,29 +59,33 @@ const Marker = forwardRef(
     }
 
     return (
-      <g
-        ref={ref}
-        transform={`translate(${x}, ${y})`}
-        className={`rsm-marker ${className}`}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        style={
-          style[
-            isPressed || isFocused
-              ? isPressed
-                ? "pressed"
-                : "hover"
-              : "default"
-          ]
+      <>
+        {x && y &&
+          <g
+            ref={ref}
+            transform={`translate(${x}, ${y})`}
+            className={`rsm-marker ${className}`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            style={
+              style[
+                isPressed || isFocused
+                  ? isPressed
+                    ? "pressed"
+                    : "hover"
+                  : "default"
+              ]
+            }
+            {...restProps}
+          >
+            {children}
+          </g>
         }
-        {...restProps}
-      >
-        {children}
-      </g>
+      </>
     )
   }
 )