expanded-map

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9} from "motion/react";
10import NextImage from "next/image";
11import type React from "react";
12import { useEffect, useMemo, useRef, useState } from "react";
13 
14interface LocationMapProps {
15  /** Location name to display */
16  location?: string;
17  /** Latitude coordinate */
18  latitude?: number;
19  /** Longitude coordinate */
20  longitude?: number;
21  /** Zoom level for the map (1-18) */
22  zoom?: number;
23  /** Additional CSS classes */
24  className?: string;
25  /** Map tile provider */
26  tileProvider?: "openstreetmap" | "carto-light" | "carto-dark";
27}
28 
29// Convert lat/lng to tile coordinates
30function latLngToTile(lat: number, lng: number, zoom: number) {
31  const n = 2 ** zoom;
32  const x = Math.floor(((lng + 180) / 360) * n);
33  const latRad = (lat * Math.PI) / 180;
34  const y = Math.floor(
35    ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n,
36  );
37  return { x, y };
38}
39 
40// Get tile URL based on provider
41function getTileUrl(provider: string, x: number, y: number, z: number) {
42  switch (provider) {
43    case "carto-light":
44      return `https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/${z}/${x}/${y}.png`;
45    case "carto-dark":
46      return `https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/${z}/${x}/${y}.png`;
47    default:
48      return `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
49  }
50}
51 
52// Format coordinates for display
53function formatCoordinates(lat: number, lng: number) {
54  const latDir = lat >= 0 ? "N" : "S";
55  const lngDir = lng >= 0 ? "E" : "W";
56  return `${Math.abs(lat).toFixed(4)}° ${latDir}, ${Math.abs(lng).toFixed(4)}° ${lngDir}`;
57}
58 
59export function LocationMap({
60  location = "San Francisco, CA",
61  latitude = 37.7749,
62  longitude = -122.4194,
63  zoom = 14,
64  className,
65  tileProvider = "carto-light",
66}: LocationMapProps) {
67  const [isHovered, setIsHovered] = useState(false);
68  const [isExpanded, setIsExpanded] = useState(false);
69  const [tilesLoaded, setTilesLoaded] = useState(false);
70  const containerRef = useRef<HTMLDivElement>(null);
71 
72  const mouseX = useMotionValue(0);
73  const mouseY = useMotionValue(0);
74 
75  const rotateX = useTransform(mouseY, [-50, 50], [8, -8]);
76  const rotateY = useTransform(mouseX, [-50, 50], [-8, 8]);
77 
78  const springRotateX = useSpring(rotateX, { stiffness: 300, damping: 30 });
79  const springRotateY = useSpring(rotateY, { stiffness: 300, damping: 30 });
80 
81  const coordinates = useMemo(
82// … truncated