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

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,13 +1,13 @@
 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 { Feature } from "ol";
-import { Point } from "ol/geom";
-import { Group, Vector } from "ol/layer";
-import { Cluster } from "ol/source";
-import VectorSource from "ol/source/Vector";
+import { Group } from "ol/layer";
+import { unByKey } from "ol/Observable";
+import { transformExtent } from "ol/proj";
 import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 
 import Bicycle from "../icons/Bike";
 import Car from "../icons/Car";
@@ -15,134 +15,382 @@ import CargoBike from "../icons/CargoBike";
 import Ride from "../icons/Ride";
 import Scooter from "../icons/Scooter";
 import {
-  API_REQUEST_FEATURE_TYPE,
+  BIKE_FORM_FACTOR,
+  CAR_FORM_FACTOR,
+  CARGOBIKE_FORM_FACTOR,
+  LAYER_PROP_IS_EXPORTING,
   RVF_LAYERS_NAMES,
   RVF_LAYERS_TITLES,
+  SCOOTER_FORM_FACTOR,
+  SOURCE_FREE_FLOAT_BIKE,
+  SOURCE_FREE_FLOAT_CAR,
+  SOURCE_FREE_FLOAT_CARGO_BIKE,
+  SOURCE_FREE_FLOAT_SCOOTER,
+  SOURCE_STATIONS_BIKE,
+  SOURCE_STATIONS_CAR,
+  SOURCE_STATIONS_CARGO_BIKE,
+  WFS_BIKE_TYPE,
+  WFS_CAR_TYPE,
+  WFS_CARGO_BIKE_TYPE,
+  WFS_FREE_FLOAT_TYPE,
 } from "../utils/constants";
-import createFreeFloatMobilityLayer from "../utils/createFreeFloatMobilityLayer";
-import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
+import {
+  fetchSharingWFS,
+  SharingStationWFS,
+  SharingVehicleWFS,
+} from "../utils/sharingWFSUtils";
 
 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>;
