@geops/rvf-mobility-web-component 0.1.12 → 0.1.13

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,5 +1,6 @@
 import type { Options } from "ol/layer/Group";
 
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { Feature } from "ol";
 import { Point } from "ol/geom";
 import { Group, Vector } from "ol/layer";
@@ -9,70 +10,102 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
-import createSharedMobilityLayer from "../utils/createSharedMobilityLayer";
+import createFreeFloatMobilityLayer from "../utils/createSharedMobilityLayer";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
-function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
-  const { map } = useMapContext();
+export type GroupOptions = Options & Record<string, unknown>;
+
+function RvfSharedMobilityLayerGroup(props: GroupOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setSharedMobilityLayerGroup } = useRvfContext();
 
   const group = useMemo(() => {
-    const sharingStationsBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_bicycle",
-      "green",
-    );
-    sharingStationsBicycle.set("title", "Stations Bicycle");
-
-    const sharingStationsCar = createMobiDataBwWfsLayer(
-      "sharing_stations_car",
-      "green",
-    );
-    sharingStationsCar.set("title", "Stations Car");
-
-    const sharingStationsCargoBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_cargo_bicycle",
-      "green",
-    );
-    sharingStationsCargoBicycle.set("title", "Stations Cargo Bicycle");
-
-    const sharingStationsScooterStanding = createMobiDataBwWfsLayer(
-      "sharing_stations_scooters_standing",
-      "purple",
-    );
-    sharingStationsScooterStanding.set("title", "Stations Scooter");
-
-    const sharingVehicles = createSharedMobilityLayer(
-      "sharing_vehicles",
-      "green",
-    );
-    sharingVehicles.set("title", "Free Floating");
+    if (!baseLayer) {
+      return null;
+    }
 
-    return new Group({
+    const sharingBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "bike";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "bike"),
+      ],
+      title: "Fahrrad",
+    } as GroupOptions);
+
+    const sharingCar = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "car";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_car", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "car"),
+      ],
+      title: "Auto",
+    } as GroupOptions);
+
+    const sharingCargoBicycle = new Group({
       layers: [
-        sharingStationsBicycle,
-        sharingStationsCar,
-        sharingStationsCargoBicycle,
-        sharingStationsScooterStanding,
-        sharingVehicles,
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "cargo_bike";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_cargo_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "cargo_bike"),
       ],
+      title: "Cargobike",
+    } as GroupOptions);
+
+    const sharingScooter = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "hitchhiking";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_scooters_standing", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "scooter"),
+      ],
+      title: "E-Roller",
+    } as GroupOptions);
+
+    return new Group({
+      layers: [sharingBicycle, sharingCar, sharingCargoBicycle, sharingScooter],
       ...props,
     });
