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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -9,10 +9,9 @@ import {
   RealtimeStopSequence,
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
-import { Map as OlMap } from "ol";
-import { transformExtent } 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";
@@ -23,33 +22,46 @@ import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
-import RvfSharedMobilityLayer from "../RvfSharedMobilityLayer";
+import RvfExportMenu from "../RvfExportMenu";
+import RvfExportMenuButton from "../RvfExportMenuButton";
+import RvfFeatureDetails from "../RvfFeatureDetails";
+import RvfFloatingMenu from "../RvfFloatingMenu";
+// 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 RvfLineNetworkPlanLayer from "../RvfLineNetworkPlanLayer";
+import Modal from "../RvfModal";
+import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
+import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
+import Topics from "../RvfTopics";
 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 { 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 rvfExtent = [7.5, 47.7, 8.45, 48.4];
-const rvfExtentTransformed = transformExtent(
-  rvfExtent,
-  "EPSG:4326",
-  "EPSG:3857",
-);
-const bbox = rvfExtentTransformed.join(",");
+const bbox = RVF_EXTENT_3857.join(",");
+
+const baseLayerProps = {
+  mapLibreOptions: {
+    maxCanvasSize: [20000, 20000], // remove 4096 limitations
+    preserveDrawingBuffer: true,
+  },
+};
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
@@ -59,7 +71,7 @@ function RvfMobilityMap({
   geolocation = "true",
   mapsurl = "https://maps.geops.io",
   maxextent = bbox,
-  maxzoom = null,
+  maxzoom = "20",
   minzoom = null,
   mots = null,
   notification = "true",
@@ -74,6 +86,7 @@ function RvfMobilityMap({
   tenant = null,
   zoom = null,
 }: RvfMobilityMapProps) {
+  const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
   const [isTracking, setIsTracking] = useState(false);
@@ -84,10 +97,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<boolean>(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 {
@@ -165,10 +182,10 @@ function RvfMobilityMap({
   ]);
 
   useEffect(() => {
-    dispatchEvent(
+    eventNodeRef.current?.dispatchEvent(
       new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
         baselayer,
-        center: x && y ? `${x},${y}` : center,
+        center,
         extent,
         geolocation,
         mapsurl,
@@ -184,7 +201,7 @@ function RvfMobilityMap({
         realtimeurl,
         search,
         tenant,
-        zoom: z || zoom,
+        zoom,
       }),
     );
   }, [
@@ -204,85 +221,107 @@ function RvfMobilityMap({
     search,
     tenant,
     zoom,
-    x,
-    y,
-    z,
     extent,
     maxextent,
   ]);
 
+  const rvfContextValue = useMemo(() => {
+    return {
+      isExportMenuOpen,
+      isLayerTreeOpen,
+      selectedFeature,
+      selectedFeatures,
+      setIsExportMenuOpen,
+      setIsLayerTreeOpen,
+      setSelectedFeature,
+      setSelectedFeatures,
+    };
+  }, [isExportMenuOpen, selectedFeature, selectedFeatures, isLayerTreeOpen]);
+
   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 />}
-              <RvfSharedMobilityLayer
-                color="red"
-                name="MobiData-BW:sharing_stations_bicycle"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_bicycle/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="blue"
-                name="MobiData-BW:sharing_stations_cargo_bicycle"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_cargo_bicycle/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="green"
-                name="MobiData-BW:sharing_stations_car"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_car/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="orange"
-                name="MobiData-BW:sharing_stations_scooters_standing"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_stations_scooters_standing/ows"
-              />
-              <RvfSharedMobilityLayer
-                color="orange"
-                minZoom={14.999}
-                name="MobiData-BW:sharing_vehicles"
-                url="https://api.mobidata-bw.de/geoserver/MobiData-BW/sharing_vehicles/ows"
-              />
+        <RvfContext.Provider value={rvfContextValue}>
+          <div
+            className="relative size-full border font-sans @container/main"
+            ref={eventNodeRef}
+            style={{ fontSize: 16 }}
+          >
+            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+              <Map className="relative flex-1 overflow-visible ">
+                <RvfFloatingMenu
+                  isOpen={isLayerTreeOpen}
+                  onClick={() => {
+                    setIsLayerTreeOpen(!isLayerTreeOpen);
+                  }}
+                  title="Kartendaten"
+                >
+                  <Topics className={"w-full px-2"} />
+                </RvfFloatingMenu>
+                <BaseLayer {...baseLayerProps} isNotInLayerTree />
+                <SingleClickListener />
 
-              <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 />
+                {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
+                {tenant && <StationsLayer />}
+                {notification === "true" && <NotificationLayer />}
+                <RvfSellingPointsLayer title="Verkaufsstellen" />
+                <RvfLineNetworkPlanLayer title="Liniennetz" />
+                <RvfTarifZonenLayer title="Tarifzonen" />
+                <RvfPoisLayer title="POIs" />
+                <RvfSharedMobilityLayerGroup title="Shared Mobility" />
+
+                <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 bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
-                <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" />
+                <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
+                  {geolocation === "true" && <GeolocationButton />}
+                  <RvfExportMenuButton />
+                </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">
+                  <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>
               )}
-            </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/RvfRadioButton/RvfRadioButton.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from "preact";
+
+export type RvfRadioButtonProps =
+  {} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+function RvfRadioButton(props: RvfRadioButtonProps) {
+  return (
+    <input
+      className="peer mr-2 h-inputControl w-inputControl rounded-full border-2 border-grey accent-red"
+      {...props}
+      type="radio"
+    />
+  );
+}
+
+export default RvfRadioButton;

package/src/RvfRadioButton/index.tsx

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

package/src/RvfSelect/RvfSelect.tsx

@@ -0,0 +1,22 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import ArrowDown from "../icons/ArrowDown";
+
+export type RvfSelectProps = {} & JSX.HTMLAttributes<HTMLSelectElement> &
+  PreactDOMAttributes;
+
+function RvfSelect({ children, className, onChange }: RvfSelectProps) {
+  return (
+    <div className="relative flex items-center text-grey">
+      <select
+        className={`min-w-12 appearance-none rounded-xl border border-grey p-2 text-base focus:outline-none ${className}`}
+        onChange={onChange}
+      >
+        {children}
+      </select>
+      <ArrowDown className="pointer-events-none absolute right-1" />
+    </div>
+  );
+}
+
+export default RvfSelect;

package/src/RvfSelect/index.tsx

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

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -0,0 +1,41 @@
+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 RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
+        return (
+          metadata?.["rvf.filter"] === "selling_points" ||
+          (source === "rvf" && sourceLayer === "selling_points")
+        );
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfSellingPointsLayer);

package/src/RvfSellingPointsLayer/index.tsx

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

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -0,0 +1,100 @@
+import type { Options } from "ol/layer/Group";
+
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Group, Vector } from "ol/layer";
+import { Cluster } from "ol/source";
+import VectorSource from "ol/source/Vector";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
+import createSharedMobilityLayer from "../utils/createSharedMobilityLayer";
+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",
+      "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");
+
+    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();
+
+        // For cluster source
+        (
+          (
+            layer.getSource() as Cluster<Feature<Point>>
+          )?.getSource?.() as VectorSource<Feature<Point>>
+        )?.refresh();
+      });
+    }, 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";