@geops/rvf-mobility-web-component 0.1.83 → 0.1.85

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -35,8 +35,8 @@ export type MobilityMapAttributeName =
   | "layers"
   | "layersconfig"
   | "layertree"
+  | "lineid"
   | "lnp"
-  | "lnpid"
   | "mainlink"
   | "mainlinktitle"
   | "mapset"
@@ -52,6 +52,7 @@ export type MobilityMapAttributeName =
   | "mots"
   | "notification"
   | "notificationat"
+  | "notificationid"
   | "notificationtenant"
   | "notificationurl"
   | "permalink"
@@ -60,14 +61,17 @@ export type MobilityMapAttributeName =
   | "queryablelayers"
   | "realtime"
   | "realtimebboxparameters"
+  | "realtimeresturl"
   | "realtimetenant"
   | "realtimeurl"
   | "runs"
   | "search"
   | "share"
+  | "stationid"
   | "stopsurl"
   | "tenant"
   | "toolbar"
+  | "trainid"
   | "zoom";
 
 export type MobilityMapAttributes = Record<
@@ -165,16 +169,16 @@ where:
     public: true,
     type: "boolean",
   },
+  lineid: {
+    description: `An id or a short/long name of a line to highlight. <br/>Ex: S1`,
+    public: false,
+  },
   lnp: {
     defaultValue: "true",
     description: `Add the linesnetworkplans layer to the map. This layer will display lines network plans on the map.`,
     public: false,
     type: "boolean",
   },
-  lnpid: {
-    description: `An id or a short/long name of a line to highlight. <br/>Ex: S1`,
-    public: false,
-  },
   mainlink: {
     description:
       "A link displayed on bottom left of the map.  The link can be a template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#map/{{x}}/{{y}}/{{z}}.",
@@ -192,7 +196,7 @@ where:
   },
   mapsetplanid: {
     description:
-      "The id of the mapset plan to display. Mostly for debugging purposes.",
+      "An id of the mapset plan to display. Mostly for debugging purposes.",
     public: false,
   },
   mapsettags: {
@@ -206,7 +210,7 @@ where:
   },
   mapsettimestamp: {
     description: `The ${geopsMapsetApiLink} timestamp used to load valid standard plan. If not defined it will use the current time.`,
-    public: false,
+    public: true,
   },
   mapseturl: {
     defaultValue: "https://editor.mapset.io/api/v1/",
@@ -250,6 +254,10 @@ where:
       "An ISO date string used to display active notification at this date in the notification layer. If not defined the current date will be used.<br/>Ex: 2025-08-01T00:00:00Z .",
     public: false,
   },
+  notificationid: {
+    description: `An id of a notification to show details of.`,
+    public: false,
+  },
   notificationtenant: {
     defaultValue: "rvf",
     description: `The ${geopsMocoApiLink} tenant to get the notification from.`,
@@ -298,6 +306,11 @@ where:
       "A space separated list of parameters to add to the realtime BBOX request to define custom behavior.<br/>Ex: graph=XXX line_tags=XXX.",
     public: false,
   },
+  realtimeresturl: {
+    defaultValue: "https://api.geops.io/tracker-http/v1/",
+    description: `The ${geopsRealtimeApiLink} REST API url to use for fetching infos about realtime data.`,
+    public: false,
+  },
   realtimetenant: {
     description: `The ${geopsRealtimeApiLink} tenant to get the realtime data from.`,
     public: false,
@@ -326,6 +339,10 @@ where:
     public: true,
     type: "boolean",
   },
+  stationid: {
+    description: `An id or a short/long name of a station to show details of.`,
+    public: false,
+  },
   stopsurl: {
     defaultValue: "https://api.geops.io/stops/v1/",
     description: `The ${geopsStopsApiLink} to use.`,
@@ -341,6 +358,10 @@ where:
     public: true,
     type: "boolean",
   },
