@page-speed/maps 0.2.0 → 0.2.1

package/dist/components/geo-map.cjs

@@ -613,6 +613,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,
@@ -1018,6 +1031,9 @@ function GeoMap({
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
     zoom: defaultViewState?.zoom ?? calculatedZoom
   });
+  const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(
+    panelPosition
+  );
   React3__namespace.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState({
@@ -1097,6 +1113,19 @@ function GeoMap({
         markerId: marker.id,
         clusterId: marker.clusterId
       });
+      const currentCenter = resolvedViewState || {
+        latitude: firstCoordinate.latitude,
+        longitude: firstCoordinate.longitude
+      };
+      const optimalPosition = getOptimalPanelPosition(
+        marker.latitude,
+        marker.longitude,
+        {
+          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
+          longitude: currentCenter.longitude ?? firstCoordinate.longitude
+        }
+      );
+      setDynamicPanelPosition(optimalPosition);
       applyViewState({
         latitude: marker.latitude,
         longitude: marker.longitude,
@@ -1104,7 +1133,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "marker", marker });
     },
-    [applyViewState, emitSelectionChange, markerFocusZoom]
+    [applyViewState, emitSelectionChange, markerFocusZoom, resolvedViewState, firstCoordinate]
   );
   const selectCluster = React3__namespace.useCallback(
     (cluster) => {
@@ -1112,6 +1141,19 @@ function GeoMap({
         type: "cluster",
         clusterId: cluster.id
       });
+      const currentCenter = resolvedViewState || {
+        latitude: firstCoordinate.latitude,
+        longitude: firstCoordinate.longitude
+      };
+      const optimalPosition = getOptimalPanelPosition(
+        cluster.latitude,
+        cluster.longitude,
+        {
+          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
+          longitude: currentCenter.longitude ?? firstCoordinate.longitude
+        }
+      );
+      setDynamicPanelPosition(optimalPosition);
       applyViewState({
         latitude: cluster.latitude,
         longitude: cluster.longitude,
@@ -1119,7 +1161,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "cluster", cluster });
     },
-    [applyViewState, clusterFocusZoom, emitSelectionChange]
+    [applyViewState, clusterFocusZoom, emitSelectionChange, resolvedViewState, firstCoordinate]
   );
   const clearSelection = React3__namespace.useCallback(() => {
     setSelection({ type: "none" });
@@ -1406,7 +1448,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