+};
+
 function RvfSharedMobilityLayerGroup(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 [bikeStationsData, setBikeStationsData] =
+    useState<FeatureCollection<Point, SharingStationWFS>>();
+  const [cargoBikeStationsData, setCargoBikeStationsData] =
+    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>>();
+
+  const mbMap = useMemo(() => {
+    return baseLayer?.mapLibreMap;
+  }, [baseLayer?.mapLibreMap]);
+
+  const updateData = useCallback(() => {
+    const abortController = new AbortController();
+    const extent = transformExtent(
+      map.getView().calculateExtent(),
+      "EPSG:3857",
+      "EPSG:4326",
+    );
+
+    const fetchData = async () => {
+      // Fill stations data
+      const bikeStationsData = await fetchStations(
+        WFS_BIKE_TYPE,
+        null,
+        abortController,
+      );
+      setBikeStationsData(bikeStationsData);
+
+      const cargoBikeStationsData = await fetchStations(
+        WFS_CARGO_BIKE_TYPE,
+        null,
+        abortController,
+      );
+      setCargoBikeStationsData(cargoBikeStationsData);
+
+      const carStationsData = await fetchStations(
+        WFS_CAR_TYPE,
+        null,
+        abortController,
+      );
+      setCarStationsData(carStationsData);
+
+      // Fill free float data
+      const freeFloatData = (await fetchSharingWFS(
+        WFS_FREE_FLOAT_TYPE,
+        abortController,
+        extent,
+      )) as FeatureCollection<Point, SharingVehicleWFS>;
+
+      const bikes: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cargoBikes: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cars: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const scooter: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+
+      freeFloatData.features.forEach((feature) => {
+        if (feature.properties.form_factor === BIKE_FORM_FACTOR) {
+          bikes.features.push(feature);
+        } else if (feature.properties.form_factor === CARGOBIKE_FORM_FACTOR) {
+          cargoBikes.features.push(feature);
+        } else if (feature.properties.form_factor === CAR_FORM_FACTOR) {
+          cars.features.push(feature);
+        } else if (feature.properties.form_factor === SCOOTER_FORM_FACTOR) {
+          scooter.features.push(feature);
+        }
+      });
+
+      setBikeFreeFloatData(bikes);
+      setCargoBikeFreeFloatData(cargoBikes);
+      setCarFreeFloatData(cars);
+      setScooterFreeFloatData(scooter);
+    };
+
+    fetchData();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [map]);
+
+  // Request all stations and vehicleson each moveend event
+  useEffect(() => {
+    const key = map?.on("moveend", updateData);
+
+    // @ts-expect-error - change property can have custom values
+    const key2 = map?.on("change:" + LAYER_PROP_IS_EXPORTING, (evt) => {
+      // Reupdate the data after finishing eporting the map
+      if (!evt.target.get(LAYER_PROP_IS_EXPORTING)) {
+        updateData();
+      }
+    });
+    const key3 = map?.once("rendercomplete", updateData);
+    return () => {
+      unByKey([key, key2, key3]);
+    };
+  }, [map, updateData, mbMap]);
+
+  useEffect(() => {
+    if (!mbMap || !bikeStationsData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_STATIONS_BIKE);
+    (source as GeoJSONSource)?.setData(bikeStationsData);
+  }, [bikeStationsData, mbMap]);
+
+  useEffect(() => {
+    if (!mbMap || !cargoBikeStationsData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_STATIONS_CARGO_BIKE);
+    (source as GeoJSONSource)?.setData(cargoBikeStationsData);
+  }, [mbMap, cargoBikeStationsData]);
+
+  useEffect(() => {
+    if (!mbMap || !carStationsData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_STATIONS_CAR);
+    (source as GeoJSONSource)?.setData(carStationsData);
+  }, [mbMap, carStationsData]);
+
+  useEffect(() => {
+    if (!mbMap || !bikeFreeFloatData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_FREE_FLOAT_BIKE);
+    (source as GeoJSONSource)?.setData(bikeFreeFloatData);
+  }, [mbMap, bikeFreeFloatData]);
+
+  useEffect(() => {
+    if (!mbMap || !cargoBikeFreeFloatData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_FREE_FLOAT_CARGO_BIKE);
+    (source as GeoJSONSource)?.setData(cargoBikeFreeFloatData);
+  }, [mbMap, cargoBikeFreeFloatData]);
+
+  useEffect(() => {
+    if (!mbMap || !carFreeFloatData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_FREE_FLOAT_CAR);
+    (source as GeoJSONSource)?.setData(carFreeFloatData);
+  }, [mbMap, carFreeFloatData]);
+
+  useEffect(() => {
+    if (!mbMap || !scooterFreeFloatData) {
+      return;
+    }
+    const source = mbMap.getSource(SOURCE_FREE_FLOAT_SCOOTER);
+    (source as GeoJSONSource)?.setData(scooterFreeFloatData);
+  }, [mbMap, scooterFreeFloatData]);
+
+  // 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,
-        }),
-        createMobiDataBwWfsLayer(
-          API_REQUEST_FEATURE_TYPE.stations.bike,
-          "green",
-        ),
-        createFreeFloatMobilityLayer(
-          API_REQUEST_FEATURE_TYPE.freeFloat.bike,
-          "green",
-          "bicycle",
-        ),
-      ],
-      name: RVF_LAYERS_NAMES.fahrrad,
+    const bikeFrelo = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.bikeFrelo,
+      styleLayersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "bike.frelo";
+      },
+
       title: (
         <div className="flex items-center justify-between gap-2">
-          {RVF_LAYERS_TITLES.fahrrad}
+          {"Frelo"}
           <Bicycle />
         </div>
       ),
-    } as GroupOptions);
+    });
+    // setBikeFreloLayer(bikeFrelo);
 