+  trainid: {
+    description: `An id of a route to highlight on the map and to show details of.`,
+    public: false,
+  },
   zoom: {
     description: "The zoom level of the map.",
     public: true,

package/src/NotificationDetails/NotificationDetails.tsx

@@ -9,6 +9,7 @@ import Warning from "../icons/Warning";
 import ShadowOverflow from "../ShadowOverflow";
 import Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
+import useMapContext from "../utils/hooks/useMapContext";
 import useMocoSituation from "../utils/hooks/useMocoSituation";
 
 import type {
@@ -36,18 +37,6 @@ const toShortDate = (date: Date, showTime, showYear?: boolean) => {
     .replace(/\.$/, "");
 };
 
-// const getLine = (name: string, lines: NotificationLine[]): NotificationLine => {
-//   if (lines?.length) {
-//     const line = lines.find((linee) => {
-//       return linee.name === name;
-//     });
-//     if (line) {
-//       return line;
-//     }
-//   }
-//   return { mot: "bus", name } as NotificationLine;
-// };
-
 export type NotificationLine = {
   mot?: RealtimeMot;
   operator_name?: string;
@@ -57,15 +46,14 @@ export type NotificationLine = {
 
 function NotificationDetails({
   className,
-  feature,
   ...props
 }: {
   className?: string;
   feature: Feature;
 }) {
   const { locale, t } = useI18n();
-  const { situationId } = feature.getProperties();
-  const situationParsed = useMocoSituation(situationId);
+  const { notificationId } = useMapContext();
+  const situationParsed = useMocoSituation(notificationId);
 
   // moco export v2
   let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
@@ -81,6 +69,17 @@ function NotificationDetails({
   // Find the current publication(s) at the current date
   publicationsToDisplay =
     publicationsArr?.filter(({ publicationWindows }) => {
+      // In some cases publicationWindows can be undefined here but defined at the
+      // root of the object so we apply the root publicationWindows to all publications with empty one
+      if (
+        !publicationWindows?.length &&
+        situationParsed?.publicationWindows?.length
+      ) {
+        // @ts-expect-error we should not set this value directly
+        // eslint-disable-next-line no-param-reassign
+        publicationWindows = situationParsed.publicationWindows;
+      }
+
       return publicationWindows.find(({ endTime, startTime }) => {
         const now = new Date();
         const startT = new Date(startTime);
@@ -209,13 +208,13 @@ function NotificationDetails({
                   },
                 )}
                 <div className={"my-4 flex flex-col gap-4"}>
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html:
-                        textualContent?.description ||
-                        t("no_details_available"),
-                    }}
-                  />
+                  {textualContent?.description && (
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: textualContent?.description,
+                      }}
+                    />
+                  )}
                   {!!textualContentMultilingual?.images?.length && (
                     <div className="flex flex-wrap gap-2">
                       {textualContentMultilingual.images.map(

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -1,6 +1,7 @@
 import { MocoLayer, type MocoLayerOptions } from "mobility-toolbox-js/ol";
+import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 
 import { LAYER_NAME_NOTIFICATIONS } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -9,6 +10,7 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
   const {
     apikey,
     baseLayer,
+    linesNetworkPlanLayer,
     map,
     notificationat,
     notificationtenant,
@@ -16,6 +18,9 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
     previewNotifications,
     setNotificationsLayer,
   } = useMapContext();
+  const [isLnpVisible, setIsLnpVisible] = useState(
+    !!linesNetworkPlanLayer?.getVisible(),
+  );
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -42,12 +47,12 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
     }
     return mocoLayer;
   }, [
-    apikey,
     baseLayer,
+    apikey,
     notificationat,
+    previewNotifications,
     notificationtenant,
     notificationurl,
-    previewNotifications,
     props,
   ]);
 
@@ -66,6 +71,45 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
     };
   }, [map, layer]);
 
+  // Watch lnp visibility
+  useEffect(() => {
+    const key = linesNetworkPlanLayer?.on("change:visible", () => {
+      const visible = linesNetworkPlanLayer.getVisible();
+      setIsLnpVisible(visible);
+    });
+    setIsLnpVisible(linesNetworkPlanLayer?.getVisible() || false);
+    return () => {
+      unByKey(key);
+    };
+  }, [linesNetworkPlanLayer]);
+
+  // Change the layersFilter based on lnp visibility
+  // Moco layers must de hidden by default otherwise, on load, everything is displayed
+  useEffect(() => {
+    if (!layer) {
+      return;
+    }
+    const visible = layer.getVisible();
+    if (visible) {
+      layer.setVisible(false);
+    }
+
+    if (isLnpVisible) {
+      layer.layersFilter = (layerSpec) => {
+        return layerSpec.metadata?.["general.filter"] === "moco.lnp";
+      };
+    } else {
+      layer.layersFilter = (layerSpec) => {
+        return layerSpec.metadata?.["general.filter"] === "moco";
+      };
+    }
+
+    layer.setVisible(visible);
+    return () => {
+      layer.applyLayoutVisibility();
+    };
+  }, [isLnpVisible, layer, linesNetworkPlanLayer]);
+
   return null;
 }
 

package/src/OverlayDetails/OverlayDetails.tsx

@@ -39,15 +39,19 @@ function OverlayDetails() {
     if (featuresInfo?.layer) {
       return featuresInfo.layer;
     }
+
     if (trainId) {
       return realtimeLayer;
     }
+
     if (stationId) {
       return stationsLayer;
     }
+
     if (linesIds) {
       return linesNetworkPlanLayer;
     }
+
     if (notificationId) {
       return notificationsLayer;
     }
@@ -63,6 +67,7 @@ function OverlayDetails() {
     linesNetworkPlanLayer,
     notificationsLayer,
   ]);
+
   return (
     <>
       <OverlayDetailsHeader

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -2,15 +2,18 @@ import {
   getGraphByZoom,
   RealtimeLayer as MtbRealtimeLayer,
 } from "mobility-toolbox-js/ol";
+import GeoJSON from "ol/format/GeoJSON";
 import { unByKey } from "ol/Observable";
+import { Vector } from "ol/source";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import centerOnVehicle from "../utils/centerOnVehicle";
 import { LAYER_NAME_REALTIME } from "../utils/constants";
 import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
-import getDelayFontForVehicle from "../utils/getDelayFontForVehicle";
 import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
+import getMainColorForVehicle from "../utils/getMainColorForVehicle";
+import getTextColorForVehicle from "../utils/getTextColorForVehicle";
 import getTextFontForVehicle from "../utils/getTextFontForVehicle";
 import getTextForVehicle from "../utils/getTextForVehicle";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -18,7 +21,6 @@ import useMapContext from "../utils/hooks/useMapContext";
 import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol/layers/RealtimeLayer";
 import type {
   RealtimeMot,
-  RealtimeStation,
   RealtimeTrainId,
   StyleMetadataGraphs,
 } from "mobility-toolbox-js/types";
@@ -26,6 +28,7 @@ import type {
 const TRACKING_ZOOM = 16;
 
 const useGraphs = true; //;window.location?.href?.includes("graphs=true");
+const geojson = new GeoJSON();
 
 function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
   const {
@@ -41,10 +44,6 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
     setIsFollowing,
     setIsTracking,
     setRealtimeLayer,
-    setStation,
-    setStopSequence,
-    stationId,
-    stopSequence,
     tenant,
     trainId,
   } = useMapContext();
@@ -74,16 +73,18 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
           }
         : undefined,
       isQueryable: true,
+      minZoom: 5, // It depends fo the radius mapping in realtimeStyleUtils
       name: LAYER_NAME_REALTIME,
       tenant,
       url: realtimeurl,
       zIndex: 1,
       ...props,
       styleOptions: {
+        getColor: getMainColorForVehicle,
         getDelayColor: getDelayColorForVehicle,
-        getDelayFont: getDelayFontForVehicle,
         getDelayText: getDelayTextForVehicle,
         getText: getTextForVehicle,
+        getTextColor: getTextColorForVehicle,
         getTextFont: getTextFontForVehicle,
         ...(props?.styleOptions || {}),
       },
@@ -114,10 +115,10 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
 
   // Behavior when vehicle is selected or not.
   useEffect(() => {
-    if (!stopSequence) {
+    if (!trainId) {
       setIsFollowing(false);
     }
-  }, [stopSequence, setIsFollowing]);
+  }, [trainId, setIsFollowing]);
 
   // Behavior when user tracking is activated or not.
   useEffect(() => {
@@ -152,11 +153,13 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
 
     if (layer) {
       layer.engine.useThrottle = !isFollowing;
+      // We deactivate the bbox on moveend when following to have smoother experience.
+      // The correct bbox will be set later by getting the full trajectory.
       layer.engine.isUpdateBboxOnMoveEnd = !isFollowing;
       // layer.useRequestAnimationFrame = isFollowing;
       layer.allowRenderWhenAnimating = !!isFollowing;
     }
-    if (!isFollowing || !stopSequence || !map || !layer) {
+    if (!isFollowing || !trainId || !map || !layer) {
       return;
     }
 
@@ -166,11 +169,29 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
       let vehicle = id && layer?.trajectories?.[id];
 
       if (!vehicle) {
-        const message = await layer.api.getTrajectory(
-          stopSequence.id,
+        const message = await layer.api.getTrajectory(trainId, layer.mode);
+        vehicle = message?.content;
+
+        // We get the fulltrajectory to set the api bbox correctly.
+        const fullMessage = await layer.api.getFullTrajectory(
+          trainId,
           layer.mode,
+          undefined,
         );
-        vehicle = message?.content;
+        if (fullMessage?.content) {
+          try {
+            const features = geojson.readFeatures(fullMessage.content);
+            const extent = new Vector({ features }).getExtent();
+            layer.api.bbox = [...extent, ...layer.api.bbox.slice(4)];
+          } catch (err) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              "Error parsing full trajectory feature:",
+              err,
+              fullMessage?.content,
+            );
+          }
+        }
       }
 
       const success = await centerOnVehicle(vehicle, map, TRACKING_ZOOM);
@@ -178,16 +199,19 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
       // Once the map is zoomed on the vehicle we follow him, only recenter , no zoom changes.
       if (success === true) {
         interval = setInterval(() => {
-          void centerOnVehicle(layer?.trajectories?.[stopSequence.id], map);
+          void centerOnVehicle(
+            layer?.trajectories?.[trainId],
+            map,
+            TRACKING_ZOOM,
+          );
         }, 1000);
       }
     };
-    void followVehicle(stopSequence.id);
-
+    void followVehicle(trainId);
     return () => {
       clearInterval(interval);
     };
-  }, [isFollowing, map, layer, stopSequence, setIsTracking]);
+  }, [isFollowing, map, layer, trainId, setIsTracking]);
 
   // DO NOT CENTER ON THE TRAIN
   // useEffect(() => {