-  }, [props]);
+  }, [baseLayer, props]);
 
   // Reload features every minute
   useEffect(() => {
     const interval = window.setInterval(() => {
-      group.getLayers().forEach((layer: Vector) => {
-        // @ts-expect-error - private property
-        layer.getSource().loadedExtentsRtree_.clear();
-        layer.getSource().clear(true);
-        layer.getSource().changed();
-
-        // For cluster source
-        (
+      group.getLayers().forEach((layer: Group) => {
+        layer.getLayers().forEach((layer: MaplibreStyleLayer | Vector) => {
+          const source = layer.getSource();
+          source?.refresh();
+
+          // For cluster source
           (
-            layer.getSource() as Cluster<Feature<Point>>
-          )?.getSource?.() as VectorSource<Feature<Point>>
-        )?.refresh();
+            (source as Cluster<Feature<Point>>)?.getSource?.() as VectorSource<
+              Feature<Point>
+            >
+          )?.refresh();
+        });
       });
     }, 60000);
     return () => {
@@ -80,6 +113,10 @@ function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
     };
   }, [group]);
 
+  useEffect(() => {
+    setSharedMobilityLayerGroup(group);
+  }, [group, setSharedMobilityLayerGroup]);
+
   useEffect(() => {
     if (!map || !group) {
       return;

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -110,8 +110,16 @@ function SingleClickListener() {
         setSelectedFeature(null);
         setSelectedFeatures([]);
       } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
+        const feats = [];
+        features.forEach((feature) => {
+          if (feature.get("features")) {
+            feats.push(...feature.get("features"));
+          } else {
+            feats.push(feature);
+          }
+        });
+        setSelectedFeatures(feats);
+        setSelectedFeature(feats[0]);
       }
     },
     [

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -4,15 +4,18 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setTarifZonenLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
+      isQueryable: false,
       layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
         return (
           metadata?.["rvf.filter"] === "tarifzonen" ||
@@ -24,6 +27,10 @@ function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setTarifZonenLayer(layer);
+  }, [layer, setTarifZonenLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfTopics/RvfTopics.tsx

@@ -1,4 +1,6 @@
+import { getUid } from "ol";
 import { Group } from "ol/layer";
+import BaseLayer from "ol/layer/Base";
 import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
@@ -9,36 +11,31 @@ import useMapContext from "../utils/hooks/useMapContext";
 export type RvfTopicsProps = {} & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
+const getConfigForLayer = (layer: BaseLayer) => {
+  return {
+    childItems:
+      (layer as Group)
+        ?.getLayers?.()
+        .getArray()
+        .map((subLayer) => {
+          return getConfigForLayer(subLayer);
+        }) || [],
+    id: getUid(layer),
+    isControlChecked: layer.getVisible(),
+    layer,
+    selectionType: SelectionType.CHECKBOX,
+    title: layer.get("title"),
+  };
+};
+
 function RvfTopics(props: RvfTopicsProps) {
   const { map } = useMapContext();
+
   const layers = map
     .getLayers()
     .getArray()
-    .filter((layer) => {
-      return !layer.get("isNotInLayerTree");
-    })
     .map((layer) => {
-      return {
-        childItems:
-          (layer as Group)
-            ?.getLayers?.()
-            .getArray()
-            .map((subLayer) => {
-              return {
-                childItems: [],
-                id: (Math.random() + 1).toString(36).substring(7),
-                isControlChecked: subLayer.getVisible(),
-                layer: subLayer,
-                selectionType: SelectionType.CHECKBOX,
-                title: subLayer.get("title"),
-              };
-            }) || [],
-        id: (Math.random() + 1).toString(36).substring(7),
-        isControlChecked: layer.getVisible(),
-        layer,
-        selectionType: SelectionType.CHECKBOX,
-        title: layer.get("title"),
-      };
+      return getConfigForLayer(layer);
     });
 
   return <RvfLayerTree layers={layers} {...props} />;

package/src/utils/constants.ts

@@ -7,3 +7,5 @@ export const RVF_EXTENT_3857 = transformExtent(
   "EPSG:4326",
   "EPSG:3857",
 );
+
+export const LAYER_PROP_IS_EXPORTING = "isExporting";

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -6,6 +6,8 @@ import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
 import { Vector } from "ol/source";
 import { Circle, Fill, Stroke, Style, Text } from "ol/style";
 
+import { LAYER_PROP_IS_EXPORTING } from "./constants";
+
 function createMobiDataBwWfsLayer(
   name: string,
   color: string,
@@ -33,6 +35,7 @@ function createMobiDataBwWfsLayer(
       );
     },
   });
+
   const style = new Style({
     image: new Circle({
       declutterMode: "declutter",
@@ -59,26 +62,6 @@ function createMobiDataBwWfsLayer(
     }),
   });
 
-  const styleFunction = (feature) => {
-    const clone = style.clone();
-    clone.getText().setText(feature.get("num_vehicles_available")?.toString());
-    const isFreeFloat = !feature.get("num_vehicles_available")?.toString();
-    if (isFreeFloat) {
-      (clone.getImage() as Circle).setRadius(6);
-    }
-    clone.setZIndex(parseInt(getUid(feature), 10));
-    return [
-      clone,
-      // new Style({
-      //   text: new Text({
-      //     fill: new Fill({ color: color }),
-      //     offsetY: 15,
-      //     stroke: new Stroke({ color: "white", width: 2 }),
-      //     text: feature.get("form_factor") || name,
-      //   }),
-      // }),
-    ];
-  };
   const layer = new VectorLayer({
     // @ts-expect-error - custom properties
     isQueryable: true,
@@ -110,6 +93,31 @@ function createMobiDataBwWfsLayer(
     // },
   });
 
+  const styleFunction = (feature: Feature) => {
+    if (layer.get(LAYER_PROP_IS_EXPORTING)) {
+      return null;
+    }
+    const clone = style.clone();
+
+    clone.getText().setText(feature.get("num_vehicles_available")?.toString());
+    const isFreeFloat = !feature.get("num_vehicles_available")?.toString();
+    if (isFreeFloat) {
+      (clone.getImage() as Circle).setRadius(6);
+    }
+    clone.setZIndex(parseInt(getUid(feature), 10));
+    return [
+      clone,
+      // new Style({
+      //   text: new Text({
+      //     fill: new Fill({ color: color }),
+      //     offsetY: 15,
+      //     stroke: new Stroke({ color: "white", width: 2 }),
+      //     text: feature.get("form_factor") || name,
+      //   }),
+      // }),
+    ];
+  };
+
   source.on("addfeature", function (event) {
     const feature = event.feature;
     feature.setStyle(styleFunction);

package/src/utils/createSharedMobilityLayer.ts

@@ -14,6 +14,7 @@ import car from "../icons/Car/verkehrstraeger-auto-2px-white.svg";
 import cargoBicycle from "../icons/CargoBicycle/verkehrstraeger-lastenrad-2px-white.svg";
 // @ts-expect-error -  load svg as data url
 import scooter from "../icons/Scooter/scooter.svg";
+import { LAYER_PROP_IS_EXPORTING } from "./constants";
 
 const iconByFormFactor = {
   bicycle,
@@ -25,6 +26,7 @@ const iconByFormFactor = {
 function createSharedMobilityLayer(
   name: string,
   color: string,
+  formFactor: string,
   layerOptions: Options = {
     minZoom: 17.99,
   },
@@ -54,21 +56,27 @@ function createSharedMobilityLayer(
       xhr.onerror = onError;
       xhr.onload = function () {
         if (xhr.status == 200) {
-          const features = source.getFormat().readFeatures(xhr.responseText);
-          if (features) {
-            features.forEach((feature) => {
-              // The WFS returns everytime a different id for the same vehicle, so we set the vehicle_id as id.
-              // and remove the previous feature with the same id.
-              const vehicleId = feature.get("vehicle_id");
-              if (vehicleId) {
-                feature.setId(vehicleId);
-                const featuresToRemove = source.getFeatures().filter((feat) => {
-                  return feat.getId() === feature.getId();
-                });
-                source.removeFeatures(featuresToRemove);
+          const features = source
+            .getFormat()
+            .readFeatures(xhr.responseText)
+            ?.filter((feature) => {
+              if (formFactor) {
+                return feature.get("form_factor") === formFactor;
               }
+              return true;
             });
-          }
+          features?.forEach((feature) => {
+            // The WFS returns everytime a different id for the same vehicle, so we set the vehicle_id as id.
+            // and remove the previous feature with the same id.
+            const vehicleId = feature.get("vehicle_id");
+            if (vehicleId) {
+              feature.setId(vehicleId);
+              const featuresToRemove = source.getFeatures().filter((feat) => {
+                return feat.getId() === feature.getId();
+              });
+              source.removeFeatures(featuresToRemove);
+            }
+          });
           source.addFeatures(features);
           success(features);
         } else {
@@ -135,6 +143,9 @@ function createSharedMobilityLayer(
   });
 
   const styleFunction = (feature) => {
+    if (layer.get(LAYER_PROP_IS_EXPORTING)) {
+      return null;
+    }
     const clone = style.clone();
 
     clone.getText().setText(feature.get("features").length);

package/src/utils/exportPdf.ts

@@ -526,6 +526,8 @@ export interface CopyrightExportOptions {
 
 export interface MapExportOptions {
   copyrightOptions?: CopyrightExportOptions;
+  onAfter?: (map: Map, layers: BaseLayer[]) => void;
+  onBefore?: (map: Map, layers: BaseLayer[]) => void;
   pixelRatio?: number;
   text?: string;
   useCopyright?: boolean;
@@ -539,11 +541,14 @@ async function exportPdf(
   mapExportOptions: MapExportOptions = {},
 ): Promise<boolean> {
   const {
+    onAfter,
+    onBefore,
     pixelRatio = 3,
     useCopyright = true,
     useMaxExtent = false,
     usePlaceholder = true,
   } = mapExportOptions;
+
   const format = formatOptions?.format || "A4";
   const sizePt = sizesByFormat72Dpi[format as string] || (format as number[]);
   const size = sizePt.map((n) => {
@@ -590,6 +595,9 @@ async function exportPdf(
 
   map.getLayers().clear();
 
+  // Hide/show some layer before export
+  onBefore?.(map, layers);
+
   // Creates a new map with proper size and extent
   const mapToExport = await createMapToExport(map, layers, extent, size, {
     pixelRatio: pixelRatio,
@@ -612,6 +620,9 @@ 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);
 

package/src/utils/getAllLayers.ts

@@ -0,0 +1,25 @@
+import { Collection } from "ol";
+import BaseLayer from "ol/layer/Base";
+import Group from "ol/layer/Group";
+
+const getAllLayers = (
+  layersOrLayerGroup: BaseLayer[] | Collection<BaseLayer> | Group,
+) => {
+  const allLayers = [];
+  function addLayersFrom(layers: BaseLayer[] | Collection<BaseLayer>) {
+    layers.forEach(function (layer) {
+      if (layer instanceof Group) {
+        addLayersFrom((layer as Group).getLayers());
+      } else {
+        allLayers.push(layer);
+      }
+    });
+  }
+  addLayersFrom(
+    (layersOrLayerGroup as Group)?.getLayers?.() ||
+      (layersOrLayerGroup as BaseLayer[] | Collection<BaseLayer>),
+  );
+  return allLayers;
+};
+
+export default getAllLayers;

package/src/utils/hooks/useRvfContext.tsx

@@ -1,29 +1,62 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { Feature } from "ol";
+import { Group } from "ol/layer";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
 export interface RvfContextType {
   isExportMenuOpen: boolean;
+  lineNetworkPlanLayer: MaplibreStyleLayer;
+  poisLayer: MaplibreStyleLayer;
   selectedFeature: Feature;
   selectedFeatures: Feature[];
+  sellingPointsLayer: MaplibreStyleLayer;
   setIsExportMenuOpen: (isOpen: boolean) => void;
+  setLineNetworkPlanLayer: (layer: MaplibreStyleLayer) => void;
+  setPoisLayer: (layer: MaplibreStyleLayer) => void;
   setSelectedFeature: (feature: Feature) => void;
   setSelectedFeatures: (features: Feature[]) => void;
+  setSellingPointsLayer: (layer: MaplibreStyleLayer) => void;
+  setSharedMobilityLayerGroup: (group: Group) => void;
+  setTarifZonenLayer: (layer: MaplibreStyleLayer) => void;
+  sharedMobilityLayerGroup: Group;
+  tarifZonenLayer: MaplibreStyleLayer;
 }
 
 export const RvfContext = createContext<RvfContextType>({
   isExportMenuOpen: false,
+  lineNetworkPlanLayer: null,
+  poisLayer: null,
   selectedFeature: null,
   selectedFeatures: [],
+  sellingPointsLayer: null,
   setIsExportMenuOpen: () => {
     console.warn("setIsExportMenuOpen is not implemented");
   },
+  setLineNetworkPlanLayer: () => {
+    console.warn("setLineNetworkPlanLayer is not implemented");
+  },
+  setPoisLayer: () => {
+    console.warn("setPoisLayer is not implemented");
+  },
+
   setSelectedFeature: () => {
     console.warn("setSelectedFeature is not implemented");
   },
   setSelectedFeatures: () => {
     console.warn("setSelectedFeatures is not implemented");
   },
+  setSellingPointsLayer: () => {
+    console.warn("setSellingPointsLayer is not implemented");
+  },
+  setSharedMobilityLayerGroup: () => {
+    console.warn("setSharedMobilityLayerGroup is not implemented");
+  },
+  setTarifZonenLayer: () => {
+    console.warn("setTarifZonenLayer is not implemented");
+  },
+  sharedMobilityLayerGroup: null,
+  tarifZonenLayer: null,
 });
 
 const useRvfContext = (): RvfContextType => {

package/tailwind.config.mjs

@@ -11,13 +11,13 @@ const getClamp = (min, max) => {
     min +
     "px + (" +
     max +
-    "-" +
+    " - " +
     min +
-    ") * (100vw - " +
+    ") * (100cqw - " +
     minScreenSize +
-    "px)/( " +
+    "px) / ( " +
     maxScreenSize +
-    "-" +
+    " - " +
     minScreenSize +
     ")), " +
     max +
@@ -25,6 +25,28 @@ const getClamp = (min, max) => {
   );
 };
 
+// const getClamp = (min, max) => {
+//   return (
+//     "clamp(" +
+//     min +
+//     "px, calc(" +
+//     min +
+//     "px + (" +
+//     max +
+//     "-" +
+//     min +
+//     ") * (100vw - " +
+//     minScreenSize +
+//     "px)/( " +
+//     maxScreenSize +
+//     "-" +
+//     minScreenSize +
+//     ")), " +
+//     max +
+//     "px )"
+//   );
+// };
+
 export default {
   plugins: [containerQueries],
   theme: {
@@ -39,33 +61,10 @@ export default {
         ultradarkgray: "#2D2D2C", // another grey with no name
         ultralightgrey: "#F5F5F5", // ultralight grey
       },
-      height: {
-        innerControl: "12px",
-        inputControl: "20px",
-      },
-      margin: {
-        "4px": "4px",
-        "7px": "7px",
-      },
-      maxHeight: {
-        button: "40px",
-      },
-      maxWidth: {
-        button: "40px",
-      },
-      padding: {
-        1.75: "7px",
-      },
-      screens: {
-        large: "993px",
-        medium: "577px",
-      },
       width: {
-        check: "6px",
-        innerControl: "12px",
-        inputControl: "20px",
-        largeMenu: "350px",
-        mediumMenu: "300px",
+        10: "40px", // for Route Schedule
+        8: "32px", // for Route Schedule
+        9: "36px", // for Route Schedule
       },
     },
     fontFamily: {
@@ -84,6 +83,7 @@ export default {
       lg: getClamp(19, 25), // H4
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
+      xs: getClamp(13, 15), // small
     },
   },
 };