@page-speed/maps 0.2.0 → 0.2.2

package/dist/components/geo-map.js

@@ -592,6 +592,19 @@ var PANEL_POSITION_CLASS = {
   "bottom-left": "bottom-4 left-4",
   "bottom-right": "bottom-4 right-4"
 };
+function getOptimalPanelPosition(markerLat, markerLng, mapCenter) {
+  const isNorth = markerLat >= mapCenter.latitude;
+  const isEast = markerLng >= mapCenter.longitude;
+  if (isNorth && isEast) {
+    return "bottom-left";
+  } else if (isNorth && !isEast) {
+    return "bottom-right";
+  } else if (!isNorth && isEast) {
+    return "top-left";
+  } else {
+    return "top-right";
+  }
+}
 var DEFAULT_VIEW_STATE = {
   latitude: 39.5,
   longitude: -98.35,
@@ -861,9 +874,16 @@ function GeoMap({
     const updateDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
-        setContainerDimensions({
-          width: rect.width || 800,
-          height: rect.height || calculatedHeight
+        setContainerDimensions((prev) => {
+          const newWidth = rect.width || 800;
+          const newHeight = rect.height || calculatedHeight;
+          if (prev.width === newWidth && prev.height === newHeight) {
+            return prev;
+          }
+          return {
+            width: newWidth,
+            height: newHeight
+          };
         });
       }
     };
@@ -997,6 +1017,10 @@ function GeoMap({
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
     zoom: defaultViewState?.zoom ?? calculatedZoom
   });
+  const [dynamicPanelPosition, setDynamicPanelPosition] = React3.useState(
+    panelPosition
+  );
+  const viewStateRef = React3.useRef(uncontrolledViewState);
   React3.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState({
@@ -1008,6 +1032,9 @@ function GeoMap({
   }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
   const isControlledViewState = viewState !== void 0;
   const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
+  React3.useEffect(() => {
+    viewStateRef.current = resolvedViewState || uncontrolledViewState;
+  }, [resolvedViewState, uncontrolledViewState]);
   const applyViewState = React3.useCallback(
     (nextState) => {
       if (!isControlledViewState) {
@@ -1076,6 +1103,17 @@ function GeoMap({
         markerId: marker.id,
         clusterId: marker.clusterId
       });
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
+      };
+      const optimalPosition = getOptimalPanelPosition(
+        marker.latitude,
+        marker.longitude,
+        center
+      );
+      setDynamicPanelPosition(optimalPosition);
       applyViewState({
         latitude: marker.latitude,
         longitude: marker.longitude,
@@ -1091,6 +1129,17 @@ function GeoMap({
         type: "cluster",
         clusterId: cluster.id
       });
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
+      };
+      const optimalPosition = getOptimalPanelPosition(
+        cluster.latitude,
+        cluster.longitude,
+        center
+      );
+      setDynamicPanelPosition(optimalPosition);
       applyViewState({
         latitude: cluster.latitude,
         longitude: cluster.longitude,
@@ -1385,7 +1434,7 @@ function GeoMap({
           {
             className: cn(
               "pointer-events-none absolute z-30",
-              PANEL_POSITION_CLASS[panelPosition]
+              PANEL_POSITION_CLASS[dynamicPanelPosition]
             ),
             style: {
               // Ensure panel can overflow and has higher z-index