@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,479 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { Group } from "ol/layer";
-import { unByKey } from "ol/Observable";
-import { transformExtent } from "ol/proj";
-import { memo } from "preact/compat";
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
-
-import Bicycle from "../icons/Bike";
-import Car from "../icons/Car";
-import CargoBike from "../icons/CargoBike";
-import Ride from "../icons/Ride";
-import Scooter from "../icons/Scooter";
-import {
-  BIKE_FORM_FACTOR,
-  CAR_FORM_FACTOR,
-  CARGOBIKE_FORM_FACTOR,
-  LAYER_PROP_IS_EXPORTING,
-  LAYERS_NAMES,
-  RVF_EXTENT_4326,
-  SCOOTER_FORM_FACTOR,
-  SOURCE_FREE_FLOAT_BIKE,
-  SOURCE_FREE_FLOAT_CAR,
-  SOURCE_FREE_FLOAT_CARGO_BIKE,
-  SOURCE_FREE_FLOAT_SCOOTER,
-  SOURCE_SHARING_STATIONS,
-  WFS_FREE_FLOAT_TYPE,
-  WFS_STATIONS_TYPE,
-} from "../utils/constants";
-import useI18n from "../utils/hooks/useI18n";
-import useLayerConfig from "../utils/hooks/useLayerConfig";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
-import { fetchSharingWFS } from "../utils/sharingWFSUtils";
-
-import type { FeatureCollection, Point } from "geojson";
-import type { GeoJSONSource } from "maplibre-gl";
-import type { Extent } from "ol/extent";
-import type { Options } from "ol/layer/Group";
-
-import type {
-  SharingStationWFS,
-  SharingVehicleWFS,
-} from "../utils/sharingWFSUtils";
-
-export type GroupOptions = Options & Record<string, unknown>;
-
-const fetchStations = async (
-  typeName: string,
-  abortController: AbortController,
-  extent4326: Extent = RVF_EXTENT_4326,
-) => {
-  const stations = (await fetchSharingWFS(
-    typeName,
-    abortController,
-    extent4326,
-  )) as FeatureCollection<Point, SharingStationWFS>;
-
-  const featureCollection = {
-    features: stations.features,
-    type: "FeatureCollection",
-  };
-
-  return featureCollection as FeatureCollection<Point, SharingStationWFS>;
-};
-
-function RvfSharedMobilityLayerGroup(props: GroupOptions) {
-  const { baseLayer, map } = useMapContext();
-  const { setSharedMobilityLayerGroup } = useRvfContext();
-  const { t } = useI18n();
-  const layerConfig = useLayerConfig(LAYERS_NAMES.sharedMobility);
-
-  // Layers
-  // const [bikeFreloLayer, setBikeFreloLayer] = useState<MaplibreStyleLayer>();
-  // const [bikeOthersLayer, setBikeOthersLayer] = useState<MaplibreStyleLayer>();
-  // const [cargobikeFreloLayer, setCargobikeFreloLayer] =
-  //   useState<MaplibreStyleLayer>();
-  // const [cargobikeOthersLayer, setCargobikeOthersLayer] =
-  //   useState<MaplibreStyleLayer>();
-  // const [carGrfLayer, setCarGrfLayer] = useState<MaplibreStyleLayer>();
-  // const [carNaturLayer, setCarNaturLayer] = useState<MaplibreStyleLayer>();
-  // const [carOthersLayer, setCarOthersLayer] = useState<MaplibreStyleLayer>();
-  // const [scooterLayer, setScooterLayer] = useState<MaplibreStyleLayer>();
-
-  // GeoJSON data
-  const [stationsData, setStationsData] =
-    useState<FeatureCollection<Point, SharingStationWFS>>();
-  const [bikeFreeFloatData, setBikeFreeFloatData] =
-    useState<FeatureCollection<Point, SharingVehicleWFS>>();
-  const [cargoBikeFreeFloatData, setCargoBikeFreeFloatData] =
-    useState<FeatureCollection<Point, SharingVehicleWFS>>();
-  const [carFreeFloatData, setCarFreeFloatData] =
-    useState<FeatureCollection<Point, SharingVehicleWFS>>();
-  const [scooterFreeFloatData, setScooterFreeFloatData] =
-    useState<FeatureCollection<Point, SharingVehicleWFS>>();
-
-  const mbMap = useMemo(() => {
-    return baseLayer?.mapLibreMap;
-  }, [baseLayer?.mapLibreMap]);
-
-  useEffect(() => {
-    if (!mbMap?.style || !stationsData) {
-      return;
-    }
-    const source = mbMap.getSource(SOURCE_SHARING_STATIONS);
-    (source as GeoJSONSource)?.setData(stationsData);
-  }, [stationsData, mbMap]);
-
-  useEffect(() => {
-    if (!mbMap?.style || !bikeFreeFloatData) {
-      return;
-    }
-    const source = mbMap.getSource(SOURCE_FREE_FLOAT_BIKE);
-    (source as GeoJSONSource)?.setData(bikeFreeFloatData);
-  }, [mbMap, bikeFreeFloatData]);
-
-  useEffect(() => {
-    if (!mbMap?.style || !cargoBikeFreeFloatData) {
-      return;
-    }
-    const source = mbMap.getSource(SOURCE_FREE_FLOAT_CARGO_BIKE);
-    (source as GeoJSONSource)?.setData(cargoBikeFreeFloatData);
-  }, [mbMap, cargoBikeFreeFloatData]);
-
-  useEffect(() => {
-    if (!mbMap?.style || !carFreeFloatData) {
-      return;
-    }
-    const source = mbMap.getSource(SOURCE_FREE_FLOAT_CAR);
-    (source as GeoJSONSource)?.setData(carFreeFloatData);
-  }, [mbMap, carFreeFloatData]);
-
-  useEffect(() => {
-    if (!mbMap?.style || !scooterFreeFloatData) {
-      return;
-    }
-    const source = mbMap.getSource(SOURCE_FREE_FLOAT_SCOOTER);
-    (source as GeoJSONSource)?.setData(scooterFreeFloatData);
-  }, [mbMap, scooterFreeFloatData]);
-
-  // useEffect(() => {
-  //   const mbMap = scooterLayer?.maplibreLayer?.mapLibreMap;
-  //   if (!mbMap || !scooterData) {
-  //     return;
-  //   }
-  //   const source = mbMap.getSource(SCOOTER_SOURCE_ID);
-  //   (source as GeoJSONSource)?.setData(scooterData);
-  // }, [scooterData, scooterLayer?.maplibreLayer?.mapLibreMap]);
-
-  const group = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-
-    const bikeFrelo = new MaplibreStyleLayer({
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Bicycle />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.bikeFrelo,
-      styleLayersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "bike.frelo";
-      },
-    });
-    // setBikeFreloLayer(bikeFrelo);
-
-    const bikeOthers = new MaplibreStyleLayer({
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Bicycle />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.bikeOthers,
-      styleLayersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "bike.other";
-      },
-    });
-    // setBikeOthersLayer(bikeOthers);
-
-    const cargobikeFrelo = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "cargo_bike.frelo";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <CargoBike />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.cargobikeFrelo,
-    });
-    // setCargobikeFreloLayer(cargobikeFrelo);
-
-    const cargobikeOthers = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "cargo_bike.other";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <CargoBike />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.cargobikeOthers,
-    });
-    // setCargobikeOthersLayer(cargobikeOthers);
-
-    const carGrf = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "car.grueneflotte";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Car />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.carGrf,
-    });
-    // setCarGrfLayer(carGrf);
-
-    const carNatur = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "car.naturenergy";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Car />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.carNatur,
-    });
-    // setCarNaturLayer(carNatur);
-
-    const carOthers = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "car.other";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Car />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.carOthers,
-    });
-    // setCarOthersLayer(carOthers);
-
-    const scooter = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "scooter";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Scooter />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.eroller,
-    });
-    // setScooterLayer(scooter);
-
-    const hitchHiking = new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "hitchhiking";
-      },
-      layerTreeTitleRenderFunc: (title) => {
-        return (
-          <div className="flex items-center justify-between gap-2">
-            {t(title) || title}
-            <Ride />
-          </div>
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.mitfahrpunkte,
-    });
-
-    return new Group({
-      layers: [
-        bikeFrelo,
-        bikeOthers,
-        cargobikeFrelo,
-        cargobikeOthers,
-        carGrf,
-        carNatur,
-        carOthers,
-        scooter,
-        hitchHiking,
-      ],
-      minZoom: layerConfig?.minZoom || 15.5,
-      name: LAYERS_NAMES.sharedMobility,
-      ...props,
-    } as GroupOptions);
-  }, [baseLayer, layerConfig?.minZoom, props, t]);
-
-  const updateData = useCallback(() => {
-    // Only update when layers are visible
-    if (map?.getView()?.getZoom() < group.getMinZoom() || !group.getVisible()) {
-      return;
-    }
-    const abortController = new AbortController();
-    const extent = transformExtent(
-      map.getView().calculateExtent(),
-      "EPSG:3857",
-      "EPSG:4326",
-    );
-
-    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,
-      );
-      setStationsData(stations);
-
-      // Fill free float data
-      const freeFloatData = (await fetchSharingWFS(
-        WFS_FREE_FLOAT_TYPE,
-        abortController,
-        extent,
-      )) as FeatureCollection<Point, SharingVehicleWFS>;
-
-      const bikes: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const cargoBikes: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const cars: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const scooter: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-
-      freeFloatData.features.forEach((feature) => {
-        if (feature.properties.form_factor === BIKE_FORM_FACTOR) {
-          bikes.features.push(feature);
-        } else if (feature.properties.form_factor === CARGOBIKE_FORM_FACTOR) {
-          cargoBikes.features.push(feature);
-        } else if (feature.properties.form_factor === CAR_FORM_FACTOR) {
-          cars.features.push(feature);
-        } else if (feature.properties.form_factor === SCOOTER_FORM_FACTOR) {
-          scooter.features.push(feature);
-        }
-      });
-
-      setBikeFreeFloatData(bikes);
-      setCargoBikeFreeFloatData(cargoBikes);
-      setCarFreeFloatData(cars);
-      setScooterFreeFloatData(scooter);
-    };
-
-    void fetchData();
-
-    return () => {
-      abortController.abort();
-    };
-  }, [map, group]);
-
-  // Request all stations and vehicleson each moveend event
-  useEffect(() => {
-    const key = map?.on("moveend", () => {
-      return updateData();
-    });
-
-    // @ts-expect-error - change property can have custom values
-    const key2 = map?.on(`change:${LAYER_PROP_IS_EXPORTING}`, (evt) => {
-      // Reupdate the data after finishing eporting the map
-      if (!evt.target.get(LAYER_PROP_IS_EXPORTING)) {
-        updateData();
-      }
-    });
-    const key3 = map?.once("rendercomplete", updateData);
-    const key4 = group?.on("change:visible", (evt) => {
-      if (evt.target.getVisible()) {
-        updateData();
-      }
-    });
-    return () => {
-      unByKey([key, key2, key3, key4]);
-    };
-  }, [map, updateData, mbMap, group]);
-
-  // Reload features every minute
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      updateData();
-    }, 60000);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [group, updateData]);
-
-  useEffect(() => {
-    setSharedMobilityLayerGroup(group);
-  }, [group, setSharedMobilityLayerGroup]);
-
-  // Override style layer zoom range to be able to display them at the right zoom level without modifying the style
-  // See TGSRVF-149
-  useEffect(() => {
-    if (layerConfig?.minZoom === undefined || !group) {
-      return;
-    }
-    const styleLayers = mbMap?.getStyle()?.layers;
-    const applyZoomRange = (evt) => {
-      group?.getLayersArray().forEach((layer: MaplibreStyleLayer) => {
-        evt.target
-          ?.getStyle()
-          ?.layers?.filter(layer.layersFilter)
-          .map((styleLayer) => {
-            return styleLayer.id;
-          })
-          .forEach((layerId: string) => {
-            if (evt.target?.getLayer(layerId)) {
-              evt.target.setLayerZoomRange(layerId, group.getMinZoom() - 1, 24);
-            }
-          });
-      });
-    };
-    if (!styleLayers) {
-      void mbMap?.once("idle", applyZoomRange);
-      return;
-    }
-    applyZoomRange({ target: mbMap });
-
-    return () => {
-      mbMap?.off("idle", applyZoomRange);
-    };
-  }, [mbMap, group, layerConfig?.minZoom]);
-
-  useEffect(() => {
-    if (!map || !group) {
-      return;
-    }
-    map.addLayer(group);
-
-    return () => {
-      map.removeLayer(group);
-    };
-  }, [map, group]);
-
-  return null;
-}
-export default memo(RvfSharedMobilityLayerGroup);

