feat: show live vehicle position on departure details map

.env.example

@@ -19,4 +19,5 @@ NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=atb-mobility-platform-staging.firebaseapp.com
 NEXT_PUBLIC_FIREBASE_APP_ID="1:939812594010:web:0308b2a9cdc80b0d069363"
 
 API_BASE_URL=https://atb-staging.api.mittatb.no
-ENTUR_BASE_URL=https://api.staging.entur.io
+ENTUR_BASE_URL=https://api.staging.entur.io
+NEXT_PUBLIC_WS_API_BASE_URL=wss://atb-staging.api.mittatb.no

.github/workflows/docker.yml

@@ -20,6 +20,7 @@ jobs:
         ATB_NEXT_PUBLIC_FIREBASE_APP_ID=${{ github.event_name == 'release' && '1:827196677776:web:c4b1d8924bb5778bf50215' || '1:939812594010:web:0308b2a9cdc80b0d069363' }}
         ATB_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && '' || '' }}
         ATB_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://atb-prod.api.mittatb.no/bff' || 'https://atb-staging.api.mittatb.no/bff' }}
+        ATB_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://atb-prod.api.mittatb.no' || 'wss://atb-staging.api.mittatb.no' }}
         NFK_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT=67.280357
         NFK_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG=14.404916
         NFK_NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ github.event_name == 'release' && 'nfk-prod' || 'nfk-staging'}}
@@ -28,6 +29,7 @@ jobs:
         NFK_NEXT_PUBLIC_FIREBASE_APP_ID=${{ github.event_name == 'release' && '1:638315587956:web:51e95a11a03f27dc9ca421' || '1:793301954236:web:908723b8ded2824cadeab9' }}
         NFK_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && '' || '' }}
         NFK_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://nfk-prod.api.mittatb.no/bff' || 'https://nfk-staging.api.mittatb.no/bff' }}
+        NFK_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://nfk-prod.api.mittatb.no' || 'wss://nfk-staging.api.mittatb.no' }}
         FRAM_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT=62.4705
         FRAM_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG=6.1533
         FRAM_NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ github.event_name == 'release' && 'fram-prod-a7850' || 'fram-staging'}}
@@ -37,6 +39,7 @@ jobs:
         FRAM_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && 'G-KS45JBFWF4' || '' }}
         FRAM_NEXT_PUBLIC_CONTACT_API_URL=${{ github.event_name == 'release' && 'https://pureservice-connect-9ccec9fd5b4f.herokuapp.com' || 'https://pureservice-connect-staging-744284a2bb1b.herokuapp.com'}}
         FRAM_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://fram-prod.api.mittatb.no/bff' || 'https://fram-staging.api.mittatb.no/bff' }}
+        FRAM_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://fram-prod.api.mittatb.no' || 'wss://fram-staging.api.mittatb.no' }}
         TROMS_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT=69.665229
         TROMS_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG=18.9070347
         TROMS_NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ github.event_name == 'release' && 'troms-prod' || 'troms-staging'}}
@@ -45,6 +48,7 @@ jobs:
         TROMS_NEXT_PUBLIC_FIREBASE_APP_ID=${{ github.event_name == 'release' && '1:667141878008:web:b1a8f3e21716e96e954b0d' || '1:973624729382:web:a84d8a489613a14be12be7' }}
         TROMS_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && 'G-ZDRTXVTCQD' || '' }}
         TROMS_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://troms-prod.api.mittatb.no/bff' || 'https://troms-staging.api.mittatb.no/bff' }}
+        TROMS_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://troms-prod.api.mittatb.no' || 'wss://troms-staging.api.mittatb.no' }}
         VKT_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT=59.2676
         VKT_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG=10.4076
         VKT_NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ github.event_name == 'release' && 'vkt-prod' || 'vkt-staging'}}
