init

components/route-map.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import "leaflet/dist/leaflet.css";
+import { MapContainer, Polyline, TileLayer, CircleMarker, useMap } from "react-leaflet";
+import type { RoutePoint } from "@/lib/models/running";
+
+type FitBoundsProps = { points: RoutePoint[] };
+
+function FitBounds({ points }: FitBoundsProps) {
+  const map = useMap();
+  map.fitBounds(points, { padding: [24, 24] });
+  return null;
+}
+
+type RouteMapProps = { points: RoutePoint[] };
+
+export function RouteMap({ points }: RouteMapProps) {
+  if (points.length === 0) return null;
+
+  const start = points[0];
+  const end = points[points.length - 1];
+
+  return (
+    <MapContainer
+      center={start}
+      zoom={13}
+      style={{ height: "100%", width: "100%", borderRadius: "inherit", background: "#2b2d42" }}
+      zoomControl={false}
+      attributionControl={false}
+    >
+      <TileLayer
+        url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+        subdomains="abcd"
+        maxZoom={19}
+      />
+      <FitBounds points={points} />
+      <Polyline
+        positions={points}
+        pathOptions={{ color: "#fb4617", weight: 3, opacity: 0.9 }}
+      />
+      <CircleMarker
+        center={start}
+        radius={6}
+        pathOptions={{ color: "#f7f3e9", fillColor: "#fb4617", fillOpacity: 1, weight: 2 }}
+      />
+      <CircleMarker
+        center={end}
+        radius={6}
+        pathOptions={{ color: "#f7f3e9", fillColor: "#2b2d42", fillOpacity: 1, weight: 2 }}
+      />
+    </MapContainer>
+  );
+}