-
-
- {savedTrack.filename || 'track'}
-
- {savedTrack.fileType.toUpperCase()}
- {savedTrack.waypoints.length > 0 && (
- <> · {savedTrack.waypoints.length} {t('logs.track_upload_points')}
- )}
- {trackDistanceNm && (
- <> · {trackDistanceNm} sm
- )}
- {trackSpeedMaxKn && (
- <> · max {trackSpeedMaxKn} kn
- )}
- {trackSpeedAvgKn && (
- <> · Ø {trackSpeedAvgKn} kn
- )}
-
-
-
-
- {!readOnly && (
+ <>
+
+
+
+ {savedTrack.filename || 'track'}
+
+ {savedTrack.fileType.toUpperCase()}
+ {savedTrack.waypoints.length > 0 && (
+ <> · {savedTrack.waypoints.length} {t('logs.track_upload_points')}
+ )}
+ {trackDistanceNm && (
+ <> · {trackDistanceNm} sm
+ )}
+ {trackSpeedMaxKn && (
+ <> · max {trackSpeedMaxKn} kn
+ )}
+ {trackSpeedAvgKn && (
+ <> · Ø {trackSpeedAvgKn} kn
+ )}
+
+
+
- )}
+ {!readOnly && (
+
+ )}
+
-
+
+ {savedTrack.waypoints.length > 0 && (
+
+ )}
+
)}
{(savedTrack || trackDistanceNm || trackSpeedMaxKn || trackSpeedAvgKn) && (
diff --git a/client/src/components/TrackMap.tsx b/client/src/components/TrackMap.tsx
new file mode 100644
index 0000000..0556a6d
--- /dev/null
+++ b/client/src/components/TrackMap.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import L from 'leaflet'
+import type { TrackWaypoint } from '../services/trackUpload.js'
+
+interface TrackMapProps {
+ waypoints: TrackWaypoint[]
+}
+
+export default function TrackMap({ waypoints }: TrackMapProps) {
+ const { t } = useTranslation()
+ const containerRef = useRef
(null)
+ const mapRef = useRef(null)
+ const layersRef = useRef<{
+ polyline: L.Polyline | null
+ start: L.CircleMarker | null
+ end: L.CircleMarker | null
+ }>({ polyline: null, start: null, end: null })
+
+ const waypointsKey = useMemo(
+ () => waypoints.map((wp) => `${wp.lat},${wp.lng}`).join('|'),
+ [waypoints]
+ )
+
+ useEffect(() => {
+ const container = containerRef.current
+ if (!container || mapRef.current) return
+
+ const map = L.map(container, {
+ zoomControl: true,
+ attributionControl: true
+ })
+ mapRef.current = map
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19,
+ attribution: '© OpenStreetMap contributors'
+ }).addTo(map)
+
+ L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ attribution: 'Map data © OpenSeaMap contributors'
+ }).addTo(map)
+
+ const resizeTimer = window.setTimeout(() => map.invalidateSize(), 150)
+
+ return () => {
+ window.clearTimeout(resizeTimer)
+ map.remove()
+ mapRef.current = null
+ layersRef.current = { polyline: null, start: null, end: null }
+ }
+ }, [])
+
+ useEffect(() => {
+ const map = mapRef.current
+ if (!map || waypoints.length === 0) return
+
+ const { polyline, start, end } = layersRef.current
+ polyline?.remove()
+ start?.remove()
+ end?.remove()
+
+ const latLngs = waypoints.map((wp) => [wp.lat, wp.lng] as [number, number])
+
+ const newPolyline = L.polyline(latLngs, {
+ color: '#fbbf24',
+ weight: 4,
+ opacity: 0.85
+ }).addTo(map)
+
+ const newStart = L.circleMarker(latLngs[0], {
+ radius: 8,
+ fillColor: '#10b981',
+ fillOpacity: 0.9,
+ color: '#ffffff',
+ weight: 2
+ })
+ .addTo(map)
+ .bindPopup(t('logs.track_map_start'))
+
+ let newEnd: L.CircleMarker | null = null
+ if (waypoints.length > 1) {
+ newEnd = L.circleMarker(latLngs[latLngs.length - 1], {
+ radius: 8,
+ fillColor: '#ef4444',
+ fillOpacity: 0.9,
+ color: '#ffffff',
+ weight: 2
+ })
+ .addTo(map)
+ .bindPopup(t('logs.track_map_end'))
+ }
+
+ layersRef.current = { polyline: newPolyline, start: newStart, end: newEnd }
+ map.fitBounds(newPolyline.getBounds(), { padding: [20, 20] })
+
+ const resizeTimer = window.setTimeout(() => map.invalidateSize(), 100)
+ return () => window.clearTimeout(resizeTimer)
+ }, [waypointsKey, waypoints, t])
+
+ if (!waypoints.length) return null
+
+ return (
+
+ )
+}
diff --git a/client/src/i18n/locales/de.json b/client/src/i18n/locales/de.json
index f1a2ac2..8049daf 100644
--- a/client/src/i18n/locales/de.json
+++ b/client/src/i18n/locales/de.json
@@ -169,6 +169,9 @@
"track_distance": "GPS-Strecke (sm)",
"track_speed_max": "Max. Geschwindigkeit (kn)",
"track_speed_avg": "Ø Geschwindigkeit (kn)",
+ "track_map_title": "GPS-Track auf OpenSeaMap",
+ "track_map_start": "Start",
+ "track_map_end": "Ziel",
"exporting": "Exportiere...",
"share_unsupported": "Teilen wird auf diesem Gerät nicht unterstützt. Datei wurde stattdessen heruntergeladen.",
"invite_crew": "Crew einladen",
diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json
index eccb6a3..61dcfbb 100644
--- a/client/src/i18n/locales/en.json
+++ b/client/src/i18n/locales/en.json
@@ -169,6 +169,9 @@
"track_distance": "GPS distance (nm)",
"track_speed_max": "Max speed (kn)",
"track_speed_avg": "Avg speed (kn)",
+ "track_map_title": "GPS track on OpenSeaMap",
+ "track_map_start": "Start",
+ "track_map_end": "End",
"exporting": "Exporting...",
"share_unsupported": "Web sharing is not supported on this device. File downloaded instead.",
"invite_crew": "Invite Crew",
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 5c1d867..706dea5 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,5 +1,6 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import 'leaflet/dist/leaflet.css'
import './index.css'
import App from './App.tsx'
import './i18n'
diff --git a/client/vite.config.ts b/client/vite.config.ts
index b1d267b..c59e065 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -23,6 +23,9 @@ export default defineConfig({
define: {
__APP_VERSION__: JSON.stringify(readAppVersion())
},
+ optimizeDeps: {
+ include: ['leaflet']
+ },
server: {
port: 5173,
proxy: {