@@ -53,6 +57,7 @@ jobs:
         VKT_NEXT_PUBLIC_FIREBASE_APP_ID=${{ github.event_name == 'release' && '1:49488006744:web:841bff9c5027e1ce6d442d' || '1:404908406633:web:1aea6ddfaab3f65727eff8' }}
         VKT_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && 'G-P644YTVLQS' || 'G-YM2VV1NXH0' }}
         VKT_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://vkt-prod.api.mittatb.no/bff' || 'https://vkt-staging.api.mittatb.no/bff' }}
+        VKT_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://vkt-prod.api.mittatb.no' || 'wss://vkt-staging.api.mittatb.no' }}
         FARTE_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT=59.2089
         FARTE_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG=9.6058
         FARTE_NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ github.event_name == 'release' && 'farte-prod' || 'farte-staging'}}
@@ -61,6 +66,7 @@ jobs:
         FARTE_NEXT_PUBLIC_FIREBASE_APP_ID=${{ github.event_name == 'release' && '1:944925576120:web:fba23d38e7de3d61a59d4d' || '1:779243067725:web:0675c351ed484c537bbf04' }}
         FARTE_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ github.event_name == 'release' && 'G-GSL7WE0NQL' || 'G-5V6FPCN5JF' }}
         FARTE_NEXT_PUBLIC_BFF_URL=${{ github.event_name == 'release' && 'https://farte-prod.api.mittatb.no/bff' || 'https://farte-staging.api.mittatb.no/bff' }}
+        FARTE_NEXT_PUBLIC_WS_API_BASE_URL=${{ github.event_name == 'release' && 'wss://farte-prod.api.mittatb.no' || 'wss://farte-staging.api.mittatb.no' }}
         NEXT_PUBLIC_ENVIRONMENT=${{ github.event_name == 'release' && 'prod' || 'staging' }}
     secrets:
       github_pat: ${{ secrets.GH_PAT }}

Dockerfile

@@ -27,6 +27,7 @@ ARG ATB_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG ATB_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG ATB_NEXT_PUBLIC_CONTACT_API_URL
 ARG ATB_NEXT_PUBLIC_BFF_URL
+ARG ATB_NEXT_PUBLIC_WS_API_BASE_URL
 
 ARG NFK_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT
 ARG NFK_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG
@@ -37,6 +38,7 @@ ARG NFK_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG NFK_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG NFK_NEXT_PUBLIC_CONTACT_API_URL
 ARG NFK_NEXT_PUBLIC_BFF_URL
+ARG NFK_NEXT_PUBLIC_WS_API_BASE_URL
 
 ARG FRAM_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT
 ARG FRAM_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG
@@ -47,6 +49,7 @@ ARG FRAM_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG FRAM_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG FRAM_NEXT_PUBLIC_CONTACT_API_URL
 ARG FRAM_NEXT_PUBLIC_BFF_URL
+ARG FRAM_NEXT_PUBLIC_WS_API_BASE_URL
 
 ARG TROMS_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT
 ARG TROMS_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG
@@ -57,6 +60,7 @@ ARG TROMS_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG TROMS_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG TROMS_NEXT_PUBLIC_CONTACT_API_URL
 ARG TROMS_NEXT_PUBLIC_BFF_URL
+ARG TROMS_NEXT_PUBLIC_WS_API_BASE_URL
 
 ARG VKT_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT
 ARG VKT_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG
@@ -67,6 +71,7 @@ ARG VKT_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG VKT_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG VKT_NEXT_PUBLIC_CONTACT_API_URL
 ARG VKT_NEXT_PUBLIC_BFF_URL
+ARG VKT_NEXT_PUBLIC_WS_API_BASE_URL
 
 ARG FARTE_NEXT_PUBLIC_MAPBOX_DEFAULT_LAT
 ARG FARTE_NEXT_PUBLIC_MAPBOX_DEFAULT_LNG
@@ -77,6 +82,7 @@ ARG FARTE_NEXT_PUBLIC_FIREBASE_APP_ID
 ARG FARTE_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ARG FARTE_NEXT_PUBLIC_CONTACT_API_URL
 ARG FARTE_NEXT_PUBLIC_BFF_URL