package/src/RvfSharedMobilityLayerGroup/index.tsx

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

package/src/RvfStationsLayer/RvfStationsLayer.tsx

@@ -1,19 +0,0 @@
-import { memo } from "preact/compat";
-
-import StationsLayer from "../StationsLayer/StationsLayer";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol";
-
-const stationsLayerProps = () => {
-  return {
-    layersFilter: ({ metadata }) => {
-      return metadata?.["general.filter"] === "stations";
-    },
-    minZoom: 10,
-  };
-};
-function RvfStationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
-  return <StationsLayer {...stationsLayerProps} {...props} />;
-}
-
-export default memo(RvfStationsLayer);

package/src/RvfStationsLayer/index.tsx

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

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -1,48 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LAYERS_NAMES } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-
-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 }) => {
-        return metadata?.["rvf.filter"] === "zones";
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.tarifzonen,
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    setTarifZonenLayer(layer);
-  }, [layer, setTarifZonenLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(RvfTarifZonenLayer);

package/src/RvfTarifZonenLayer/index.tsx

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

package/src/ScaleLine/ScaleLine.tsx

@@ -1,52 +0,0 @@
-import ScaleLineControl from "ol/control/ScaleLine";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-
-// @ts-expect-error bad type definition
-import style from "./index.css";
-
-import type { Options as ScaleLineOptions } from "ol/control/ScaleLine";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-type ScaleLineProps = {
-  options?: ScaleLineOptions;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function ScaleLine({ options, ...props }: ScaleLineProps) {
-  const { map } = useMapContext();
-  const [target, setTarget] = useState<HTMLElement>();
-  const control = useMemo(() => {
-    if (!target) {
-      return null;
-    }
-    return new ScaleLineControl({ target, ...options });
-  }, [options, target]);
-
-  useEffect(() => {
-    if (!map || !control) {
-      return;
-    }
-    map.addControl(control);
-
-    return () => {
-      if (map && control) {
-        map.removeControl(control);
-      }
-    };
-  }, [map, control]);
-
-  return (
-    <div
-      ref={(node) => {
-        setTarget(node);
-      }}
-      {...props}
-    >
-      <style>{style}</style>
-    </div>
-  );
-}
-
-export default ScaleLine;

package/src/ScaleLine/index.css

@@ -1,6 +0,0 @@
-.ol-scale-line  {
-  position:relative;
-  left: unset;
-  bottom: unset;
-  background:unset;
-}

package/src/ScaleLine/index.tsx

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

package/src/ScrollableHandler/ScrollableHandler.tsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type ScrollableHandlerProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function ScrollableHandler(props: ScrollableHandlerProps) {
-  const [elt, setElt] = useState<HTMLElement>();
-  const [overlayElt, setOverlayElt] = useState<HTMLElement>();
-  const { children } = props;
-
-  useEffect(() => {
-    // Clean css added by the scroller
-    return () => {
-      if (overlayElt) {
-        overlayElt.style.height = "";
-        overlayElt.style.maxHeight = "";
-      }
-    };
-  }, [overlayElt]);
-
-  return (
-    <div
-      ref={(node) => {
-        if (node) {
-          setElt(node);
-          setOverlayElt(node.parentElement);
-        }
-      }}
-      {...props}
-      onPointerDown={(evt) => {
-        elt.setPointerCapture(evt.pointerId);
-
-        const mapRect = overlayElt.parentElement.getBoundingClientRect();
-        const eltRect = elt.getBoundingClientRect();
-        const deltaToTop = mapRect.top + (evt.clientY - eltRect.top);
-
-        function onDragg(event: PointerEvent) {
-          overlayElt.style.height = `calc(100% - ${
-            event.clientY - deltaToTop
-          }px)`;
-          overlayElt.style.maxHeight = `100%`;
-        }
-
-        function onDragStop(event: PointerEvent) {
-          (event.target as HTMLElement).releasePointerCapture(evt.pointerId);
-          document.removeEventListener("pointermove", onDragg);
-          document.removeEventListener("pointerup", onDragStop);
-        }
-        document.addEventListener("pointerup", onDragStop);
-        document.addEventListener("pointermove", onDragg);
-        document.addEventListener("pointercancel", (event: PointerEvent) => {
-          document.removeEventListener("pointermove", onDragg);
-          document.removeEventListener("pointerup", onDragStop);
-          event.stopPropagation();
-          event.preventDefault();
-        });
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default ScrollableHandler;

package/src/ScrollableHandler/index.tsx

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