Analytics Map

1"use client";
2 
3import {
4  Map,
5  MapControls,
6  MapGeoJSON,
7  MapMarker,
8  MarkerContent,
9  MarkerTooltip,
10} from "@/components/ui/map";
11import { OverviewCard } from "./components/overview-card";
12import { BreakdownCard } from "./components/breakdown-card";
13import {
14  locations,
15  visitedPagesRows,
16  countriesRows,
17  referrersRows,
18  browsersRows,
19} from "./data";
20 
21const MAP_HEIGHT = "38rem";
22 
23// Country borders from a public CDN, or swap in your own GeoJSON.
24const WORLD_GEOJSON =
25  "https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson";
26 
27export default function Page() {
28  return (
29    <div
30      className="bg-background relative min-h-screen"
31      style={{ "--map-height": MAP_HEIGHT } as React.CSSProperties}
32    >
33      <div className="bg-card relative h-(--map-height)">
34        <Map
35          center={[-2, 16]}
36          zoom={1.4}
37          maxZoom={4}
38          minZoom={1.4}
39          scrollZoom={false}
40          dragRotate={false}
41          pitchWithRotate={false}
42          renderWorldCopies
43          blank
44        >
45          <MapGeoJSON data={WORLD_GEOJSON} linePaint={false} />
46          <MapControls className="bottom-2" />
47          {locations.map((location) => (
48            <MapMarker
49              key={location.city}
50              longitude={location.lng}
51              latitude={location.lat}
52            >
53              <MarkerContent className="group">
54                <div
55                  className="bg-chart-2/80 group-hover:bg-chart-2/90 rounded-full transition-[transform,background-color] group-hover:scale-110"
56                  style={{
57                    width: location.size * 3,
58                    height: location.size * 3,
59                  }}
60                />
61              </MarkerContent>
62              <MarkerTooltip
63                offset={20}
64                className="bg-popover text-popover-foreground border"
65              >
66                <p className="font-medium">{location.city}</p>
67                <p className="text-muted-foreground mt-0.5">
68                  {location.size} active users
69                </p>
70              </MarkerTooltip>
71            </MapMarker>
72          ))}
73        </Map>
74        <div
75          className="via-background/30 to-background pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-b from-transparent"
76          aria-hidden
77        />
78        <OverviewCard />
79      </div>
80 
81// … truncated