@geops/rvf-mobility-web-component 0.1.27 → 0.1.29

package/src/RvfSharedMobilityLayerGroup2/RvfSharedMobilityLayerGroup2.tsx

@@ -1,740 +0,0 @@
-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,
-      );
-      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" },
-          // data: "https://api.mobidata-bw.de/geoserver/MobiData-BW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=MobiData-BW%3Asharing_stations_bicycle&maxFeatures=20000&outputFormat=application/json",
-          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);