@page-speed/maps 0.1.9 → 0.2.1

package/dist/index.js

@@ -749,6 +749,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,
@@ -991,6 +1004,13 @@ function GeoMap({
   IconComponent = FallbackIcon,
   ImgComponent = FallbackImg
 }) {
+  const containerRef = React3.useRef(null);
+  const [containerDimensions, setContainerDimensions] = React3.useState({
+    width: 800,
+    // Default width
+    height: 520
+    // Default height
+  });
   const [isMobile, setIsMobile] = React3.useState(false);
   React3.useEffect(() => {
     const checkMobile = () => {
@@ -1006,6 +1026,24 @@ function GeoMap({
     }
     return isMobile ? 420 : 520;
   }, [mapSize, isMobile]);
+  React3.useEffect(() => {
+    if (!containerRef.current) return;
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerDimensions({
+          width: rect.width || 800,
+          height: rect.height || calculatedHeight
+        });
+      }
+    };
+    updateDimensions();
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(updateDimensions);
+      resizeObserver.observe(containerRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, [calculatedHeight]);
   const normalizedStandaloneMarkers = React3.useMemo(
     () => markers.map((marker, index) => ({
       ...marker,
@@ -1089,47 +1127,49 @@ function GeoMap({
       longitude: DEFAULT_VIEW_STATE.longitude
     };
   }, [normalizedClusters, normalizedStandaloneMarkers]);
-  const calculatedZoom = React3.useMemo(() => {
-    if (normalizedStandaloneMarkers.length + normalizedClusters.length <= 1) {
-      return markerFocusZoom;
-    }
-    const allCoords = [];
+  const zoomCoordinates = React3.useMemo(() => {
+    const coords = [];
     normalizedStandaloneMarkers.forEach((marker) => {
-      allCoords.push({
-        latitude: marker.latitude,
-        longitude: marker.longitude
+      coords.push({
+        lat: marker.latitude,
+        lng: marker.longitude
       });
     });
     normalizedClusters.forEach((cluster) => {
-      allCoords.push({
-        latitude: cluster.latitude,
-        longitude: cluster.longitude
+      coords.push({
+        lat: cluster.latitude,
+        lng: cluster.longitude
       });
     });
-    if (allCoords.length === 0) {
+    return coords;
+  }, [normalizedStandaloneMarkers, normalizedClusters]);
+  const properZoom = useDefaultZoom({
+    coordinates: zoomCoordinates,
+    mapWidth: containerDimensions.width,
+    mapHeight: containerDimensions.height,
+    padding: 80,
+    // Increased padding for better framing
+    maxZoom: 18,
+    minZoom: 1
+  });
+  const calculatedZoom = React3.useMemo(() => {
+    if (zoomCoordinates.length === 1) {
+      return markerFocusZoom;
+    }
+    if (zoomCoordinates.length === 0) {
       return DEFAULT_VIEW_STATE.zoom;
     }
-    const lats = allCoords.map((c) => c.latitude);
-    const lngs = allCoords.map((c) => c.longitude);
-    const latDiff = Math.max(...lats) - Math.min(...lats);
-    const lngDiff = Math.max(...lngs) - Math.min(...lngs);
-    const maxDiff = Math.max(latDiff, lngDiff);
-    const heightFactor = calculatedHeight / 520;
-    const paddingFactor = 0.85;
-    if (maxDiff > 10) return Math.max(2, 3 * heightFactor * paddingFactor);
-    if (maxDiff > 5) return Math.max(4, 5 * heightFactor * paddingFactor);
-    if (maxDiff > 2) return Math.max(6, 7 * heightFactor * paddingFactor);
-    if (maxDiff > 1) return Math.max(8, 9 * heightFactor * paddingFactor);
-    if (maxDiff > 0.5) return Math.max(9, 10 * heightFactor * paddingFactor);
-    if (maxDiff > 0.1) return Math.max(11, 12 * heightFactor * paddingFactor);
-    if (maxDiff > 0.01) return Math.max(12, 13 * heightFactor * paddingFactor);
-    return Math.max(11, 12 * heightFactor * paddingFactor);
-  }, [normalizedClusters, normalizedStandaloneMarkers, markerFocusZoom, calculatedHeight]);
+    const adjustedZoom = properZoom ? properZoom - 0.5 : DEFAULT_VIEW_STATE.zoom;
+    return Math.min(adjustedZoom, 15);
+  }, [properZoom, zoomCoordinates.length, markerFocusZoom]);
   const [uncontrolledViewState, setUncontrolledViewState] = React3.useState({
     latitude: defaultViewState?.latitude ?? firstCoordinate.latitude,
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
     zoom: defaultViewState?.zoom ?? calculatedZoom
   });
+  const [dynamicPanelPosition, setDynamicPanelPosition] = React3.useState(
+    panelPosition
+  );
   React3.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState({
@@ -1209,6 +1249,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,
@@ -1216,7 +1269,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "marker", marker });
     },
-    [applyViewState, emitSelectionChange, markerFocusZoom]
+    [applyViewState, emitSelectionChange, markerFocusZoom, resolvedViewState, firstCoordinate]
   );
   const selectCluster = React3.useCallback(
     (cluster) => {
@@ -1224,6 +1277,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,
@@ -1231,7 +1297,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "cluster", cluster });
     },
-    [applyViewState, clusterFocusZoom, emitSelectionChange]
+    [applyViewState, clusterFocusZoom, emitSelectionChange, resolvedViewState, firstCoordinate]
   );
   const clearSelection = React3.useCallback(() => {
     setSelection({ type: "none" });
@@ -1450,6 +1516,7 @@ function GeoMap({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative rounded-2xl border border-border bg-background",
         // Remove overflow-hidden from outer container to allow panel to overflow
@@ -1517,7 +1584,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