@@ -200,26 +224,7 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
   //   }
   // }, [map, trainId, layer]);
 
-  // Ask the station using the stationId to the Realtime API.
-  useEffect(() => {
-    if (!stationId || !layer?.api) {
-      return;
-    }
-    layer?.api?.subscribe(`station ${stationId}`, ({ content }) => {
-      if (content) {
-        setStation(content as RealtimeStation);
-      }
-    });
-
-    return () => {
-      setStation(null);
-      if (stationId) {
-        layer?.api?.unsubscribe(`station ${stationId}`);
-      }
-    };
-  }, [stationId, layer?.api, setStation]);
-
-  // Subscribe to the stop sequence of the selected vehicle.
+  // Subscribe to the full trajectory of the selected vehicle.
   useEffect(() => {
     if (!trainId || !layer?.api) {
       return;
@@ -230,25 +235,14 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
       console.error("Error highlighting trajectory:", err);
     });
 
-    layer?.api?.subscribeStopSequence(trainId, ({ content }) => {
-      if (content) {
-        const [firstStopSequence] = content;
-        if (firstStopSequence) {
-          setStopSequence(firstStopSequence);
-        }
-      }
-    });
-
     return () => {
-      setStopSequence(null);
-      if (trainId && layer) {
-        layer.api?.unsubscribeStopSequence(trainId);
+      if (layer?.selectedVehicleId) {
         layer.api?.unsubscribeFullTrajectory(layer.selectedVehicleId);
         layer.selectedVehicleId = null;
         layer.vectorLayer.getSource().clear();
       }
     };
-  }, [trainId, layer, layer?.api, setStopSequence]);
+  }, [trainId, layer, layer?.api]);
 
   // Get graphs value
   useEffect(() => {

package/src/RouteIcon/RouteIcon.tsx

@@ -2,9 +2,10 @@ import { twMerge } from "tailwind-merge";
 
 import NoRealtime from "../icons/NoRealtime";
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
-import getTextColor from "../utils/getTextColor";
+import getTextColorForVehicle from "../utils/getTextColorForVehicle";
 import getTextFontForVehicle from "../utils/getTextFontForVehicle";
 import getTextForVehicle from "../utils/getTextForVehicle";
+import useMapContext from "../utils/hooks/useMapContext";
 
 import type {
   RealtimeDeparture,
@@ -14,11 +15,14 @@ import type {
 } from "mobility-toolbox-js/types";
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
+import type { LnpLineInfo } from "../utils/hooks/useLnp";
+
 export type RouteIconProps = {
   className?: string;
   departure?: RealtimeDeparture;
   displayNoRealtimeIcon?: boolean;
   line?: RealtimeLine;
+  lineInfo?: LnpLineInfo;
   stopSequence?: RealtimeStopSequence;
   trajectory?: RealtimeTrajectory;
 } & HTMLAttributes<HTMLSpanElement> &
@@ -31,33 +35,40 @@ function RouteIcon({
   departure,
   displayNoRealtimeIcon = false,
   line,
+  lineInfo,
   stopSequence,
   trajectory,
   ...props
 }: RouteIconProps) {
+  const { realtimeLayer } = useMapContext();
   const lineToUse =
     line ||
+    lineInfo ||
     departure?.line ||
     stopSequence?.line ||
     trajectory?.properties?.line;
-  const type = lineToUse?.type || stopSequence?.type || trajectory?.type;
-  const backgroundColor = getMainColorForVehicle(
-    line || departure || stopSequence || trajectory,
-  );
-  const color = lineToUse?.text_color || getTextColor(type);
-  let borderColor = lineToUse?.stroke || "black";
-  const text = getTextForVehicle(
-    line || departure || stopSequence || trajectory,
-  );
+  const trainId = stopSequence?.id || departure?.train_id;
+  const trajectoryToUse = trajectory || realtimeLayer?.trajectories[trainId];
+  const objectToUse =
+    line || lineInfo || departure || stopSequence || trajectory;
 
+  const backgroundColor = getMainColorForVehicle(objectToUse);
+  const color = getTextColorForVehicle(objectToUse);
+  const text = getTextForVehicle(objectToUse);
   const fontSize = fontSizesByNbLetters[text.length] || 12;
-  const font = getTextFontForVehicle(fontSize, text);
+  const font = getTextFontForVehicle(objectToUse, null, fontSize, text);
 
   // RealtimeIcon only for stopsequence for now
-  const hasRealtime = stopSequence?.has_realtime_journey === true;
-  const showNoRealtimeIcon = !!stopSequence;
+  const hasRealtime =
+    stopSequence?.has_realtime_journey ||
+    departure?.has_realtime_journey ||
+    trajectoryToUse?.properties?.has_realtime_journey ||
+    (stopSequence?.stations?.[0]?.state &&
+      stopSequence?.stations?.[0]?.state !== "TIME_BASED");
+  const showNoRealtimeIcon = !!stopSequence || !!departure || !!trajectoryToUse;
   const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
 
+  let borderColor = lineToUse?.stroke || "black";
   if (borderColor === backgroundColor) {
     borderColor = "black";
   }
@@ -81,7 +92,7 @@ function RouteIcon({
       {displayNoRealtimeIcon &&
         showNoRealtimeIcon &&
         !isCancelled &&
-        !hasRealtime && <NoRealtime className={"absolute -top-2 -left-2"} />}
+        !hasRealtime && <NoRealtime className={"absolute -top-3 -right-3"} />}
     </span>
   );
 }

package/src/RouteSchedule/RouteSchedule.tsx

@@ -7,15 +7,19 @@ import RouteScheduleHeader from "../RouteScheduleHeader";
 import RouteStop from "../RouteStop";
 import ShadowOverflow from "../ShadowOverflow";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRealtimeStopSequences from "../utils/hooks/useRealtimeStopSequences";
 
 import type { RealtimeStop } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RouteScheduleProps = JSX.HTMLAttributes<HTMLDivElement> &
+export type RouteScheduleProps = {
+  className?: string;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function RouteSchedule(props: RouteScheduleProps) {
-  const { stopSequence } = useMapContext();
+function RouteSchedule({ className }: RouteScheduleProps) {
+  const { trainId } = useMapContext();
+  const stopSequences = useRealtimeStopSequences(trainId);
   const ref = useRef();
 
   useEffect(() => {
@@ -38,17 +42,15 @@ function RouteSchedule(props: RouteScheduleProps) {
       clearTimeout(interval);
     };
     // Scroll automatically when a new scroll infos is set.
-  }, [stopSequence]);
+  }, [stopSequences]);
 
-  if (!stopSequence) {
+  if (!stopSequences?.[0]) {
     return null;
   }
-
-  const { className } = props;
-
+  const stopSequence = stopSequences[0];
   return (
     <>
-      <RouteScheduleHeader />
+      <RouteScheduleHeader stopSequence={stopSequence} />
       <ShadowOverflow>
         <div className={twMerge("text-base", className)} ref={ref}>
           {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
@@ -62,10 +64,11 @@ function RouteSchedule(props: RouteScheduleProps) {
                   (`${stationId}` || stationName) + arrivalTime + departureTime
                 }
                 stop={stop}
+                stopSequence={stopSequence}
               />
             );
           })}
-          <RouteScheduleFooter />
+          <RouteScheduleFooter stopSequence={stopSequence} />
         </div>
       </ShadowOverflow>
     </>

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -1,6 +1,6 @@
 import { memo } from "preact/compat";
 
-import useMapContext from "../utils/hooks/useMapContext";
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
 
 const defaultRenderLink = (text: string, url: string) => {
   return url ? (
@@ -17,8 +17,11 @@ const defaultRenderLink = (text: string, url: string) => {
   );
 };
 
-function RouteScheduleFooter() {
-  const { stopSequence } = useMapContext();
+function RouteScheduleFooter({
+  stopSequence,
+}: {
+  stopSequence: RealtimeStopSequence;
+}) {
   if (!stopSequence.operator && !stopSequence.publisher) {
     return null;
   }