Expanded Map

An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

by Md Shejan Mahamud Mahamud

import { LocationMap } from "@/components/ui/expanded-map";

export default function ExpandedMapZoomDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 p-12">
      <div className="flex flex-col items-center gap-2">
        <LocationMap
          location="Sydney, Australia"
          latitude={-33.8688}
          longitude={151.2093}
          zoom={10}
        />
        <span className="text-muted-foreground text-xs">Zoom: 10</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <LocationMap
          location="Sydney, Australia"
          latitude={-33.8688}
          longitude={151.2093}
          zoom={14}
        />
        <span className="text-muted-foreground text-xs">Zoom: 14</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <LocationMap
          location="Sydney, Australia"
          latitude={-33.8688}
          longitude={151.2093}
          zoom={17}
        />
        <span className="text-muted-foreground text-xs">Zoom: 17</span>
      </div>
    </div>
  );
}