@geops/rvf-mobility-web-component 0.1.23 → 0.1.24-beta.0

package/src/RvfSharedMobilityLayerGroup2/RvfSharedMobilityLayerGroup2.tsx

@@ -0,0 +1,740 @@
+import type { Options } from "ol/layer/Group";
+
+import { FeatureCollection, Point } from "geojson";
+import { GeoJSONSource } from "maplibre-gl";
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { Extent } from "ol/extent";
+import { Group } from "ol/layer";
+import { unByKey } from "ol/Observable";
+import { transformExtent } from "ol/proj";
+import { memo } from "preact/compat";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+
+import Bicycle from "../icons/Bike";
+import Car from "../icons/Car";
+import CargoBike from "../icons/CargoBike";
+import Ride from "../icons/Ride";
+import Scooter from "../icons/Scooter";
+import {
+  BIKE_FORM_FACTOR,
+  BIKE_OTHERS_FEED_IDS,
+  CAR_FORM_FACTOR,
+  CAR_OTHERS_FEED_IDS,
+  CARGOBIKE_FORM_FACTOR,
+  CARGOBIKE_FRELO_ID,
+  CARGOBIKE_OTHERS_FEED_IDS,
+  FRELO_FEED_ID,
+  GRUNFLOTTE_FEED_ID,
+  NATURENERGIE_FEED_ID,
+  RVF_LAYERS_NAMES,
+  RVF_LAYERS_TITLES,
+  SCOOTER_FORM_FACTOR,
+} from "../utils/constants";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+import {
+  getSharingClusterStyleLayers,
+  getSharingStyleLayers,
+} from "../utils/sharingStylesUtils";
+import {
+  fetchSharingWFS,
+  SharingStationWFS,
+  SharingVehicleWFS,
+} from "../utils/sharingWFSUtils";
+
+const BIKE_FRELO_SOURCE_ID = "bikeFrelo";
+const BIKE_OTHERS_SOURCE_ID = "bikeOthers";
+const CARGOBIKE_FRELO_SOURCE_ID = "cargobikeFrelo";
+const CARGOBIKE_OTHERS_SOURCE_ID = "cargobikeOthers";
+const CAR_GRF_SOURCE_ID = "carGrf";
+const CAR_NATUR_SOURCE_ID = "carNature";
+const CAR_OTHERS_SOURCE_ID = "carOthers";
+const SCOOTER_SOURCE_ID = "scooter";
+// const HITCHHIKING_SOURCE_ID = "hitchhiking";
+
+export type GroupOptions = Options & Record<string, unknown>;
+
+const fetchStations = async (
+  typeName: string,
+  feedIds: string[],
+  abortController: AbortController,
+) => {
+  const stations = (await fetchSharingWFS(
+    typeName,
+    abortController,
+  )) as FeatureCollection<Point, SharingStationWFS>;
+
+  const featureCollection = {
+    features: stations.features.filter((feature) => {
+      return feedIds ? feedIds.includes(feature.properties.feed_id) : true;
+    }),
+    type: "FeatureCollection",
+  };
+
+  return featureCollection as FeatureCollection<Point, SharingStationWFS>;
+};
+
+const fetchVehicles = async (
+  formFactor: string,
+  feedIds: string[],
+  extent4326: Extent,
+  abortController: AbortController,
+) => {
+  const freeFloat = (await fetchSharingWFS(
+    "sharing_vehicles",
+    abortController,
+    extent4326,
+  )) as FeatureCollection<Point, SharingVehicleWFS>;
+
+  const featureCollection = {
+    features: freeFloat.features.filter((feature) => {
+      return (
+        (feedIds ? feedIds.includes(feature.properties.feed_id) : true) &&
+        feature.properties.form_factor === formFactor
+      );
+    }),
+    type: "FeatureCollection",
+  };
+
+  return featureCollection as FeatureCollection<Point, SharingVehicleWFS>;
+};
+
+let cacheStations = new Map<
+  string,
+  FeatureCollection<Point, SharingStationWFS>
+>();
+
+const fetchLayerData = async (
+  typeName: string,
+  formFactor: string,
+  feedIds: string[],
+  extent: Extent,
+  abortController: AbortController,
+) => {
+  const cacheKey = typeName + feedIds?.toString();
+  const stations =
+    cacheStations[cacheKey] ||
+    (await fetchStations(typeName, feedIds, abortController));
+  const freeFloat = await fetchVehicles(
+    formFactor,
+    feedIds,
+    extent,
+    abortController,
+  );
+
+  if (!cacheStations[cacheKey]) {
+    cacheStations[cacheKey] = stations;
+  }
+  return {
+    features: [...stations.features, ...freeFloat.features],
+    type: "FeatureCollection",
+  } as FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>;
+};
+
+function RvfSharedMobilityLayerGroup2(props: GroupOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setSharedMobilityLayerGroup } = useRvfContext();
+
+  // Layers
+  const [bikeFreloLayer, setBikeFreloLayer] = useState<MaplibreStyleLayer>();
+  const [bikeOthersLayer, setBikeOthersLayer] = useState<MaplibreStyleLayer>();
+  const [cargobikeFreloLayer, setCargobikeFreloLayer] =
+    useState<MaplibreStyleLayer>();
+  const [cargobikeOthersLayer, setCargobikeOthersLayer] =
+    useState<MaplibreStyleLayer>();
+  const [carGrfLayer, setCarGrfLayer] = useState<MaplibreStyleLayer>();
+  const [carNaturLayer, setCarNaturLayer] = useState<MaplibreStyleLayer>();
+  const [carOthersLayer, setCarOthersLayer] = useState<MaplibreStyleLayer>();
+  const [scooterLayer, setScooterLayer] = useState<MaplibreStyleLayer>();
+
+  // GeoJSON data
+  const [bikeFreloData, setBikeFreloData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [bikeOthersData, setBikeOthersData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [cargobikeFreloData, setCargobikeFreloData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [cargobikeOthersData, setCargobikeOthersData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [carGrfData, setCarGrfData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [carNaturData, setCarNaturData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [carOthersData, setCarOthersData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+  const [scooterData, setScooterData] =
+    useState<FeatureCollection<Point, SharingStationWFS | SharingVehicleWFS>>();
+
+  const updateData = useCallback(() => {
+    const abortController = new AbortController();
+    const extent = transformExtent(
+      map.getView().calculateExtent(),
+      "EPSG:3857",
+      "EPSG:4326",
+    );
+
+    const fetchData = async () => {
+      const bikeFreloData = await fetchLayerData(
+        "sharing_stations_bicycle",
+        BIKE_FORM_FACTOR,
+        [FRELO_FEED_ID],
+        extent,
+        abortController,
+      );
+      setBikeFreloData(bikeFreloData);
+      const bikeOthersData = await fetchLayerData(
+        "sharing_stations_bicycle",
+        BIKE_FORM_FACTOR,
+        BIKE_OTHERS_FEED_IDS,
+        extent,
+        abortController,
+      );
+      setBikeOthersData(bikeOthersData);
+
+      const cargobikeFreloData = await fetchLayerData(
+        "sharing_stations_cargo_bicycle",
+        CARGOBIKE_FORM_FACTOR,
+        [CARGOBIKE_FRELO_ID],
+        extent,
+        abortController,
+      );
+      setCargobikeFreloData(cargobikeFreloData);
+
+      const cargobikeOthersData = await fetchLayerData(
+        "sharing_stations_cargo_bicycle",
+        CARGOBIKE_FORM_FACTOR,
+        CARGOBIKE_OTHERS_FEED_IDS,
+        extent,
+        abortController,
+      );
+      setCargobikeOthersData(cargobikeOthersData);
+
+      const carGrfData = await fetchLayerData(
+        "sharing_stations_car",
+        CAR_FORM_FACTOR,
+        [GRUNFLOTTE_FEED_ID],
+        extent,
+        abortController,
+      );
+      setCarGrfData(carGrfData);
+
+      const carNaturData = await fetchLayerData(
+        "sharing_stations_car",
+        CAR_FORM_FACTOR,
+        [NATURENERGIE_FEED_ID],
+        extent,
+        abortController,
+      );
+      setCarNaturData(carNaturData);
+
+      const carOthers = await fetchLayerData(
+        "sharing_stations_car",
+        CAR_FORM_FACTOR,
+        CAR_OTHERS_FEED_IDS,
+        extent,
+        abortController,
+      );
+      setCarOthersData(carOthers);
+
+      const scooterData = await fetchLayerData(
+        "sharing_stations_scooters_standing",
+        SCOOTER_FORM_FACTOR,
+        null,
+        extent,
+        abortController,
+      );
+      // console.log("scooterData", scooterData);
+      setScooterData(scooterData);
+    };
+
+    fetchData();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [map]);
+
+  // Request all stations and vehicleson each moveend event
+  useEffect(() => {
+    const key = map?.on("moveend", updateData);
+    const key2 = map?.once("rendercomplete", updateData);
+    return () => {
+      unByKey(key);
+      unByKey(key2);
+    };
+  }, [map, updateData]);
+
+  useEffect(() => {
+    const mbMap = bikeFreloLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !bikeFreloData) {
+      return;
+    }
+    const source = mbMap.getSource(BIKE_FRELO_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(bikeFreloData);
+  }, [bikeFreloData, bikeFreloLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = bikeOthersLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !bikeOthersData) {
+      return;
+    }
+    const source = mbMap.getSource(BIKE_OTHERS_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(bikeOthersData);
+  }, [bikeOthersData, bikeOthersLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = cargobikeFreloLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !cargobikeFreloData) {
+      return;
+    }
+    const source = mbMap.getSource(CARGOBIKE_FRELO_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(cargobikeFreloData);
+  }, [cargobikeFreloData, cargobikeFreloLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = cargobikeOthersLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !cargobikeOthersData) {
+      return;
+    }
+    const source = mbMap.getSource(CARGOBIKE_OTHERS_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(cargobikeOthersData);
+  }, [cargobikeOthersData, cargobikeOthersLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = carGrfLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !carGrfData) {
+      return;
+    }
+    const source = mbMap.getSource(CAR_GRF_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(carGrfData);
+  }, [carGrfData, carGrfLayer?.maplibreLayer?.mapLibreMap]);
+  useEffect(() => {
+    const mbMap = carNaturLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !carNaturData) {
+      return;
+    }
+    const source = mbMap.getSource(CAR_NATUR_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(carNaturData);
+  }, [carNaturData, carNaturLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = carOthersLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !carOthersData) {
+      return;
+    }
+    const source = mbMap.getSource(CAR_OTHERS_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(carOthersData);
+  }, [carOthersData, carOthersLayer?.maplibreLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const mbMap = scooterLayer?.maplibreLayer?.mapLibreMap;
+    if (!mbMap || !scooterData) {
+      return;
+    }
+    const source = mbMap.getSource(SCOOTER_SOURCE_ID);
+    (source as GeoJSONSource)?.setData(scooterData);
+  }, [scooterData, scooterLayer?.maplibreLayer?.mapLibreMap]);
+
+  const group = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+
+    const sharingBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          // isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "bike";
+          },
+          maplibreLayer: baseLayer,
+          maxZoom: 18,
+          visible: false,
+        }),
+        // createMobiDataBwWfsLayer(
+        //   API_REQUEST_FEATURE_TYPE.stations.bike,
+        //   "green",
+        // ),
+        // createFreeFloatMobilityLayer(
+        //   API_REQUEST_FEATURE_TYPE.freeFloat.bike,
+        //   "green",
+        //   "bicycle",
+        // ),
+      ],
+      name: RVF_LAYERS_NAMES.fahrrad,
+      // title: (
+      //   <div className="flex items-center justify-between gap-2">
+      //     {RVF_LAYERS_TITLES.fahrrad}
+      //     <Bicycle />
+      //   </div>
+      // ),
+    } as GroupOptions);
+
+    const sharingCar = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          // isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "car";
+          },
+          maplibreLayer: baseLayer,
+          maxZoom: 18,
+          visible: false,
+        }),
+        // createMobiDataBwWfsLayer(
+        //   API_REQUEST_FEATURE_TYPE.stations.car,
+        //   "green",
+        // ),
+        // createFreeFloatMobilityLayer(
+        //   API_REQUEST_FEATURE_TYPE.freeFloat.car,
+        //   "green",
+        //   "car",
+        // ),
+      ],
+      // name: RVF_LAYERS_NAMES.auto,
+      // title: (
+      //   <div className="flex items-center justify-between gap-2">
+      //     {RVF_LAYERS_TITLES.auto}
+      //     <Car />
+      //   </div>
+      // ),
+    } as GroupOptions);
+
+    const sharingCargoBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          // isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "cargo_bike";
+          },
+          maplibreLayer: baseLayer,
+          maxZoom: 18,
+          visible: false,
+        }),
+        // createMobiDataBwWfsLayer(
+        //   API_REQUEST_FEATURE_TYPE.stations.cargoBike,
+        //   "green",
+        // ),
+        // createFreeFloatMobilityLayer(
+        //   API_REQUEST_FEATURE_TYPE.freeFloat.cargoBike,
+        //   "green",
+        //   "cargo_bicycle",
+        // ),
+      ],
+      // name: RVF_LAYERS_NAMES.cargobike,
+      // title: (
+      //   <div className="flex items-center justify-between gap-2">
+      //     {RVF_LAYERS_TITLES.cargobike}
+      //     <CargoBike />
+      //   </div>
+      // ),
+    } as GroupOptions);
+
+    // const sharingScooter = new Group({
+    //   layers: [
+    // No scooter station data available
+    // new MaplibreStyleLayer({
+    //   isQueryable: true,
+    //   layersFilter: ({ metadata }) => {
+    //     return metadata?.["rvf.filter"] === "scooter";
+    //   },
+    //   maplibreLayer: baseLayer,
+    // }),
+    // https://www.mobidata-bw.de/dataset/escootch
+    // createMobiDataBwWfsLayer(
+    //   API_REQUEST_FEATURE_TYPE.stations.scooter,
+    //   "green",
+    // ),
+    // createFreeFloatMobilityLayer(
+    //   API_REQUEST_FEATURE_TYPE.freeFloat.scooter,
+    //   "green",
+    //   "scooter",
+    // ),
+    // ],
+    // name: RVF_LAYERS_NAMES.eroller,
+    // title: (
+    //   <div className="flex items-center justify-between gap-2">
+    //     {RVF_LAYERS_TITLES.eroller}
+    //     <Scooter />
+    //   </div>
+    // ),
+    // } as GroupOptions);
+
+    const sharingHitchHiking = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "hitchhiking";
+      },
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.mitfahrpunkte,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {RVF_LAYERS_TITLES.mitfahrpunkte}
+          <Ride />
+        </div>
+      ),
+      visible: false,
+    });
+
+    const bikeFrelo = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.bikeFrelo,
+      sources: {
+        [BIKE_FRELO_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(BIKE_FRELO_SOURCE_ID),
+
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Frelo"}
+          <Bicycle />
+        </div>
+      ),
+    });
+    setBikeFreloLayer(bikeFrelo);
+
+    const bikeOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.bikeOthers,
+      sources: {
+        [BIKE_OTHERS_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(BIKE_OTHERS_SOURCE_ID),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Fahrrad, andere Anbieter"}
+          <Bicycle />
+        </div>
+      ),
+    });
+    setBikeOthersLayer(bikeOthers);
+
+    const cargobikeFrelo = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.cargobikeFrelo,
+      sources: {
+        [CARGOBIKE_FRELO_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(
+        CARGOBIKE_FRELO_SOURCE_ID,
+        "rvf_shared_cargo_bike",
+      ),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Lastenfrelo"}
+          <CargoBike />
+        </div>
+      ),
+    });
+    setCargobikeFreloLayer(cargobikeFrelo);
+
+    const cargobikeOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.cargobikeOthers,
+      sources: {
+        [CARGOBIKE_OTHERS_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(
+        CARGOBIKE_OTHERS_SOURCE_ID,
+        "rvf_shared_cargo_bike",
+      ),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Lastenrad, andere Anbieter"}
+          <CargoBike />
+        </div>
+      ),
+    });
+    setCargobikeOthersLayer(cargobikeOthers);
+
+    const carGrf = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.carGrf,
+      sources: {
+        [CAR_GRF_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(CAR_GRF_SOURCE_ID, "rvf_shared_car"),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Grüne Flotte"}
+          <Car />
+        </div>
+      ),
+    });
+    setCarGrfLayer(carGrf);
+
+    const carNatur = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.carNatur,
+      sources: {
+        [CAR_NATUR_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(CAR_NATUR_SOURCE_ID, "rvf_shared_car"),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Naturenergie-Sharing"}
+          <Car />
+        </div>
+      ),
+    });
+    setCarNaturLayer(carNatur);
+
+    const carOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.carOthers,
+      sources: {
+        [CAR_OTHERS_SOURCE_ID]: {
+          data: { features: [], type: "FeatureCollection" },
+          promoteId: "id",
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingStyleLayers(
+        CAR_OTHERS_SOURCE_ID,
+        "rvf_shared_car",
+      ),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Auto, andere Anbieter"}
+          <Car />
+        </div>
+      ),
+    });
+    setCarOthersLayer(carOthers);
+
+    const scooter = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.eroller,
+      sources: {
+        [SCOOTER_SOURCE_ID]: {
+          cluster: true,
+          clusterRadius: 40,
+          data: { features: [], type: "FeatureCollection" },
+          generateId: true,
+          maxzoom: 21,
+          type: "geojson",
+        },
+      },
+      styleLayers: getSharingClusterStyleLayers(
+        SCOOTER_SOURCE_ID,
+        "rvf_shared_scooter",
+      ),
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {RVF_LAYERS_TITLES.eroller}
+          <Scooter />
+        </div>
+      ),
+    });
+    setScooterLayer(scooter);
+
+    // const hitchhiking = new MaplibreStyleLayer({
+    //   maplibreLayer: baseLayer,
+    //   name: RVF_LAYERS_NAMES.mitfahrpunkte,
+    //   sources: {
+    //     [HITCHHIKING_SOURCE_ID]: {
+    //       data: { features: [], type: "FeatureCollection" },
+    //       type: "geojson",
+    //     },
+    //   },
+    //   styleLayers: getStyleLayers(HITCHHIKING_SOURCE_ID, "rvf_shared_car"),
+    //   title: "E-Roller",
+    // });
+    // setHitchhikingLayer(hitchhiking);
+
+    return new Group({
+      layers: [
+        sharingBicycle,
+        sharingCargoBicycle,
+        sharingCar,
+        bikeFrelo,
+        bikeOthers,
+        cargobikeFrelo,
+        cargobikeOthers,
+        carGrf,
+        carNatur,
+        carOthers,
+        scooter,
+        sharingHitchHiking,
+        // hitchhiking,
+      ],
+      ...props,
+    } as GroupOptions);
+  }, [baseLayer, props]);
+
+  // Reload features every minute
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      // group.getLayers().forEach((layer: Group) => {
+      //   layer.getLayers?.().forEach((layer: MaplibreStyleLayer | Vector) => {
+      //     const source = layer.getSource();
+      //     source?.refresh();
+
+      //     // For cluster source
+      //     (
+      //       (source as Cluster<Feature<Point>>)?.getSource?.() as VectorSource<
+      //         Feature<Point>
+      //       >
+      //     )?.refresh();
+      //   });
+      // });
+      // Redo the request to get the latest data abou vhicle available
+      // @ts-expect-error - type issue
+      cacheStations = {};
+      updateData();
+    }, 60000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [group, updateData]);
+
+  useEffect(() => {
+    setSharedMobilityLayerGroup(group);
+  }, [group, setSharedMobilityLayerGroup]);
+
+  useEffect(() => {
+    if (!map || !group) {
+      return;
+    }
+    map.addLayer(group);
+
+    return () => {
+      map.removeLayer(group);
+    };
+  }, [map, group]);
+
+  return null;
+}
+export default memo(RvfSharedMobilityLayerGroup2);