Phase 2: MapLibre GL with OpenSeaMap navigation
- Integrated MapLibre GL for professional maritime mapping - Combined OSM base maps with OpenSeaMap layer for nautical overlays * Seamarks, buoys, channels, and depth information * Fully styled with MapLibre-compatible tiles - Created NavigationMap component with: * Real-time ship position marker with heading indicator * Automatic centering and smooth flyTo animations * Waypoint display with current waypoint highlighting * Ship track visualization (last 500 points, dashed line) * Route polyline showing waypoints - Professional map controls: * Zoom in/out buttons with smooth animations * Center-on-ship button for quick navigation * Info panel showing current position, heading, speed, distance * Glassmorphic info panel with dark/light mode support - Enhanced SignalK mock: * Added trackPoints array to record ship movement * Automatically maintains last 500 points for performance * Integrated with map for visual track history - Updated Navigation page to use new map - Build: 68 modules, 1.24 MB (343 KB gzipped) - Hot module reloading working smoothly Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -9,8 +9,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4",
|
||||
"maplibre-gl": "^5.21.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"react-leaflet": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
|
||||
Reference in New Issue
Block a user