@page-speed/maps 0.1.8 → 0.2.0

package/dist/components/index.js

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import React3__default from 'react';
+import React3__default, { useMemo } from 'react';
 import { Marker, Map as Map$1, GeolocateControl, NavigationControl } from 'react-map-gl/maplibre';
 
 // src/utils/cn.ts
@@ -637,6 +637,74 @@ function MapLibre({
     }
   );
 }
+var TILE_SIZE = 512;
+function latToMercatorY(lat) {
+  const latRad = lat * Math.PI / 180;
+  const mercN = Math.log(Math.tan(Math.PI / 4 + latRad / 2));
+  return TILE_SIZE / (2 * Math.PI) * (Math.PI - mercN);
+}
+function lngToMercatorX(lng) {
+  return TILE_SIZE / (2 * Math.PI) * ((lng + 180) / 360 * 2 * Math.PI);
+}
+function computeDefaultZoom(options) {
+  const {
+    coordinates,
+    mapWidth,
+    mapHeight,
+    padding = 50,
+    maxZoom = 18,
+    minZoom = 1
+  } = options;
+  if (coordinates.length === 0) return null;
+  if (coordinates.length === 1) return maxZoom;
+  if (mapWidth <= 0 || mapHeight <= 0) return null;
+  let minLat = Infinity;
+  let maxLat = -Infinity;
+  let minLng = Infinity;
+  let maxLng = -Infinity;
+  for (const coord of coordinates) {
+    if (coord.lat < minLat) minLat = coord.lat;
+    if (coord.lat > maxLat) maxLat = coord.lat;
+    if (coord.lng < minLng) minLng = coord.lng;
+    if (coord.lng > maxLng) maxLng = coord.lng;
+  }
+  const pixelXMin = lngToMercatorX(minLng);
+  const pixelXMax = lngToMercatorX(maxLng);
+  const pixelYMin = latToMercatorY(maxLat);
+  const pixelYMax = latToMercatorY(minLat);
+  const dx = Math.abs(pixelXMax - pixelXMin);
+  const dy = Math.abs(pixelYMax - pixelYMin);
+  const availableWidth = mapWidth - padding * 2;
+  const availableHeight = mapHeight - padding * 2;
+  if (availableWidth <= 0 || availableHeight <= 0) return minZoom;
+  let zoom;
+  if (dx === 0 && dy === 0) {
+    return maxZoom;
+  } else if (dx === 0) {
+    zoom = Math.log2(availableHeight / dy);
+  } else if (dy === 0) {
+    zoom = Math.log2(availableWidth / dx);
+  } else {
+    const zoomX = Math.log2(availableWidth / dx);
+    const zoomY = Math.log2(availableHeight / dy);
+    zoom = Math.min(zoomX, zoomY);
+  }
+  return Math.max(minZoom, Math.min(maxZoom, Math.floor(zoom * 100) / 100));
+}
+function useDefaultZoom(options) {
+  const { coordinates, mapWidth, mapHeight, padding, maxZoom, minZoom } = options;
+  return useMemo(
+    () => computeDefaultZoom({
+      coordinates,
+      mapWidth,
+      mapHeight,
+      padding,
+      maxZoom,
+      minZoom
+    }),
+    [coordinates, mapWidth, mapHeight, padding, maxZoom, minZoom]
+  );
+}
 var PANEL_POSITION_CLASS = {
   "top-left": "left-4 top-4",
   "top-right": "right-4 top-4",
@@ -881,9 +949,50 @@ function GeoMap({
   clearSelectionOnMapClick = true,
   mapChildren,
   optixFlowConfig,
+  mapSize,
   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 = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const calculatedHeight = React3.useMemo(() => {
+    if (mapSize) {
+      return isMobile ? mapSize.mobile : mapSize.desktop;
+    }
+    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,
@@ -967,39 +1076,41 @@ 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);
-    if (maxDiff > 10) return 3;
-    if (maxDiff > 5) return 5;
-    if (maxDiff > 2) return 7;
-    if (maxDiff > 1) return 9;
-    if (maxDiff > 0.5) return 10;
-    if (maxDiff > 0.1) return 12;
-    return 13;
-  }, [normalizedClusters, normalizedStandaloneMarkers, markerFocusZoom]);
+    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,
@@ -1325,25 +1436,35 @@ function GeoMap({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
-        "relative overflow-hidden rounded-2xl border border-border bg-background",
+        "relative rounded-2xl border border-border bg-background",
+        // Remove overflow-hidden from outer container to allow panel to overflow
         className
       ),
+      style: {
+        // If className includes height settings, they'll override via CSS specificity
+        height: className?.includes("h-[") || className?.includes("min-h-[") || className?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`,
+        // Explicitly allow overflow for marker panels
+        overflow: "visible"
+      },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "w-full",
-              // Default height, can be overridden by mapWrapperClassName
-              mapWrapperClassName || "h-[520px]"
+              "w-full rounded-2xl",
+              // Only apply default height class if mapWrapperClassName not provided
+              !mapWrapperClassName && `h-[${calculatedHeight}px]`,
+              mapWrapperClassName
             ),
             style: {
-              // CRITICAL: Always use explicit height to prevent MapLibre canvas expansion
-              height: mapWrapperClassName ? void 0 : "520px",
+              // If mapWrapperClassName includes height, let it handle the height
+              height: mapWrapperClassName?.includes("h-[") || mapWrapperClassName?.includes("min-h-[") || mapWrapperClassName?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`,
               maxHeight: "100vh",
               // Prevent excessive growth
               position: "relative",
+              // Keep overflow hidden only on the map wrapper to contain the canvas
               overflow: "hidden"
             },
             children: /* @__PURE__ */ jsx(
@@ -1369,6 +1490,10 @@ function GeoMap({
                 geolocateControlPosition,
                 flyToOptions,
                 className: cn("h-full w-full", mapClassName),
+                style: {
+                  // Pass the calculated height to MapLibre for better zoom calculations
+                  height: mapClassName?.includes("h-[") || mapClassName?.includes("min-h-[") || mapClassName?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`
+                },
                 children: mapChildren
               }
             )
@@ -1378,9 +1503,13 @@ function GeoMap({
           "div",
           {
             className: cn(
-              "pointer-events-none absolute z-20",
+              "pointer-events-none absolute z-30",
               PANEL_POSITION_CLASS[panelPosition]
             ),
+            style: {
+              // Ensure panel can overflow and has higher z-index
+              zIndex: 30
+            },
             children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: renderMarkerPanel() })
           }
         ) : null