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

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

package/src/NotificationLayer/NotificationLayer.tsx

@@ -39,10 +39,10 @@ const useNotifications = () => {
     if (!baseLayer.loaded) {
       // @ts-expect-error bad type definition
       baseLayer.once("load", () => {
-        return setStyleMetadata(baseLayer.mbMap?.getStyle()?.metadata);
+        return setStyleMetadata(baseLayer.mapLibreMap?.getStyle()?.metadata);
       });
     } else {
-      setStyleMetadata(baseLayer.mbMap?.getStyle()?.metadata);
+      setStyleMetadata(baseLayer.mapLibreMap?.getStyle()?.metadata);
     }
   }, [baseLayer, baselayer]);
 

package/src/RouteIcon/RouteIcon.tsx

@@ -6,6 +6,7 @@ import {
 } from "mobility-toolbox-js/types";
 import { JSX, PreactDOMAttributes } from "preact";
 
+import NoRealtime from "../icons/NoRealtime";
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
 import getTextColor from "../utils/getTextColor";
 import getTextFontForVehicle from "../utils/getTextFontForVehicle";
@@ -45,24 +46,32 @@ function RouteIcon({
 
   const fontSize = fontSizesByNbLetters[text.length] || 12;
   const font = getTextFontForVehicle(fontSize, text);
+  const hasRealtime = stopSequence?.has_realtime_journey;
+  const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
 
   if (borderColor === backgroundColor) {
     borderColor = "black";
   }
 
   return (
-    <span
-      className="flex h-[40px] min-w-[40px] items-center justify-center rounded-full border px-1"
-      style={{
-        backgroundColor,
-        borderColor,
-        color,
-        font,
-      }}
-      {...props}
-    >
-      {children || text}
-    </span>
+    <>
+      <span
+        className="relative flex h-[40px] min-w-[40px] items-center justify-center rounded-full border px-1"
+        style={{
+          backgroundColor,
+          borderColor,
+          color,
+          font,
+        }}
+        {...props}
+      >
+        {children || text}
+
+        {!isCancelled && !hasRealtime && (
+          <NoRealtime className={"absolute -left-2 -top-2"} />
+        )}
+      </span>
+    </>
   );
 }
 export default RouteIcon;

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -74,9 +74,11 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
                   getAllLayers(layers).forEach((layer) => {
                     layer.set(LAYER_PROP_IS_EXPORTING, false);
                   });
+                  map.set(LAYER_PROP_IS_EXPORTING, false);
                 },
 
                 onBefore: (map, layers) => {
+                  map.set(LAYER_PROP_IS_EXPORTING, true);
                   prevRealtimeLayerVisibility = realtimeLayer.getVisible();
                   if (realtimeLayer.getVisible()) {
                     realtimeLayer.setVisible(false);

package/src/RvfFeatureDetails/RVFSellingPointDetails/RVFSellingPointDetails.tsx

@@ -0,0 +1,47 @@
+import { Feature } from "ol";
+
+import Automat from "../../icons/Automat";
+import InPerson from "../../icons/InPerson";
+import Video from "../../icons/Video";
+
+const ICON_BY_OPERATED_BY = {
+  Automat: <Automat />,
+  Persönlich: <InPerson />,
+  Videozentrum: <Video />,
+};
+
+function RVFSellingPointDetails({ feature }: { feature: Feature }) {
+  if (!feature) {
+    return null;
+  }
+  const {
+    city,
+    name,
+    operated_by: operatedBy,
+    street,
+    telephone_info: phone,
+    zip_code: zip,
+  } = feature.getProperties();
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-2">
+        <span className={"min-w-[26px]"}>
+          {ICON_BY_OPERATED_BY[operatedBy]}
+        </span>
+        <span>{name}</span>
+      </div>
+      <div className="flex flex-col">
+        {phone && <div>{phone}</div>}
+        {street && <div>{street}</div>}
+        {(zip || city) && (
+          <div className="flex gap-2">
+            <span>{zip}</span>
+            <span>{city}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RVFSellingPointDetails;

package/src/RvfFeatureDetails/RVFSellingPointDetails/index.js

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -3,6 +3,7 @@ import type { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
+import RVFSellingPointDetails from "./RVFSellingPointDetails/RVFSellingPointDetails";
 import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
 export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
@@ -21,6 +22,7 @@ const getIsSharedMobility = (selectedFeature): boolean => {
 function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
   const { selectedFeature } = useRvfContext();
   const isSharedMobility = getIsSharedMobility(selectedFeature);
+  const isSellingPoint = !!selectedFeature.get("tickets");
 
   const showDefaultData = () => {
     return Object.entries(selectedFeature.getProperties()).map(
@@ -39,10 +41,11 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
 
   return (
     <div {...props}>
+      {isSellingPoint && <RVFSellingPointDetails feature={selectedFeature} />}
       {isSharedMobility && (
         <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
       )}
-      {!isSharedMobility && showDefaultData()}
+      {!isSharedMobility && !isSellingPoint && showDefaultData()}
     </div>
   );
 }

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -18,7 +18,10 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
     return new MaplibreStyleLayer({
       isQueryable: true,
       layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "netzplan_lines";
+        return (
+          metadata?.["rvf.filter"] === "netzplan_lines" ||
+          metadata?.["rvf.filter"] === "netzplan_stations"
+        );
       },
       maplibreLayer: baseLayer,
       minZoom: 10,

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -42,7 +42,7 @@ import RvfPoisLayer from "../RvfPoisLayer";
 import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
 import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
 import RvfShare from "../RvfShare";
-import RvfSharedMobilityLayerGroup2 from "../RvfSharedMobilityLayerGroup2";
+import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
 import RvfShareMenuButton from "../RvfShareMenuButton";
 import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
 import Topics from "../RvfTopics";
@@ -71,6 +71,13 @@ import realtimeRVFStyle from "../utils/realtimeRVFStyle";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
+const PRIORITY_FROM_TYPE = {
+  bus: 25,
+  coach: 15,
+  train: 30,
+  tram: 20,
+};
+
 export type RvfMobilityMapProps = {
   details: string;
   layers: string; // list of visible layers on load
@@ -100,9 +107,43 @@ const realtimeLayerProps = {
     line_tags: "RVF",
   },
   fullTrajectoryStyle: fullTrajectoryStyle,
+  getMotsByZoom: (z) => {
+    if (z < 9) {
+      return ["rail"];
+    }
+    return null;
+  },
+  sort: (
+    { properties: { delay: delayA, type: typeA } },
+    { properties: { delay: delayB, type: typeB } },
+  ) => {
+    // console.log(trajA, trajB);
+    if (typeA !== typeB) {
+      // console.log(trajA.properties.type, trajB.properties.type);
+      if (PRIORITY_FROM_TYPE[typeA] < PRIORITY_FROM_TYPE[typeB]) {
+        return -1;
+      }
+      return 1;
+    }
+
+    if (delayA === delayB) {
+      return 0;
+    }
+
+    if (delayA < delayB) {
+      return -1;
+    }
+    return 1;
+  },
   style: realtimeRVFStyle,
   styleOptions: {
     getBgColor: getBgColor,
+    getMaxRadiusForStrokeAndDelay: () => {
+      return 4;
+    },
+    getMaxRadiusForText: () => {
+      return 8;
+    },
     getRadius: getRadius,
     getTextColor: getTextColor,
   },
@@ -110,6 +151,7 @@ const realtimeLayerProps = {
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
+  // baselayer = "review-geops-tgma-085vyz.de.rvf",
   baselayer = "de.rvf",
   center = null,
   details = "true",
@@ -117,7 +159,9 @@ function RvfMobilityMap({
   geolocation = "true",
   layers = null,
   layertree = "true",
-  mapsurl = "https://maps.geops.io",
+  // mapsurl = "https://style-review.geops.io",
+  mapsurl = "https://maps.style-dev.geops.io",
+  // mapsurl = "https://maps.geops.io",
   maxextent = bbox,
   maxzoom = "20",
   minzoom = null,
@@ -402,7 +446,7 @@ function RvfMobilityMap({
   const stationsLayerProps = useMemo(() => {
     return {
       layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "netzplan_stations";
+        return metadata?.["general.filter"] === "stations";
       },
     };
   }, []);
@@ -492,17 +536,16 @@ function RvfMobilityMap({
                     {...realtimeLayerProps}
                   />
                 )}
-                {
-                  <StationsLayer
-                    minZoom={10}
-                    title={RVF_LAYERS_TITLES.haltestellen}
-                    {...stationsLayerProps}
-                  />
-                }
+
+                <StationsLayer
+                  minZoom={10}
+                  title={RVF_LAYERS_TITLES.haltestellen}
+                  {...stationsLayerProps}
+                />
                 {hasNotification && <NotificationLayer />}
                 <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
                 <RvfSellingPointsLayer
-                  isQueryable={false}
+                  isQueryable={true}
                   title={RVF_LAYERS_TITLES.verkaufsstellen}
                 />
                 <RvfLineNetworkPlanLayer
@@ -511,7 +554,7 @@ function RvfMobilityMap({
                   title={RVF_LAYERS_TITLES.liniennetz}
                 />
                 <RvfPoisLayer title={RVF_LAYERS_TITLES.pois} />
-                <RvfSharedMobilityLayerGroup2
+                <RvfSharedMobilityLayerGroup
                   title={RVF_LAYERS_TITLES.sharedMobility}
                 />
 

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -1,62 +1,88 @@
-import VectorLayer from "ol/layer/Vector";
-import { Vector } from "ol/source";
-import { Circle, Stroke, Style } from "ol/style";
+import { GeoJSONSource } from "maplibre-gl";
+import GeoJSON from "ol/format/GeoJSON";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { EMPTY_FEATURE_COLLECTION, SOURCE_SELECT } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
+const geojson = new GeoJSON({
+  dataProjection: "EPSG:4326",
+  featureProjection: "EPSG:3857",
+});
+
 function SingleClickListener() {
-  const { baseLayer, map } = useMapContext();
+  const { baseLayer } = useMapContext();
   const { selectedFeature } = useRvfContext();
 
-  const layer = useMemo(() => {
-    const layer = new VectorLayer({
-      source: new Vector(),
-      style: new Style({
-        image: new Circle({
-          fill: null,
-          radius: 15,
-          stroke: new Stroke({
-            color: "red",
-            width: 3,
-          }),
-        }),
-      }),
-    });
-    return layer;
-  }, []);
+  // const layer = useMemo(() => {
+  //   const layer = new VectorLayer({
+  //     source: new Vector(),
+  //     style: new Style({
+  //       image: new Circle({
+  //         fill: null,
+  //         radius: 15,
+  //         stroke: new Stroke({
+  //           color: "red",
+  //           width: 3,
+  //         }),
+  //       }),
+  //     }),
+  //   });
+  //   return layer;
+  // }, []);
+
+  const mbMap = useMemo(() => {
+    return baseLayer?.mapLibreMap;
+  }, [baseLayer?.mapLibreMap]);
 
   useEffect(() => {
     const vectorTileFeature = selectedFeature?.get("vectorTileFeature");
     selectedFeature?.set("selected", true);
+    const source = mbMap?.getSource(SOURCE_SELECT) as GeoJSONSource;
     if (selectedFeature) {
       const feature = selectedFeature.clone();
       feature.setStyle(null);
-      layer.getSource().addFeature(feature);
-      if (vectorTileFeature) {
-        baseLayer?.mapLibreMap.setFeatureState(vectorTileFeature, {
+
+      // Special highlight for the sharing mobility layer
+      if (
+        vectorTileFeature ||
+        // feature.get("station_id") ||
+        // feature.get("vehicle_id") ||
+        // feature.get("cluster_id") ||
+        feature.get("cluster_id")
+      ) {
+        mbMap?.setFeatureState(vectorTileFeature, {
           hover: true,
         });
+        if (feature.get("cluster_id")) {
+          feature.set("mot", feature.get("features")[0].get("form_factor"));
+          feature.set("provider_name", "");
+          feature.set("num_vehicles_available", feature.get("point_count"));
+        }
+
+        source?.setData(geojson.writeFeatureObject(feature));
       }
     }
+
     return () => {
-      layer?.getSource().clear();
+      source?.setData(EMPTY_FEATURE_COLLECTION);
+      // layer?.getSource().clear();
       selectedFeature?.set("selected", false);
       if (vectorTileFeature) {
-        baseLayer?.mapLibreMap?.setFeatureState(vectorTileFeature, {
+        mbMap?.setFeatureState(vectorTileFeature, {
           hover: false,
         });
       }
     };
-  }, [baseLayer?.mapLibreMap, layer, selectedFeature]);
+  }, [mbMap, selectedFeature]);
 
-  useEffect(() => {
-    layer?.setMap(map);
-    return () => {
-      layer?.setMap(null);
-    };
-  }, [layer, map]);
+  // useEffect(() => {
+  //   layer?.setMap(map);
+  //   return () => {
+  //     layer?.setMap(null);
+  //   };
+  // }, [layer, map]);
 
   return null;
 }