@geops/rvf-mobility-web-component 0.1.54 → 0.1.55

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.54",
+  "version": "0.1.55",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -22,9 +22,7 @@ import {
   SOURCE_FREE_FLOAT_CAR,
   SOURCE_FREE_FLOAT_CARGO_BIKE,
   SOURCE_FREE_FLOAT_SCOOTER,
-  SOURCE_STATIONS_BIKE,
-  SOURCE_STATIONS_CAR,
-  SOURCE_STATIONS_CARGO_BIKE,
+  SOURCE_SHARING_STATIONS,
   WFS_FREE_FLOAT_TYPE,
   WFS_STATIONS_TYPE,
 } from "../utils/constants";
@@ -82,11 +80,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   // const [scooterLayer, setScooterLayer] = useState<MaplibreStyleLayer>();
 
   // GeoJSON data
-  const [bikeStationsData, setBikeStationsData] =
-    useState<FeatureCollection<Point, SharingStationWFS>>();
-  const [cargoBikeStationsData, setCargoBikeStationsData] =
-    useState<FeatureCollection<Point, SharingStationWFS>>();
-  const [carStationsData, setCarStationsData] =
+  const [stationsData, setStationsData] =
     useState<FeatureCollection<Point, SharingStationWFS>>();
   const [bikeFreeFloatData, setBikeFreeFloatData] =
     useState<FeatureCollection<Point, SharingVehicleWFS>>();
@@ -111,46 +105,13 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
 
     const fetchData = async () => {
       // Fill stations data
+      // The stations are also loaded in the style to have them displayed during export
       const stations = await fetchStations(
         WFS_STATIONS_TYPE,
         abortController,
         extent,
       );
-      const bikeStationsDatas: FeatureCollection<Point, SharingStationWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const cargoBikeStationsDatas: FeatureCollection<
-        Point,
-        SharingStationWFS
-      > = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const carStationsDatas: FeatureCollection<Point, SharingStationWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-
-      stations?.features.forEach((station) => {
-        if (station.properties.num_bicycles_available !== null) {
-          station.properties.num_vehicles_available =
-            station.properties.num_bicycles_available;
-          bikeStationsDatas.features.push(station);
-        } else if (station.properties.num_cargo_bicycles_available !== null) {
-          station.properties.num_vehicles_available =
-            station.properties.num_cargo_bicycles_available;
-          cargoBikeStationsDatas.features.push(station);
-        } else if (station.properties.num_cars_available !== null) {
-          station.properties.num_vehicles_available =
-            station.properties.num_cars_available;
-          carStationsDatas.features.push(station);
-        }
-      });
-
-      setBikeStationsData(bikeStationsDatas);
-      setCargoBikeStationsData(cargoBikeStationsDatas);
-      setCarStationsData(carStationsDatas);
+      setStationsData(stations);
 
       // Fill free float data
       const freeFloatData = (await fetchSharingWFS(
@@ -219,28 +180,12 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   }, [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) {
+    if (!mbMap || !stationsData) {
       return;
     }
-    const source = mbMap.getSource(SOURCE_STATIONS_CAR);
-    (source as GeoJSONSource)?.setData(carStationsData);
-  }, [mbMap, carStationsData]);
+    const source = mbMap.getSource(SOURCE_SHARING_STATIONS);
+    (source as GeoJSONSource)?.setData(stationsData);
+  }, [stationsData, mbMap]);
 
   useEffect(() => {
     if (!mbMap || !bikeFreeFloatData) {
@@ -289,7 +234,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     }
 
     const bikeFrelo = new MaplibreStyleLayer({
-      isQueryable: true,
       maplibreLayer: baseLayer,
       name: RVF_LAYERS_NAMES.bikeFrelo,
       styleLayersFilter: ({ metadata }) => {
@@ -306,7 +250,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setBikeFreloLayer(bikeFrelo);
 
     const bikeOthers = new MaplibreStyleLayer({
-      isQueryable: true,
       maplibreLayer: baseLayer,
       name: RVF_LAYERS_NAMES.bikeOthers,
       styleLayersFilter: ({ metadata }) => {
@@ -322,7 +265,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setBikeOthersLayer(bikeOthers);
 
     const cargobikeFrelo = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "cargo_bike.frelo";
       },
@@ -338,7 +280,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setCargobikeFreloLayer(cargobikeFrelo);
 
     const cargobikeOthers = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "cargo_bike.other";
       },
@@ -354,7 +295,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setCargobikeOthersLayer(cargobikeOthers);
 
     const carGrf = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.grueneflotte";
       },
@@ -370,7 +310,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setCarGrfLayer(carGrf);
 
     const carNatur = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.naturenergy";
       },
@@ -386,7 +325,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setCarNaturLayer(carNatur);
 
     const carOthers = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.other";
       },
@@ -402,7 +340,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setCarOthersLayer(carOthers);
 
     const scooter = new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "scooter";
       },
@@ -418,7 +355,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     // setScooterLayer(scooter);
 
     const hitchHiking = new MaplibreStyleLayer({
-      isQueryable: false,
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "hitchhiking";
       },

package/src/utils/constants.ts

@@ -99,9 +99,7 @@ export const WFS_STATIONS_TYPE = "sharing_stations";
 
 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_SHARING_STATIONS = "sharing_stations";
 
 export const SOURCE_FREE_FLOAT_BIKE = "sharing_freefloat_bicycle";
 export const SOURCE_FREE_FLOAT_CARGO_BIKE = "sharing_freefloat_cargo_bicycle";

package/src/utils/sharingWFSUtils.ts

@@ -22,7 +22,7 @@ export type SharingStationWFS = {
   num_cars_available: null | number;
   num_mopeds_available: null | number;
   num_scooters_standing_available: null | number;
-  // Backward compatibility with style
+  // Backward compatibility for the select style
   num_vehicles_available: number;
   rental_uris_android: string;
   rental_uris_ios: string;
@@ -79,8 +79,6 @@ export const fetchSharingWFS = async (
 
       // for select style we always set mot and num_vehicles_available
       const formFactor = (feature.properties as SharingVehicleWFS).form_factor;
-      let numVehiclesAvailable = (feature.properties as SharingStationWFS)
-        .num_vehicles_available;
       let mot = formFactor || wfsTypeName.split("_").pop();
       if (mot === "bicycle") {
         mot = "bike";
@@ -88,12 +86,26 @@ export const fetchSharingWFS = async (
         mot = "cargo_bike";
       }
 
-      if ((feature.properties as SharingVehicleWFS).vehicle_id) {
-        numVehiclesAvailable = 1;
+      if (mot === "stations") {
+        const props: SharingStationWFS =
+          feature.properties as SharingStationWFS;
+        if (props.num_bicycles_available !== null) {
+          mot = "bike";
+          feature.properties.num_vehicles_available =
+            props.num_bicycles_available;
+        } else if (props.num_cars_available !== null) {
+          mot = "car";
+          feature.properties.num_vehicles_available = props.num_cars_available;
+        } else if (props.num_cargo_bicycles_available !== null) {
+          mot = "cargo_bike";
+          feature.properties.num_vehicles_available =
+            props.num_cargo_bicycles_available;
+        }
+      } else {
+        feature.properties.num_vehicles_available = 1;
       }
-
+      // mot property is used for the select styles
       feature.properties.mot = mot;
-      feature.properties.num_vehicles_available = numVehiclesAvailable;
       feature.properties.display_num_vehicles_available = true;
     },
   );