@geops/rvf-mobility-web-component 0.1.9 → 0.1.11

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -9,49 +9,67 @@ import {
   RealtimeStopSequence,
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
-import { Map as OlMap } from "ol";
-import { getCenter } from "ol/extent";
-import { fromLonLat } from "ol/proj";
+import { Feature, Map as OlMap } from "ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
 import GeolocationButton from "../GeolocationButton";
+import Cancel from "../icons/Cancel";
+import Menu from "../icons/Menu";
 import Map from "../Map";
 import { MobilityMapProps } from "../MobilityMap/MobilityMap";
 import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
+import RvfExportMenu from "../RvfExportMenu";
+import RvfExportMenuButton from "../RvfExportMenuButton";
+import RvfFeatureDetails from "../RvfFeatureDetails";
+// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
+import RvfIconButton from "../RvfIconButton";
+import Modal from "../RvfModal";
+import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
-import SingleClickListener from "../SingleClickListener/SingleClickListener";
+import SingleClickListener from "../SingleClickListener";
 import Station from "../Station";
 import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
+import TopicMenu from "../TopicMenu";
+import { RVF_EXTENT_3857 } from "../utils/constants";
 import { I18nContext } from "../utils/hooks/useI18n";
 import { MapContext } from "../utils/hooks/useMapContext";
+import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
 // @ts-expect-error bad type definition
 import style from "./index.css";
-// Notificationurl example: https://mobility-web-component-tmp.vercel.app/geops-mobility?notificationurl=https%3A%2F%2Fmoco.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&geolocation=false&realtime=false&search=false&notificationat=2024-01-25T22%3A59%3A00Z
 
 export type RvfMobilityMapProps = {} & MobilityMapProps;
 
-const extent = [7.5, 47.7, 8.45, 48.4];
-const centerRvf = fromLonLat(getCenter(extent)).join(",");
+const bbox = RVF_EXTENT_3857.join(",");
+
+const baseLayerProps = {
+  mapLibreOptions: {
+    preserveDrawingBuffer: true,
+  },
+};
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
-  center = centerRvf,
+  center = null,
+  extent = bbox,
   geolocation = "true",
   mapsurl = "https://maps.geops.io",
-  maxzoom = null,
+  maxextent = bbox,
+  maxzoom = "20",
   minzoom = null,
   mots = null,
   notification = "true",
@@ -64,8 +82,9 @@ function RvfMobilityMap({
   search = "false",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
-  zoom = "9.8",
+  zoom = null,
 }: RvfMobilityMapProps) {
+  const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
   const [isTracking, setIsTracking] = useState(false);
@@ -76,10 +95,14 @@ function RvfMobilityMap({
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [selectedFeature, setSelectedFeature] = useState<Feature>();
+  const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState(false);
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  const { x, y, z } = useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true");
 
   const mapContextValue = useMemo(() => {
     return {
@@ -88,11 +111,13 @@ function RvfMobilityMap({
       baselayer,
       baseLayer,
       center,
+      extent,
       geolocation,
       isFollowing,
       isTracking,
       map,
       mapsurl,
+      maxextent,
       maxzoom,
       minzoom,
       mots,
@@ -127,11 +152,13 @@ function RvfMobilityMap({
     baselayer,
     baseLayer,
     center,
+    extent,
     geolocation,
     isFollowing,
     isTracking,
     map,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,
@@ -153,12 +180,14 @@ function RvfMobilityMap({
   ]);
 
   useEffect(() => {
-    dispatchEvent(
+    eventNodeRef.current?.dispatchEvent(
       new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
         baselayer,
-        center: x && y ? `${x},${y}` : center,
+        center,
+        extent,
         geolocation,
         mapsurl,
+        maxextent,
         maxzoom,
         minzoom,
         mots,
@@ -170,7 +199,7 @@ function RvfMobilityMap({
         realtimeurl,
         search,
         tenant,
-        zoom: z || zoom,
+        zoom,
       }),
     );
   }, [
@@ -190,53 +219,104 @@ function RvfMobilityMap({
     search,
     tenant,
     zoom,
-    x,
-    y,
-    z,
+    extent,
+    maxextent,
   ]);
 
+  const rvfContextValue = useMemo(() => {
+    return {
+      isExportMenuOpen,
+      selectedFeature,
+      selectedFeatures,
+      setIsExportMenuOpen,
+      setSelectedFeature,
+      setSelectedFeatures,
+    };
+  }, [isExportMenuOpen, selectedFeature, selectedFeatures]);
+
   return (
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
-        <div className="relative size-full border font-sans @container/main">
-          <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
-            <Map className="relative flex-1 overflow-visible ">
-              <BaseLayer />
-              <SingleClickListener />
-              {realtime === "true" && <RealtimeLayer />}
-              {tenant && <StationsLayer />}
-              {notification === "true" && <NotificationLayer />}
-              <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
-                <ScaleLine className="bg-slate-50/70" />
-                <Copyright className="bg-slate-50/70" />
-              </div>
-              <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
-                {geolocation === "true" && <GeolocationButton />}
-              </div>
-              {search === "true" && (
-                <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
-                  <Search />
+        <RvfContext.Provider value={rvfContextValue}>
+          <div
+            className="relative size-full border font-sans @container/main"
+            ref={eventNodeRef}
+          >
+            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+              <Map className="relative flex-1 overflow-visible ">
+                <BaseLayer {...baseLayerProps} isNotInLayerTree />
+                <SingleClickListener />
+
+                {realtime === "true" && <RealtimeLayer title="Realtime data" />}
+                {tenant && <StationsLayer />}
+                {notification === "true" && <NotificationLayer />}
+                {/* <RvfLnpLayer />
+                <RvfVerkaufStellenLayer />
+                <RvfTarifZonenLayer /> */}
+                <RvfPoisLayer title="POIs" />
+
+                <RvfSharedMobilityLayerGroup title="Shared Mobility" />
+
+                <div className="absolute left-2 top-2 z-10">
+                  <RvfIconButton
+                    onClick={() => {
+                      return setIsLayerTreeOpen(!isLayerTreeOpen);
+                    }}
+                    selected={isLayerTreeOpen}
+                  >
+                    {isLayerTreeOpen ? <Cancel /> : <Menu />}
+                  </RvfIconButton>
+                  {isLayerTreeOpen && <TopicMenu map={map} />}
                 </div>
+                <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+                  <ScaleLine className="bg-slate-50/70" />
+                  <Copyright className="bg-slate-50/70" />
+                </div>
+                <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
+                  {geolocation === "true" && <GeolocationButton />}
+                </div>
+                {search === "true" && (
+                  <div className="absolute left-2 right-12 top-2 z-10 flex max-h-[90%] min-w-64 max-w-96 flex-col">
+                    <Search />
+                  </div>
+                )}
+                <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
+                  <RvfExportMenuButton />
+                  <RvfZoomButtons />
+                </div>
+              </Map>
+
+              <Overlay
+                className={"z-50"}
+                ScrollableHandlerProps={{
+                  style: { width: "calc(100% - 60px)" },
+                }}
+              >
+                {realtime === "true" && trainId && (
+                  <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+                {tenant && stationId && (
+                  <Station className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+                {selectedFeature && (
+                  <RvfFeatureDetails className="relative overflow-y-auto  overflow-x-hidden" />
+                )}
+              </Overlay>
+
+              {isExportMenuOpen && (
+                <Modal
+                  onClose={() => {
+                    setIsExportMenuOpen(false);
+                  }}
+                >
+                  <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
+                </Modal>
               )}
-            </Map>
-
-            <Overlay
-              className={"z-50"}
-              ScrollableHandlerProps={{
-                style: { width: "calc(100% - 60px)" },
-              }}
-            >
-              {realtime === "true" && trainId && (
-                <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
-              )}
-              {tenant && stationId && (
-                <Station className="relative overflow-y-auto  overflow-x-hidden" />
-              )}
-            </Overlay>
+            </div>
           </div>
-        </div>
+        </RvfContext.Provider>
       </MapContext.Provider>
     </I18nContext.Provider>
   );

package/src/RvfMobilityMap/index.css

@@ -1,13 +0,0 @@
-::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: lightgray;
-  z-index: 5;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}

package/src/RvfModal/RvfModal.tsx

@@ -0,0 +1,52 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useState } from "preact/hooks";
+
+export type ModalProps = {
+  onClose: () => void;
+} & JSX.HTMLAttributes<HTMLDialogElement> &
+  PreactDOMAttributes;
+
+function RvfModal({ children, onClose, ...props }: ModalProps) {
+  const [node, setNode] = useState<HTMLDialogElement>();
+  let hasChildren = !!children;
+  if (Array.isArray(children)) {
+    hasChildren =
+      children?.length &&
+      (children || []).find((c) => {
+        return !!c;
+      });
+  }
+
+  useEffect(() => {
+    node?.addEventListener("close", onClose);
+    return () => {
+      node?.removeEventListener("close", onClose);
+    };
+  }, [node, onClose]);
+
+  if (!hasChildren) {
+    return null;
+  }
+
+  return (
+    <dialog
+      className={
+        "absolute inset-0 z-50 flex size-full items-center justify-center bg-transparent"
+      }
+      ref={(n) => {
+        setNode(n);
+        n?.focus();
+      }}
+      {...props}
+    >
+      <button
+        className="absolute inset-0 z-0 size-full bg-black/60"
+        onClick={onClose}
+      ></button>
+      <div className="z-10 h-3/4 w-1/2 bg-white">{children}</div>
+    </dialog>
+  );
+}
+
+export default memo(RvfModal);

package/src/RvfModal/index.tsx

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

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -0,0 +1,39 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata }) => {
+        return metadata?.["mapset.filter"] === "mapset_poi";
+      },
+      maplibreLayer: baseLayer,
+      visible: false,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfPoisLayer);

package/src/RvfPoisLayer/index.tsx

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

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -0,0 +1,88 @@
+import type { Options } from "ol/layer/Group";
+
+import { Group, Vector } from "ol/layer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
+  const { map } = useMapContext();
+
+  const group = useMemo(() => {
+    const sharingStationsBicycle = createMobiDataBwWfsLayer(
+      "sharing_stations_bicycle",
+      "red",
+    );
+    sharingStationsBicycle.set("title", "Stations Bicycle");
+
+    const sharingStationsCar = createMobiDataBwWfsLayer(
+      "sharing_stations_car",
+      "blue",
+    );
+    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 = createMobiDataBwWfsLayer(
+      "sharing_vehicles",
+      "orange",
+    );
+    sharingVehicles.set("title", "Free Floating");
+    console.log("ici");
+    return new Group({
+      layers: [
+        sharingStationsBicycle,
+        sharingStationsCar,
+        sharingStationsCargoBicycle,
+        sharingStationsScooterStanding,
+        sharingVehicles,
+      ],
+      ...props,
+    });
+  }, [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();
+      });
+    }, 60000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [group]);
+
+  useEffect(() => {
+    if (!map || !group) {
+      return;
+    }
+    map.on("moveend", () => {
+      console.log("ZOOM", map.getView().getZoom());
+    });
+
+    map.addLayer(group);
+
+    return () => {
+      map.removeLayer(group);
+    };
+  });
+
+  return null;
+}
+export default memo(RvfSharedMobilityLayerGroup);

package/src/RvfSharedMobilityLayerGroup/index.tsx

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

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -0,0 +1,137 @@
+import { Feature, MapBrowserEvent } from "ol";
+import { GeoJSON } from "ol/format";
+import { unByKey } from "ol/Observable";
+import { toLonLat } from "ol/proj";
+import { useCallback, useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+import MobilityEvent from "../utils/MobilityEvent";
+
+const geojson = new GeoJSON();
+
+function SingleClickListener() {
+  const {
+    map,
+    realtimeLayer,
+    setStationId,
+    setTrainId,
+    stationId,
+    stationsLayer,
+    tenant,
+    trainId,
+  } = useMapContext();
+  const { setSelectedFeature, setSelectedFeatures } = useRvfContext();
+
+  const onPointerMove = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+      realtimeLayer?.highlight(realtimeFeature as Feature);
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      evt.map.getTargetElement().style.cursor =
+        realtimeFeature || stationFeature ? "pointer" : "default";
+    },
+    [realtimeLayer, stationsLayer, tenant],
+  );
+
+  const onSingleClick = useCallback(
+    async (evt: MapBrowserEvent<PointerEvent>) => {
+      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === realtimeLayer;
+        },
+      });
+
+      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l === stationsLayer;
+        },
+      });
+      const [stationFeature] = stationsFeatures.filter((feat) => {
+        return feat.get("tralis_network")?.includes(tenant);
+      });
+
+      const newStationId = stationFeature?.get("uid");
+
+      const newTrainId = realtimeFeature?.get("train_id");
+
+      if (newStationId && stationId !== newStationId) {
+        setStationId(newStationId);
+        setTrainId(null);
+      } else if (newTrainId && newTrainId !== trainId) {
+        setTrainId(realtimeFeature.get("train_id"));
+        setStationId(null);
+      } else {
+        setTrainId(null);
+        setStationId(null);
+      }
+
+      // Send all the features under the cursor
+      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
+        layerFilter: (l) => {
+          return l.get("isQueryable");
+        },
+      }) as Feature[];
+      evt.map.getTargetElement().dispatchEvent(
+        new MobilityEvent("singleclick", {
+          ...evt,
+          features: geojson.writeFeaturesObject(features),
+          lonlat: toLonLat(evt.coordinate),
+        }),
+      );
+      // feature.get("form_factor"); //free float
+      // feature.get("num_vehicles_available"); // wfs livedata
+      // feature.get("provider_name"); // station sharing
+
+      if (newStationId || newTrainId || !features.length) {
+        setSelectedFeature(null);
+        setSelectedFeatures([]);
+      } else {
+        setSelectedFeatures(features);
+        setSelectedFeature(features[0]);
+      }
+    },
+    [
+      stationId,
+      trainId,
+      realtimeLayer,
+      stationsLayer,
+      tenant,
+      setStationId,
+      setTrainId,
+      setSelectedFeature,
+      setSelectedFeatures,
+    ],
+  );
+
+  useEffect(() => {
+    const key = map?.on("singleclick", onSingleClick);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onSingleClick]);
+
+  useEffect(() => {
+    const key = map?.on("pointermove", onPointerMove);
+    return () => {
+      unByKey(key);
+    };
+  }, [map, onPointerMove]);
+
+  return null;
+}
+export default SingleClickListener;

package/src/RvfSingleClickListener/index.tsx

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