apps/web/src/widgets/map3d/Map3D.tsx

@@ -289,7 +289,9 @@ function extractProjectionType(map: maplibregl.Map): MapProjectionId | undefined
 
 const DEG2RAD = Math.PI / 180;
 const RAD2DEG = 180 / Math.PI;
-const GLOBE_ICON_HEADING_OFFSET_DEG = -90;
+// ship.svg's native "up" direction is north (0deg),
+// so map icon rotation can use COG directly.
+const GLOBE_ICON_HEADING_OFFSET_DEG = 0;
 const MAP_SELECTED_SHIP_RGB: [number, number, number] = [34, 211, 238];
 const MAP_HIGHLIGHT_SHIP_RGB: [number, number, number] = [245, 158, 11];
 const MAP_DEFAULT_SHIP_RGB: [number, number, number] = [100, 116, 139];
@@ -5002,7 +5004,7 @@ export function Map3D({
             getIcon: () => "ship",
             getPosition: (d) => [d.lon, d.lat] as [number, number],
             getAngle: (d) =>
-              getDisplayHeading({
+              -getDisplayHeading({
                 cog: d.cog,
                 heading: d.heading,
               }),
@@ -5030,7 +5032,7 @@ export function Map3D({
             getIcon: () => "ship",
             getPosition: (d) => [d.lon, d.lat] as [number, number],
             getAngle: (d) =>
-              getDisplayHeading({
+              -getDisplayHeading({
                 cog: d.cog,
                 heading: d.heading,
               }),
@@ -5085,7 +5087,7 @@ export function Map3D({
             getIcon: () => "ship",
             getPosition: (d) => [d.lon, d.lat] as [number, number],
             getAngle: (d) =>
-              getDisplayHeading({
+              -getDisplayHeading({
                 cog: d.cog,
                 heading: d.heading,
               }),
@@ -5230,7 +5232,7 @@ export function Map3D({
           getIcon: () => "ship",
           getPosition: (d) => [d.lon, d.lat] as [number, number],
           getAngle: (d) =>
-            getDisplayHeading({
+            -getDisplayHeading({
               cog: d.cog,
               heading: d.heading,
             }),