-    const sharingCar = new Group({
-      layers: [
-        new MaplibreStyleLayer({
-          isQueryable: true,
-          layersFilter: ({ metadata }) => {
-            return metadata?.["rvf.filter"] === "car";
-          },
-          maplibreLayer: baseLayer,
-          maxZoom: 18,
-        }),
-        createMobiDataBwWfsLayer(
-          API_REQUEST_FEATURE_TYPE.stations.car,
-          "green",
-        ),
-        createFreeFloatMobilityLayer(
-          API_REQUEST_FEATURE_TYPE.freeFloat.car,
-          "green",
-          "car",
-        ),
-      ],
-      name: RVF_LAYERS_NAMES.auto,
+    const bikeOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.bikeOthers,
+      styleLayersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "bike.other";
+      },
       title: (
         <div className="flex items-center justify-between gap-2">
-          {RVF_LAYERS_TITLES.auto}
-          <Car />
+          {"Fahrrad, andere Anbieter"}
+          <Bicycle />
         </div>
       ),
-    } as GroupOptions);
+    });
+    // setBikeOthersLayer(bikeOthers);
 
-    const sharingCargoBicycle = new Group({
-      layers: [
-        new MaplibreStyleLayer({
-          isQueryable: true,
-          layersFilter: ({ metadata }) => {
-            return metadata?.["rvf.filter"] === "cargo_bike";
-          },
-          maplibreLayer: baseLayer,
-          maxZoom: 18,
-        }),
-        createMobiDataBwWfsLayer(
-          API_REQUEST_FEATURE_TYPE.stations.cargoBike,
-          "green",
-        ),
-        createFreeFloatMobilityLayer(
-          API_REQUEST_FEATURE_TYPE.freeFloat.cargoBike,
-          "green",
-          "cargo_bicycle",
-        ),
-      ],
-      name: RVF_LAYERS_NAMES.cargobike,
+    const cargobikeFrelo = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "cargo_bike.frelo";
+      },
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.cargobikeFrelo,
       title: (
         <div className="flex items-center justify-between gap-2">
-          {RVF_LAYERS_TITLES.cargobike}
+          {"Lastenfrelo"}
           <CargoBike />
         </div>
       ),
-    } as GroupOptions);
+    });
+    // setCargobikeFreloLayer(cargobikeFrelo);
 
-    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",
-        ),
-      ],
+    const cargobikeOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "cargo_bike.other";
+      },
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.cargobikeOthers,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Lastenrad, andere Anbieter"}
+          <CargoBike />
+        </div>
+      ),
+    });
+    // setCargobikeOthersLayer(cargobikeOthers);
+
+    const carGrf = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "car.grueneflotte";
+      },
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.carGrf,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Grüne Flotte"}
+          <Car />
+        </div>
+      ),
+    });
+    // setCarGrfLayer(carGrf);
+
+    const carNatur = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "car.naturenergy";
+      },
+      maplibreLayer: baseLayer,
+      name: RVF_LAYERS_NAMES.carNatur,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Naturenergie-Sharing"}
+          <Car />
+        </div>
+      ),
+    });
+    // setCarNaturLayer(carNatur);
+
+    const carOthers = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "car.other";
+      },
+      maplibreLayer: baseLayer,
+
+      name: RVF_LAYERS_NAMES.carOthers,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          {"Auto, andere Anbieter"}
+          <Car />
+        </div>
+      ),
+    });
+    // setCarOthersLayer(carOthers);
+
+    const scooter = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "scooter";
+      },
+      maplibreLayer: baseLayer,
       name: RVF_LAYERS_NAMES.eroller,
       title: (
         <div className="flex items-center justify-between gap-2">
@@ -150,10 +398,11 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
           <Scooter />
         </div>
       ),
-    } as GroupOptions);
+    });
+    // setScooterLayer(scooter);
 
