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

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

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -13,7 +13,7 @@ import {
 // const geopsMapsApiLink = `<a href="https://developer.geops.io/apis/maps">geOps Maps API</a>`;
 // const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
 const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO API</a>`;
-const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
+// const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
 
 export interface WebComponentAttributeDoc {
   defaultValue?: string;
@@ -125,14 +125,26 @@ const attrs: MobilityMapAttributes = {
        The layers available are : ${LAYERS_WITH_LINK}.<br/>
        Definition for a layer :
 <pre style="font-size: 12px; overflow: auto;">{
-  liniennetz: { // The layer name, here the liniennetz layer.
-    link: { // Define the link to display int footer of the details view, if not defined no link is displayed.
-      text: "Zu den Liniennetzplänen",  // The text of the link, if not defined the title is used.
-      href: "https://www.rvf.de/fahrtinfo/netzplan", // The url of the link, if not defined no link is displayed.
+  "liniennetz": {
+    "link": {
+      "href": "https://www.rvf.de/fahrtinfo/netzplan",
+      "show": true,
+      "text": "Zu den Liniennetzplänen"
     },
-    title: "Liniennetzpläne", // Text displayed on the layer tree and in the header of the details view.
+    "title": "Liniennetzpläne"
   }
-</pre>}`,
+</pre>}
+<br/>
+where:
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li><i>link</i> defined a external link displayed at the bottom of the detail view</li>
+    <ul style="list-style-type: disc; padding-left: 40px;">
+      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li
+      <li><i>text</i> is the text display as a link</li>
+      <li><i>show</i> show/hide the link in the details view</li>
+    </ul>
+  <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
+</ul>`,
   },
   layertree: {
     defaultValue: "true",
@@ -168,7 +180,7 @@ const attrs: MobilityMapAttributes = {
     // "Commas separated list of mots to display on the Realtime layer.<br/>Ex: rail,bus,coach,foot,tram,subway,gondola,funicular,ferry,car .",
   },
   notification: {
-    defaultValue: "false",
+    defaultValue: "true",
     description: `Add the notification layer to the map. This layer will display informations about disruptions on the network. Data comes from
         our ${geopsMocoApiLink} .`,
     type: "boolean",
@@ -183,7 +195,7 @@ const attrs: MobilityMapAttributes = {
   },
   notificationurl: {
     defaultValue: "https://moco.geops.io/api/v2/",
-    description: `The ${geopsMocoApiLink} url to use.`,
+    description: null, // `The ${geopsMocoApiLink} url to use.`,
   },
   permalink: {
     defaultValue: "false",
@@ -203,7 +215,7 @@ const attrs: MobilityMapAttributes = {
   },
   realtime: {
     defaultValue: "true",
-    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
+    description: null, //`Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
     type: "boolean",
   },
   realtimebboxparameters: {

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -3,7 +3,7 @@ import { memo, useId, useState } from "preact/compat";
 import RvfCheckbox from "../RvfCheckbox";
 import RvfSelect from "../RvfSelect";
 import Button from "../ui/Button";
-import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
+import { LAYER_PROP_IS_EXPORTING, RVF_EXTENT_3857 } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
 import getAllLayers from "../utils/getAllLayers";
 import useMapContext from "../utils/hooks/useMapContext";
@@ -66,6 +66,8 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
               map,
               { format },
               {
+                maxExtent: useMaxExtent ? RVF_EXTENT_3857 : undefined,
+
                 onAfter: (mapp, layers) => {
                   if (
                     realtimeLayer &&
@@ -78,7 +80,6 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                   });
                   mapp.set(LAYER_PROP_IS_EXPORTING, false);
                 },
-
                 onBefore: (mapp, layers) => {
                   mapp.set(LAYER_PROP_IS_EXPORTING, true);
                   if (realtimeLayer) {
@@ -91,7 +92,6 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                     layer.set(LAYER_PROP_IS_EXPORTING, true);
                   });
                 },
-                useMaxExtent,
               },
             );
             setTimeout(() => {

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -703,7 +703,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                   hasLayerTree={hasLayerTree}
                   hasPrint={hasPrint}
                   hasRealtime={hasRealtime}
-                  hasSearch={false}
+                  hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
                   hasShare={hasShare}
                 />
               </Overlay>

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/exportPdf.ts

@@ -4,8 +4,6 @@ import { Map } from "ol";
 import { getBottomRight, getTopLeft } from "ol/extent";
 import View from "ol/View";
 
-import { RVF_EXTENT_3857 } from "./constants";
-
 import type { jsPDFOptions } from "jspdf";
 import type { Coordinate } from "ol/coordinate";
 import type { Extent } from "ol/extent";
@@ -532,12 +530,12 @@ export interface CopyrightExportOptions {
 
 export interface MapExportOptions {
   copyrightOptions?: CopyrightExportOptions;
+  maxExtent?: number[];
   onAfter?: (map: Map, layers: BaseLayer[]) => void;
   onBefore?: (map: Map, layers: BaseLayer[]) => void;
   pixelRatio?: number;
   text?: string;
   useCopyright?: boolean;
-  useMaxExtent?: boolean;
   usePlaceholder?: boolean;
 }
 
@@ -547,11 +545,11 @@ async function exportPdf(
   mapExportOptions: MapExportOptions = {},
 ): Promise<boolean> {
   const {
+    maxExtent,
     onAfter,
     onBefore,
     pixelRatio = 3,
     useCopyright = true,
-    useMaxExtent = false,
     usePlaceholder = true,
   } = mapExportOptions;
 
@@ -560,7 +558,7 @@ async function exportPdf(
   const size = sizePt.map((n) => {
     return (n * 96) / 72;
   });
-  const extent = useMaxExtent ? RVF_EXTENT_3857 : null; //map.getView().calculateExtent();
+  const extent = maxExtent;
 
   // Save current pixel ratio
   const actualPixelRatio = window.devicePixelRatio;

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;
     },
   );