+ARG FARTE_NEXT_PUBLIC_WS_API_BASE_URL
 
 
 # Generate GraphQL files
@@ -96,6 +102,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$ATB_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$ATB_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$ATB_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$ATB_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$ATB_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=ATB_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=ATB_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \
@@ -120,6 +127,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$NFK_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$NFK_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$NFK_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$NFK_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$NFK_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=NFK_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=NFK_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \
@@ -144,6 +152,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$FRAM_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$FRAM_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$FRAM_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$FRAM_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$FRAM_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=FRAM_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=FRAM_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \
@@ -168,6 +177,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$TROMS_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$TROMS_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$TROMS_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$TROMS_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$TROMS_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=TROMS_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=TROMS_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \
@@ -192,6 +202,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$VKT_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$VKT_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$VKT_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$VKT_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$VKT_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=VKT_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=VKT_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \
@@ -216,6 +227,7 @@ ENV NEXT_PUBLIC_FIREBASE_APP_ID=$FARTE_NEXT_PUBLIC_FIREBASE_APP_ID
 ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=$FARTE_NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
 ENV NEXT_PUBLIC_CONTACT_API_URL=$FARTE_NEXT_PUBLIC_CONTACT_API_URL
 ENV NEXT_PUBLIC_BFF_URL=$FARTE_NEXT_PUBLIC_BFF_URL
+ENV NEXT_PUBLIC_WS_API_BASE_URL=$FARTE_NEXT_PUBLIC_WS_API_BASE_URL
 
 RUN --mount=type=secret,id=FARTE_NEXT_PUBLIC_MAPBOX_API_TOKEN \
   --mount=type=secret,id=FARTE_NEXT_PUBLIC_MAPBOX_STOP_PLACES_STYLE_URL \

src/components/map/map.tsx

@@ -25,11 +25,26 @@ import { useDarkMode } from '@atb/modules/theme';
 import useMediaQuery from '@atb/utils/user-media-query';
 import { logSpecificEvent } from '@atb/modules/firebase';
 import MapLoading from './map-loading';
+import { useLiveVehicle } from './use-live-vehicle';
+import { useMapFollow } from './use-map-follow';
+import type { VehicleWithPosition } from '@atb/page-modules/departures/client/vehicles';
+import type {
+  TransportMode,
+  TransportSubmode,
+} from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
+
+export type LiveVehicleProps = {
+  vehicle?: VehicleWithPosition;
+  isDisconnected: boolean;
+  mode?: TransportMode;
+  subMode?: TransportSubmode;
+};
 
 export type MapProps = {
   layer?: string;
   onSelectStopPlace?: (id: string) => void;
   interactive?: boolean;
+  liveVehicle?: LiveVehicleProps;
 } & (
   | { position?: PositionType; initialZoom?: number }
   | { mapLegs: MapLegType[] }
@@ -58,6 +73,7 @@ function MapWithStyle({
   layer,
   onSelectStopPlace,
   interactive = true,
+  liveVehicle,
   ...props
 }: MapProps & { mapboxJsonStyle: StyleSpecification }) {
   const mapContainer = useRef<HTMLDivElement>(null);
@@ -102,6 +118,16 @@ function MapWithStyle({
   useMapLegs(map, mapLegs);
   useMapFareZones(map);
   useNationalStopRegistryLayers(map);
+  const { onMarkerClick } = useMapFollow(map, liveVehicle?.vehicle, {
+    enabled: !!liveVehicle,
+  });
+  useLiveVehicle(map, {
+    vehicle: liveVehicle?.vehicle,
+    isDisconnected: liveVehicle?.isDisconnected ?? false,
+    mode: liveVehicle?.mode,
+    subMode: liveVehicle?.subMode,
+    onMarkerClick,
+  });
 
   return (
     <div className={style.map}>