-    const sharingHitchHiking = new MaplibreStyleLayer({
-      isQueryable: true,
+    const hitchHiking = new MaplibreStyleLayer({
+      isQueryable: false,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "hitchhiking";
       },
@@ -169,11 +418,15 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
 
     return new Group({
       layers: [
-        sharingBicycle,
-        sharingCar,
-        sharingCargoBicycle,
-        sharingScooter,
-        sharingHitchHiking,
+        bikeFrelo,
+        bikeOthers,
+        cargobikeFrelo,
+        cargobikeOthers,
+        carGrf,
+        carNatur,
+        carOthers,
+        scooter,
+        hitchHiking,
       ],
       ...props,
     } as GroupOptions);
@@ -182,24 +435,12 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   // 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();
-        });
-      });
+      updateData();
     }, 60000);
     return () => {
       window.clearInterval(interval);
     };
-  }, [group]);
+  }, [group, updateData]);
 
   useEffect(() => {
     setSharedMobilityLayerGroup(group);

package/src/StationsLayer/StationsLayer.tsx

@@ -15,7 +15,7 @@ function StationsLayer(props: MaplibreStyleLayerOptions) {
     }
     return new MaplibreStyleLayer({
       layersFilter: ({ metadata }) => {
-        return metadata?.["tralis.variable"] === "station";
+        return metadata?.["general.filter"] === "stations";
       },
       maplibreLayer: baseLayer,
       name: RVF_LAYERS_NAMES.haltestellen,

package/src/icons/NoRealtime/NoRealtime.tsx

@@ -0,0 +1,44 @@
+import { SVGProps } from "preact/compat";
+
+function NoRealtime(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="24"
+      viewBox="0 0 42 42"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M40,20A20,20,0,1,1,20,0,20,20,0,0,1,40,20Z"
+        data-name="Pfad 1"
+        fill="#353535"
+        id="Pfad_1"
+        transform="translate(0 0)"
+      />
+      <path
+        d="M25.481,11.843a9.993,9.993,0,0,0-10,9.992c0,7.773,10,14.8,10,14.8s9.992-7.5,9.992-14.8a9.991,9.991,0,0,0-9.992-9.992m0,14.662a4.924,4.924,0,1,1,4.924-4.924A4.93,4.93,0,0,1,25.482,26.5"
+        data-name="Pfad 2"
+        fill="#fff"
+        id="Pfad_2"
+        transform="translate(-5.477 -4.19)"
+      />
+      <path
+        d="M12.015,8.124,38.081,34.031,35.4,36.536,9.06,10.527Z"
+        data-name="Pfad 3"
+        fill="#ec0016"
+        id="Pfad_3"
+        transform="translate(-3.206 -2.874)"
+      />
+      <path
+        d="M20,3.231A16.769,16.769,0,1,1,3.231,20,16.788,16.788,0,0,1,20,3.231M20,0A20,20,0,1,0,40,20,20,20,0,0,0,20,0"
+        data-name="Pfad 4"
+        fill="#353535"
+        id="Pfad_4"
+        transform="translate(0 0)"
+      />
+    </svg>
+  );
+}
+
+export default NoRealtime;

package/src/icons/NoRealtime/index.tsx

@@ -0,0 +1 @@
+export { default } from "./NoRealtime";

package/src/icons/NoRealtime/norealtime.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42" width="42" height="42">
+      <path id="Pfad_1" data-name="Pfad 1" d="M40,20A20,20,0,1,1,20,0,20,20,0,0,1,40,20Z" transform="translate(0 0)" fill="#353535"/>
+      <path id="Pfad_2" data-name="Pfad 2" d="M25.481,11.843a9.993,9.993,0,0,0-10,9.992c0,7.773,10,14.8,10,14.8s9.992-7.5,9.992-14.8a9.991,9.991,0,0,0-9.992-9.992m0,14.662a4.924,4.924,0,1,1,4.924-4.924A4.93,4.93,0,0,1,25.482,26.5" transform="translate(-5.477 -4.19)" fill="#fff"/>
+      <path id="Pfad_3" data-name="Pfad 3" d="M12.015,8.124,38.081,34.031,35.4,36.536,9.06,10.527Z" transform="translate(-3.206 -2.874)" fill="#ec0016"/>
+      <path id="Pfad_4" data-name="Pfad 4" d="M20,3.231A16.769,16.769,0,1,1,3.231,20,16.788,16.788,0,0,1,20,3.231M20,0A20,20,0,1,0,40,20,20,20,0,0,0,20,0" transform="translate(0 0)" fill="#353535"/>
+</svg>

package/src/utils/constants.ts

@@ -1,3 +1,4 @@
+import { FeatureCollection } from "geojson";
 import { fromLonLat, toLonLat, transformExtent } from "ol/proj";
 
 import callBike from "../logos/callabike_logo.png";
@@ -60,6 +61,26 @@ export const RVF_LAYERS_NAMES = {
   verkaufsstellen: "verkaufsstellen",
 };
 
+export const WFS_CARGO_BIKE_TYPE = "sharing_stations_cargo_bicycle";
+export const WFS_CAR_TYPE = "sharing_stations_car";
+export const WFS_BIKE_TYPE = "sharing_stations_bicycle";
+export const WFS_FREE_FLOAT_TYPE = "sharing_vehicles";
+
+export const SOURCE_STATIONS_BIKE = WFS_BIKE_TYPE;
+export const SOURCE_STATIONS_CARGO_BIKE = WFS_CARGO_BIKE_TYPE;
+export const SOURCE_STATIONS_CAR = WFS_CAR_TYPE;
+
+export const SOURCE_FREE_FLOAT_BIKE = "sharing_freefloat_bicycle";
+export const SOURCE_FREE_FLOAT_CARGO_BIKE = "sharing_freefloat_cargo_bicycle";
+export const SOURCE_FREE_FLOAT_CAR = "sharing_freefloat_car";
+export const SOURCE_FREE_FLOAT_SCOOTER = "sharing_freefloat_scooter";
+export const SOURCE_SELECT = "sharing_select";
+
+export const EMPTY_FEATURE_COLLECTION: FeatureCollection = {
+  features: [],
+  type: "FeatureCollection",
+};
+
 export const API_REQUEST_FEATURE_TYPE = {
   freeFloat: {
     bike: "sharing_vehicles",
@@ -96,7 +117,7 @@ export const TITLE_BY_CATEGORY = {
 export const PROVIDER_BY_FEED_ID = {
   callabike_ice: "Call a Bike",
   flinkster_carsharing: "Flinkster",
-  gruene_flotte_freiburg: "Die Grüne\nFlotte",
+  "gruene-flotte_freiburg": "Die Grüne\nFlotte",
   lastenvelo_fr: "LastenVelo",
   naturenergie_sharing: "naturenergie\nsharing",
   nextbike_df: "Frelo",

package/src/utils/exportPdf.ts

@@ -617,12 +617,12 @@ async function exportPdf(
 
   document.body.style.overflow = "auto";
 
-  // Undo what you have done on onBefore
-  onAfter?.(map, layers);
-
   // Reset map to previous state
   map.setLayers(layers);
 
+  // Undo what you have done on onBefore
+  onAfter?.(map, layers);
+
   if (placeholderCanvas) {
     map.once("rendercomplete", () => {
       placeholderCanvas.remove();

package/src/utils/fullTrajectoryStyle.ts

@@ -29,7 +29,6 @@ const fullTrajectoryStyle = (
   if (stroke && stroke[0] !== "#") {
     stroke = `#${stroke}`;
   }
-  console.log(feature.getProperties());
   lineColor =
     stroke || options?.getBgColor(type, { name: feature.get("line_name") });