Map

1
import {
2
  Coordinate,
3
  Map,
4
  MapControlFullscreen,
5
  MapControlGroup,
6
  MapControlLocate,
7
  MapControlPitchDown,
8
  MapControlPitchUp,
9
  MapControlProjection,
10
  MapControlRotate,
11
  MapControls,
12
  MapControlZoomIn,
13
  MapControlZoomOut,
14
  MapCopyright,
15
  MapMarker,
16
  MapMarkerIcon,
17
  MapMarkerPopup,
18
  MapMarkers,
19
  MapProvider,
20
} from "@/components/ui/map";
21
 
22
export default function MapDemo() {
23
  return (
24
    <div className="aspect-video w-full">
25
      <MapProvider
26
        defaultCenter={{ latitude: 47.8053, longitude: 13.0414 }}
27
        defaultZoom={2.75}
28
        defaultProjection="mercator"
29
      >
30
        <Map className="rounded-xl">
31
          <MapControls align="bottom-right">
32
            <MapControlGroup>
33
              <MapControlZoomIn />
34
              <MapControlZoomOut />
35
            </MapControlGroup>
36
            <MapControlGroup>
37
              <MapControlPitchUp />
38
              <MapControlPitchDown />
39
              <MapControlRotate />
40
            </MapControlGroup>
41
            <MapControlGroup>
42
              <MapControlProjection />
43
              <MapControlLocate />
44
              <MapControlFullscreen />
45
            </MapControlGroup>
46
          </MapControls>
47
          <MapMarkers>
48
            {locations.map((l) => (
49
              <MapMarker key={l.id} coordinates={l.coords}>
50
                <MapMarkerIcon>
51
                  <div
52
                    className={cn(
53
                      "flex items-center justify-center relative size-6 rounded-full",
54
                      l.color,
55
                    )}
56
                  >
57
                    <MapPin className="size-5 text-white stroke-2.5" />
58
                  </div>
59
                </MapMarkerIcon>
60
                <MapMarkerPopup>
61
                  <Card className="relative mx-auto w-full min-w-2xs pt-0">
62
                    <div
63
                      className={cn(
64
                        "relative max-w-2xs aspect-video overflow-hidden",
65
                        l.color,
66
                      )}
67
                    >
68
                      <Image
69
                        width={1920}
70
                        height={1080}
71
                        src={`/assets/cities/${l.id}.webp`}
72
                        alt={l.title}
73
                        className="relative z-20 object-cover grayscale mix-blend-multiply m-0 rounded-none"
74
                      />
75
                    </div>
76
                    <CardHeader>
77
                      <CardTitle className="font-semibold">{l.title}</CardTitle>
78
                      <CardDescription>{l.description}</CardDescription>
79
                    </CardHeader>
80
                    <CardFooter>
81
                      <Button className="w-full">View</Button>
82
                    </CardFooter>
83
                  </Card>
84
                </MapMarkerPopup>
85
              </MapMarker>
86
            ))}
87
          </MapMarkers>
88
          <MapCopyright title="Nordaun" />
89
        </Map>
90
      </MapProvider>
91
    </div>
92
  );
93
}