@geops/rvf-mobility-web-component 0.1.42 → 0.1.44

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^2.5.2",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.1.1-beta.0",
+    "mobility-toolbox-js": "3.3.0-beta.32",
     "ol": "^10.3.1",
     "preact": "^10.25.4",
     "preact-custom-element": "^4.3.0",

package/src/MobilityMap/MobilityMap.tsx

@@ -51,7 +51,7 @@ export interface MobilityMapProps {
   notification?: string;
   notificationat?: string; // 2024-01-25T22:59:00Z
   notificationbeforelayerid?: string;
-  notificationurl?: string; // https://moco.geops.io/api/v1/export/notification/?sso_config=sob
+  notificationurl?: string; // https://moco.geops.io/api/v1/
   permalink?: string;
   realtime?: string;
   realtimeurl?: string;
@@ -75,7 +75,7 @@ function MobilityMap({
   notification = "true",
   notificationat = null,
   notificationbeforelayerid = null,
-  notificationurl = null,
+  notificationurl = "https://moco.geops.io/api/v1/",
   permalink = "false",
   realtime = "true",
   realtimeurl = "wss://api.geops.io/tracker-ws/v1/ws",

package/src/NotificationLayer/NotificationLayer.tsx

@@ -1,203 +1,23 @@
-import { FeatureCollection } from "geojson";
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { MocoLayer } from "mobility-toolbox-js/ol";
+import { MocoLayerOptions } from "mobility-toolbox-js/ol/layers/MocoLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
-import useZoom from "../utils/hooks/useZoom";
-import {
-  addNotificationsLayers,
-  getCurrentGraph,
-  getNotificationsWithStatus,
-  parsePreviewNotification,
-} from "./notificationUtils";
 
-type Graphs = Record<string, string>;
-
-interface Metadata {
-  graphs?: Graphs;
-}
-
-const useStyleName = (): string => {
-  const { baselayer } = useMapContext();
-  return baselayer;
-};
-
-const useStyleMetadata = (): Metadata => {
-  const { baseLayer } = useMapContext();
-  const [styleMetadata, setStyleMetadata] = useState<Metadata>();
-  useEffect(() => {
-    if (!baseLayer) {
-      return;
-    }
-    if (!baseLayer.loaded) {
-      // @ts-expect-error bad type definition
-      baseLayer.once("load", () => {
-        return setStyleMetadata(baseLayer.mapLibreMap?.getStyle()?.metadata);
-      });
-    } else {
-      setStyleMetadata(baseLayer.mapLibreMap?.getStyle()?.metadata);
-    }
-  }, [baseLayer]);
-  return styleMetadata;
-};
-
-const useGraphMapping = (
-  defaultMapping: Record<number, string> = { 1: "osm" },
-): Record<number, string> => {
-  const styleMetadata = useStyleMetadata();
-  const graphMapping = useMemo(() => {
-    return styleMetadata?.graphs || defaultMapping;
-  }, [defaultMapping, styleMetadata?.graphs]);
-  return graphMapping;
-};
-
-const useNotifications = (): FeatureCollection => {
-  const { notificationat, notificationurl } = useMapContext();
-  const [notifications, setNotifications] = useState([]);
-  const [previewNotification, setPreviewNotification] = useState(null);
-  const [shouldAddPreviewNotifications, setShouldAddPreviewNotifications] =
-    useState<boolean>(true);
-
-  const styleName = useStyleName();
-  const graphMapping = useGraphMapping();
-
-  const now = useMemo(() => {
-    return notificationat ? new Date(notificationat) : new Date();
-  }, [notificationat]);
-
-  const graphsString = useMemo(() => {
-    return [...new Set(Object.values(graphMapping))].join(",");
-  }, [graphMapping]);
-
-  useEffect(() => {
-    // Listen for incoming messages through the MOCO iframe
-    window.addEventListener("message", (event) => {
-      if (event.data.notification) {
-        setPreviewNotification(event.data.notification);
-        setShouldAddPreviewNotifications(true);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    let abortCtrl: AbortController;
-
-    // Fetch the main MOCO notifications
-    const fetchNotifications = async () => {
-      const suffix = /\?/.test(notificationurl) ? "&" : "?";
-      const url = `${notificationurl}${suffix}graph=${graphsString}`;
-
-      abortCtrl?.abort();
-      abortCtrl = new AbortController();
-      const response = await fetch(url, { signal: abortCtrl.signal });
-      const data = await response.json();
-
-      const notifications = getNotificationsWithStatus(data, now);
-      setNotifications(notifications);
-      setShouldAddPreviewNotifications(true);
-    };
-
-    if (notificationurl && graphsString) {
-      fetchNotifications();
-    }
-
-    return () => {
-      abortCtrl?.abort();
-    };
-  }, [notificationurl, graphsString, now]);
-
-  useEffect(() => {
-    // Merge notifications with the previewNotification
-    const newNotifications = [...notifications];
-    const notifByStyle = previewNotification?.[styleName];
-
-    if (shouldAddPreviewNotifications && notifByStyle) {
-      const parsedPreviewNotification = parsePreviewNotification(notifByStyle);
-      const index = newNotifications.findIndex((n) => {
-        return n.properties.id === notifByStyle.id;
-      });
-
-      if (index > -1) {
-        newNotifications[index] = parsedPreviewNotification;
-      } else {
-        newNotifications.push(parsedPreviewNotification);
-      }
-
-      setNotifications(getNotificationsWithStatus(newNotifications, now));
-      setShouldAddPreviewNotifications(false);
-    }
-  }, [
-    previewNotification,
-    notifications,
-    shouldAddPreviewNotifications,
-    styleName,
-    now,
-  ]);
-
-  if (previewNotification?.id) {
-    const index = notifications.findIndex((n) => {
-      return n.properties.id === previewNotification.id;
-    });
-    if (index > -1) {
-      notifications[index].isPreview = true;
-      notifications[index].features.forEach((feature) => {
-        feature.properties.isPreview = true;
-      });
-    }
-  }
-
-  const features =
-    notifications
-      ?.map((notification) => {
-        return notification.features;
-      })
-      .flat() || [];
-
-  return {
-    features: features,
-    type: "FeatureCollection",
-  };
-};
-
-export default function NotificationLayer(props: MaplibreStyleLayerOptions) {
-  const notifications = useNotifications();
-  const { baseLayer, map, notificationbeforelayerid } = useMapContext();
-  const graphMapping = useGraphMapping();
-  const zoom = useZoom();
+function NotificationLayer(props: MocoLayerOptions) {
+  const { apikey, baseLayer, map } = useMapContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
-    return new MaplibreStyleLayer({
-      beforeId: notificationbeforelayerid,
-      isQueryable: true,
-      layersFilter: ({ metadata }) => {
-        return metadata?.["general.filter"] === "notifications";
-      },
+    return new MocoLayer({
+      apiKey: apikey,
       maplibreLayer: baseLayer,
       ...(props || {}),
     });
-  }, [baseLayer, notificationbeforelayerid, props]);
-
-  // Update data and style layers
-  useEffect(() => {
-    if (!baseLayer || !graphMapping) {
-      return null;
-    }
-    const graph = getCurrentGraph(graphMapping, zoom);
-    if (!graph) {
-      return null;
-    }
-    addNotificationsLayers(
-      baseLayer,
-      "notifications",
-      notifications,
-      notificationbeforelayerid,
-      graph,
-    );
-  }, [baseLayer, graphMapping, notificationbeforelayerid, notifications, zoom]);
+  }, [apikey, baseLayer, props]);
 
   useEffect(() => {
     if (!map || !layer) {
@@ -212,3 +32,5 @@ export default function NotificationLayer(props: MaplibreStyleLayerOptions) {
 
   return null;
 }
+
+export default memo(NotificationLayer);

package/src/RouteStopTime/RouteStopTime.tsx

@@ -15,14 +15,14 @@ function RouteStopTime(props: RouteStopTimeProps) {
   return (
     <div {...props}>
       <span
-        className={`${isCancelled ? "text-red-600 line-through" : ""} ${
+        className={`${isCancelled ? "text-darkred line-through" : ""} ${
           isFirst ? "hidden" : ""
         }`}
       >
         {getHoursAndMinutes(aimedArrivalTime)}
       </span>
       <span
-        className={`${status.isCancelled ? "text-red-600 line-through" : ""} ${
+        className={`${status.isCancelled ? "text-darkred line-through" : ""} ${
           isLast ? "hidden" : ""
         }`}
       >

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -4,7 +4,7 @@ import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
 import RvfLineNetworkDetails from "./RvfLineNetworkDetails/RvfLineNetworkDetails";
-import RvfNotificationDetails from "./RvfNotificationDetails";
+// import RvfNotificationDetails from "./RvfNotificationDetails";
 import RvfSellingPointDetails from "./RvfSellingPointDetails";
 import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
@@ -25,7 +25,7 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature, selectedFeatures } = useRvfContext();
   const isSharedMobility = getIsSharedMobility(selectedFeature);
   const isSellingPoint = !!selectedFeature.get("tickets");
-  const isNotification = !!selectedFeature.get("disruption_type");
+  const isNotification = !!selectedFeature.get("severity");
   const isLineNetwork = !!selectedFeature.get("original_line_id");
 
   const showDefaultData = () => {
@@ -49,7 +49,8 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
       {isSharedMobility && (
         <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
       )}
-      {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
+      {isNotification && null}
+      {/* <RvfNotificationDetails feature={selectedFeature} />} */}
       {isLineNetwork && (
         <RvfLineNetworkDetails
           feature={selectedFeature}

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -52,6 +52,10 @@ function RvfLineNetworkDetails({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
 
+  const isRunsDisplay = useMemo(() => {
+    return new URLSearchParams(window.location.search).get("runs") === "true";
+  }, []);
+
   useEffect(() => {
     const source = baseLayer?.mapLibreMap?.getSource(
       LNP_SOURCE_ID,
@@ -117,7 +121,7 @@ function RvfLineNetworkDetails({
     const byLineId = {};
     features.forEach((f) => {
       const lineId = f.get(ORIGINAL_LINE_ID_PROP);
-      if (lineId && !byLineId[lineId]) {
+      if (lineId && !byLineId[lineId] && f.get("stop_ids")) {
         try {
           byLineId[lineId] = JSON.parse(f.get("stop_ids"));
         } catch (e) {
@@ -158,7 +162,7 @@ function RvfLineNetworkDetails({
                     // external_id,
                     long_name,
                     mot,
-                    // runs,
+                    runs,
                     short_name: shortName,
                     text_color: textColor,
                   } = lineInfo;
@@ -218,7 +222,9 @@ function RvfLineNetworkDetails({
                         {!!longName && (
                           <div className={"flex-1 text-left"}>{longName}</div>
                         )}
-                        {/* <div className={"text-xs"}>{runs}</div> */}
+                        {isRunsDisplay && (
+                          <div className={"text-xs"}>{runs}</div>
+                        )}
 
                         {!!stops && (
                           <button className={"shrink-0"}>

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -23,7 +23,7 @@ const toShortDate = (date, showTime) => {
 };
 
 let rvfLines = null;
-fetch("https://tralis-tracker-api.dev.geops.io/api/lines/rvf/")
+fetch("https://tralis-tracker-api.geops.io/api/lines/rvf/")
   .then((res) => {
     return res.json();
   })

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -3,7 +3,9 @@ import {
   MaplibreStyleLayer,
   RealtimeLayer as MbtRealtimeLayer,
 } from "mobility-toolbox-js/ol";
+import { MocoLayerOptions } from "mobility-toolbox-js/ol/layers/MocoLayer";
 import {
+  MocoNotification,
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
@@ -35,7 +37,7 @@ import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
 import RvfFloatingMenu from "../RvfFloatingMenu";
 import RvfLayerTreeButton from "../RvfLayerTreeButton";
-// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
+// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fpublication%2F%3Fsso_config%3Drvf&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
 import RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
 import Modal from "../RvfModal";
 import RvfOverlayHeader from "../RvfOverlayHeader";
@@ -108,6 +110,7 @@ const realtimeLayerProps = {
   bboxParameters: {
     line_tags: "RVF",
   },
+
   fullTrajectoryStyle: fullTrajectoryStyle,
   getMotsByZoom: (z) => {
     if (z < 9) {
@@ -152,7 +155,7 @@ const realtimeLayerProps = {
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   // baselayer = "review-geops-tgma-085vyz.de.rvf",
-  baselayer = "de.rvf",
+  baselayer = "de.rvf_moco",
   center = null,
   details = "true",
   embed = "false",
@@ -167,10 +170,10 @@ function RvfMobilityMap({
   maxzoom = "20",
   minzoom = null,
   mots = null,
-  notification = "true",
-  notificationat = null,
+  notification = "false",
+  notificationat = null, //"2025-09-10T00:00:00Z",
   notificationbeforelayerid = null,
-  notificationurl = null,
+  notificationurl = "https://moco.geops.io/api/v1/",
   permalink = "false",
   print = "true",
   realtime = "true",
@@ -207,6 +210,9 @@ function RvfMobilityMap({
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
 
+  const [previewNotification, setPreviewNotification] =
+    useState<MocoNotification[]>();
+
   // Convert string boolean to boolean
   const hasToolbar = useMemo(() => {
     return toolbar === "true";
@@ -221,8 +227,8 @@ function RvfMobilityMap({
   }, [realtime]);
 
   const hasNotification = useMemo(() => {
-    return notification === "true";
-  }, [notification]);
+    return notification === "true" || !!previewNotification;
+  }, [notification, previewNotification]);
 
   const hasGeolocation = useMemo(() => {
     return geolocation === "true";
@@ -278,12 +284,14 @@ function RvfMobilityMap({
       notificationbeforelayerid,
       notificationurl,
       permalink,
+      previewNotification,
       realtimeLayer,
       realtimeurl,
       setBaseLayer,
       setIsFollowing,
       setIsTracking,
       setMap,
+      setPreviewNotification,
       setRealtimeLayer,
       setStation,
       setStationId,
@@ -308,10 +316,10 @@ function RvfMobilityMap({
     geolocation,
     isFollowing,
     isTracking,
+    layers,
     map,
     mapsurl,
     maxextent,
-    layers,
     maxzoom,
     minzoom,
     mots,
@@ -320,6 +328,7 @@ function RvfMobilityMap({
     notificationbeforelayerid,
     notificationurl,
     permalink,
+    previewNotification,
     realtimeLayer,
     realtimeurl,
     station,
@@ -398,6 +407,7 @@ function RvfMobilityMap({
       layertree,
       lineNetworkPlanLayer,
       poisLayer,
+      previewNotification,
       selectedFeature,
       selectedFeatures,
       sellingPointsLayer,
@@ -416,11 +426,12 @@ function RvfMobilityMap({
     };
   }, [
     isExportMenuOpen,
-    layertree,
     isLayerTreeOpen,
     isShareMenuOpen,
+    layertree,
     lineNetworkPlanLayer,
     poisLayer,
+    previewNotification,
     selectedFeature,
     selectedFeatures,
     sellingPointsLayer,
@@ -440,11 +451,20 @@ function RvfMobilityMap({
     return {
       format: (copyrights) => {
         const newCopyrights = [];
+        let alreadyAGeopsLink = false;
         copyrights.forEach((copyright) => {
-          if (!/(sbb|rvf)/i.test(copyright)) {
+          if (/geops/i.test(copyright)) {
+            // Hack until all geOps tiles are the same
+            // Currently there is some geops.com or geops.ch links
+            if (!alreadyAGeopsLink) {
+              alreadyAGeopsLink = true;
+              newCopyrights.push(copyright);
+            }
+          } else if (!/(sbb|rvf)/i.test(copyright)) {
             newCopyrights.push(copyright);
           }
         });
+
         return newCopyrights.join("&nbsp;|&nbsp;");
       },
     };
@@ -458,6 +478,19 @@ function RvfMobilityMap({
     };
   }, []);
 
+  const notificationsLayerProps: MocoLayerOptions = useMemo(() => {
+    return {
+      // beforeId: notificationbeforelayerid,
+      apiKey: apikey,
+      date: notificationat ? new Date(notificationat) : undefined,
+      isQueryable: true,
+      notifications: previewNotification,
+      tenant: "rvf",
+      title: RVF_LAYERS_TITLES.meldungen,
+      url: notificationurl,
+    };
+  }, [apikey, notificationat, notificationurl, previewNotification]);
+
   useEffect(() => {
     if (hasToolbar && isLayerTreeOpen) {
       setIsExportMenuOpen(false);
@@ -520,6 +553,15 @@ function RvfMobilityMap({
     }
   }, [isShareMenuOpen, hasToolbar]);
 
+  useEffect(() => {
+    window.addEventListener("message", (event) => {
+      console.log("Received message from parent:", event.data);
+      if (event.data.notification) {
+        setPreviewNotification([event.data.notification]);
+      }
+    });
+  }, []);
+
   return (
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
@@ -537,6 +579,10 @@ function RvfMobilityMap({
                 <SingleClickListener />
                 {isEmbed && <RvfEmbedNavigation />}
 
+                {hasNotification && (
+                  <NotificationLayer {...notificationsLayerProps} />
+                )}
+
                 <RvfSelectedFeatureHighlightLayer />
 
                 {hasRealtime && (
@@ -551,7 +597,6 @@ function RvfMobilityMap({
                   title={RVF_LAYERS_TITLES.haltestellen}
                   {...stationsLayerProps}
                 />
-                {hasNotification && <NotificationLayer />}
                 <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
                 <RvfSellingPointsLayer
                   isQueryable={true}
@@ -625,17 +670,19 @@ function RvfMobilityMap({
                     <Station className="relative flex flex-col overflow-y-auto overflow-x-hidden  p-2" />
                   </>
                 )}
-                {hasDetails && selectedFeature && (
-                  <>
-                    <RvfOverlayHeader
-                      onClose={() => {
-                        setSelectedFeature(null);
-                      }}
-                      title={getFeatureInformationTitle(selectedFeature)}
-                    ></RvfOverlayHeader>
-                    <RvfFeatureDetails className="relative flex h-full flex-col gap-4 overflow-y-auto overflow-x-hidden p-4" />
-                  </>
-                )}
+                {hasDetails &&
+                  selectedFeature &&
+                  !selectedFeature.get("severity") && (
+                    <>
+                      <RvfOverlayHeader
+                        onClose={() => {
+                          setSelectedFeature(null);
+                        }}
+                        title={getFeatureInformationTitle(selectedFeature)}
+                      ></RvfOverlayHeader>
+                      <RvfFeatureDetails className="relative flex h-full flex-col gap-4 overflow-y-auto overflow-x-hidden p-4" />
+                    </>
+                  )}
                 {hasToolbar && hasPrint && isExportMenuOpen && (
                   <>
                     <RvfOverlayHeader

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -29,10 +29,8 @@ import {
   SOURCE_STATIONS_BIKE,
   SOURCE_STATIONS_CAR,
   SOURCE_STATIONS_CARGO_BIKE,
-  WFS_BIKE_TYPE,
-  WFS_CAR_TYPE,
-  WFS_CARGO_BIKE_TYPE,
   WFS_FREE_FLOAT_TYPE,
+  WFS_STATIONS_TYPE,
 } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
@@ -87,16 +85,12 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     useState<FeatureCollection<Point, SharingStationWFS>>();
   const [carStationsData, setCarStationsData] =
     useState<FeatureCollection<Point, SharingStationWFS>>();
-
   const [bikeFreeFloatData, setBikeFreeFloatData] =
     useState<FeatureCollection<Point, SharingVehicleWFS>>();
-
   const [cargoBikeFreeFloatData, setCargoBikeFreeFloatData] =
     useState<FeatureCollection<Point, SharingVehicleWFS>>();
-
   const [carFreeFloatData, setCarFreeFloatData] =
     useState<FeatureCollection<Point, SharingVehicleWFS>>();
-
   const [scooterFreeFloatData, setScooterFreeFloatData] =
     useState<FeatureCollection<Point, SharingVehicleWFS>>();
 
@@ -114,25 +108,43 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
 
     const fetchData = async () => {
       // Fill stations data
-      const bikeStationsData = await fetchStations(
-        WFS_BIKE_TYPE,
+      const stations = await fetchStations(
+        WFS_STATIONS_TYPE,
         null,
         abortController,
       );
-      setBikeStationsData(bikeStationsData);
+      const bikeStationsData: FeatureCollection<Point, SharingStationWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cargoBikeStationsData: FeatureCollection<Point, SharingStationWFS> =
+        {
+          features: [],
+          type: "FeatureCollection",
+        };
+      const carStationsData: FeatureCollection<Point, SharingStationWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
 
-      const cargoBikeStationsData = await fetchStations(
-        WFS_CARGO_BIKE_TYPE,
-        null,
-        abortController,
-      );
-      setCargoBikeStationsData(cargoBikeStationsData);
+      stations?.features.forEach((station) => {
+        if (station.properties.num_bicycles_available !== null) {
+          station.properties.num_vehicles_available =
+            station.properties.num_bicycles_available;
+          bikeStationsData.features.push(station);
+        } else if (station.properties.num_cargo_bicycles_available !== null) {
+          station.properties.num_vehicles_available =
+            station.properties.num_cargo_bicycles_available;
+          cargoBikeStationsData.features.push(station);
+        } else if (station.properties.num_cars_available !== null) {
+          station.properties.num_vehicles_available =
+            station.properties.num_cars_available;
+          carStationsData.features.push(station);
+        }
+      });
 
-      const carStationsData = await fetchStations(
-        WFS_CAR_TYPE,
-        null,
-        abortController,
-      );
+      setBikeStationsData(bikeStationsData);
+      setCargoBikeStationsData(cargoBikeStationsData);
       setCarStationsData(carStationsData);
 
       // Fill free float data