mirror of
https://github.com/seemueller-io/yachtpit.git
synced 2025-09-08 22:46:45 +00:00
WIP: Enable dynamic AIS stream handling based on user location and map focus.
- Prevent AIS stream from starting immediately; start upon user interaction. - Add `ais_stream_started` state for WebSocket management. - Extend `useRealAISProvider` with `userLocationLoaded` and `mapFocused` to control stream. - Update frontend components to handle geolocation and map focus. - Exclude test files from compilation Introduce WebSocket integration for AIS services - Added WebSocket-based `useRealAISProvider` React hook for real-time AIS vessel data. - Created various tests including unit, integration, and browser tests to validate WebSocket functionality. - Added `ws` dependency to enable WebSocket communication. - Implemented vessel data mapping and bounding box handling for dynamic updates.
This commit is contained in:
42
crates/base-map/map/src/vessel-marker.tsx
Normal file
42
crates/base-map/map/src/vessel-marker.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import * as React from 'react';
|
||||
|
||||
interface VesselMarkerProps {
|
||||
size?: number;
|
||||
color?: string;
|
||||
heading?: number;
|
||||
}
|
||||
|
||||
const vesselStyle = {
|
||||
cursor: 'pointer',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2
|
||||
};
|
||||
|
||||
function VesselMarker({ size = 12, color = '#0066cc', heading = 0 }: VesselMarkerProps) {
|
||||
return (
|
||||
<svg
|
||||
height={size}
|
||||
width={size}
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
...vesselStyle,
|
||||
transform: `rotate(${heading}deg)`,
|
||||
transformOrigin: 'center'
|
||||
}}
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
fill={color}
|
||||
/>
|
||||
{/* Small arrow to indicate heading */}
|
||||
<path
|
||||
d="M12 4 L16 12 L12 10 L8 12 Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(VesselMarker);
|
Reference in New Issue
Block a user