init
This commit is contained in:
richarjiang
136
components/map/continent-map.tsx
Normal file
136
components/map/continent-map.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import {
|
||||
ComposableMap,
|
||||
Geographies,
|
||||
Geography,
|
||||
ZoomableGroup,
|
||||
} from "react-simple-maps";
|
||||
import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
|
||||
import { HeatmapLayer } from "./heatmap-layer";
|
||||
import { geoMercator } from "d3-geo";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const GEO_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
|
||||
|
||||
interface ContinentConfig {
|
||||
center: [number, number];
|
||||
zoom: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const continentConfigs: Record<string, ContinentConfig> = {
|
||||
asia: { center: [100, 35], zoom: 2.5, label: "Asia" },
|
||||
europe: { center: [15, 52], zoom: 4, label: "Europe" },
|
||||
americas: { center: [-80, 15], zoom: 1.8, label: "Americas" },
|
||||
africa: { center: [20, 5], zoom: 2.2, label: "Africa" },
|
||||
oceania: { center: [145, -25], zoom: 3, label: "Oceania" },
|
||||
};
|
||||
|
||||
const continentRegionMap: Record<string, string> = {
|
||||
asia: "Asia",
|
||||
europe: "Europe",
|
||||
americas: "Americas",
|
||||
africa: "Africa",
|
||||
oceania: "Oceania",
|
||||
};
|
||||
|
||||
interface ContinentMapProps {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export function ContinentMap({ slug }: ContinentMapProps) {
|
||||
const config = continentConfigs[slug] ?? continentConfigs.asia;
|
||||
const regionFilter = continentRegionMap[slug];
|
||||
const { points } = useHeatmapData(30000);
|
||||
const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);
|
||||
|
||||
const filteredPoints = useMemo(
|
||||
() => (regionFilter ? points.filter(() => true) : points),
|
||||
[points, regionFilter]
|
||||
);
|
||||
|
||||
const projection = useMemo(
|
||||
() =>
|
||||
geoMercator()
|
||||
.center(config.center)
|
||||
.scale(150 * config.zoom)
|
||||
.translate([400, 300]),
|
||||
[config]
|
||||
);
|
||||
|
||||
const projectionFn = (coords: [number, number]): [number, number] | null => {
|
||||
const result = projection(coords);
|
||||
return result ?? null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
|
||||
<ComposableMap
|
||||
projection="geoMercator"
|
||||
projectionConfig={{
|
||||
center: config.center,
|
||||
scale: 150 * config.zoom,
|
||||
}}
|
||||
width={800}
|
||||
height={600}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
>
|
||||
<ZoomableGroup center={config.center} zoom={1}>
|
||||
<Geographies geography={GEO_URL}>
|
||||
{({ geographies }) =>
|
||||
geographies.map((geo) => (
|
||||
<Geography
|
||||
key={geo.rsmKey}
|
||||
geography={geo}
|
||||
fill="#1a1f2e"
|
||||
stroke="#2a3040"
|
||||
strokeWidth={0.5}
|
||||
style={{
|
||||
default: { outline: "none" },
|
||||
hover: { fill: "#242a3d", outline: "none" },
|
||||
pressed: { outline: "none" },
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Geographies>
|
||||
<HeatmapLayer
|
||||
points={filteredPoints}
|
||||
projection={projectionFn}
|
||||
onPointClick={setSelectedPoint}
|
||||
/>
|
||||
</ZoomableGroup>
|
||||
</ComposableMap>
|
||||
</div>
|
||||
|
||||
{selectedPoint && (
|
||||
<Card className="absolute bottom-4 left-4 z-10 w-64 border-[var(--accent-cyan)]/20">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
|
||||
{selectedPoint.city}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-muted)]">{selectedPoint.country}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedPoint(null)}
|
||||
className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Badge variant="online">{selectedPoint.lobsterCount} lobsters</Badge>
|
||||
<Badge variant="secondary">weight: {selectedPoint.weight.toFixed(1)}</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
components/map/heatmap-layer.tsx
Normal file
66
components/map/heatmap-layer.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import type { HeatmapPoint } from "@/hooks/use-heatmap-data";
|
||||
|
||||
interface HeatmapLayerProps {
|
||||
points: HeatmapPoint[];
|
||||
projection: (coords: [number, number]) => [number, number] | null;
|
||||
onPointClick?: (point: HeatmapPoint) => void;
|
||||
}
|
||||
|
||||
export function HeatmapLayer({ points, projection, onPointClick }: HeatmapLayerProps) {
|
||||
return (
|
||||
<g>
|
||||
{points.map((point, i) => {
|
||||
const coords = projection([point.lng, point.lat]);
|
||||
if (!coords) return null;
|
||||
const [x, y] = coords;
|
||||
const radius = Math.max(point.weight * 3, 4);
|
||||
|
||||
return (
|
||||
<g key={`${point.city}-${point.country}-${i}`}>
|
||||
{/* Glow */}
|
||||
<motion.circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius * 2}
|
||||
fill="rgba(0, 240, 255, 0.1)"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: [1, 1.3, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }}
|
||||
/>
|
||||
{/* Main dot */}
|
||||
<motion.circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius}
|
||||
fill="rgba(0, 240, 255, 0.6)"
|
||||
stroke="rgba(0, 240, 255, 0.8)"
|
||||
strokeWidth={1}
|
||||
className="cursor-pointer"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: i * 0.05 }}
|
||||
whileHover={{ scale: 1.5 }}
|
||||
onClick={() => onPointClick?.(point)}
|
||||
/>
|
||||
{/* Count label */}
|
||||
{point.lobsterCount > 1 && (
|
||||
<text
|
||||
x={x}
|
||||
y={y - radius - 4}
|
||||
textAnchor="middle"
|
||||
fill="#00f0ff"
|
||||
fontSize={9}
|
||||
fontFamily="var(--font-mono)"
|
||||
>
|
||||
{point.lobsterCount}
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user