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

package/input.css

@@ -32,3 +32,7 @@ html {
     @apply text-lg;
   }
 }
+
+.button-map {
+  @apply bg-blue-500 text-white;
+}

package/package.json

@@ -2,19 +2,19 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.0.0-beta.38",
-    "ol": "^10.3.0",
+    "mobility-toolbox-js": "3.0.0",
+    "ol": "^10.3.1",
     "preact": "^10.25.1",
     "preact-custom-element": "^4.3.0",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "rosetta": "^1.1.0"
   },
   "devDependencies": {
@@ -32,7 +32,7 @@
     "eslint": "^9.16.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-perfectionist": "^4.1.2",
+    "eslint-plugin-perfectionist": "^4.2.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -46,9 +46,9 @@
     "jest-preset-preact": "^4.1.1",
     "next": "15.0.3",
     "preact-render-to-string": "^6.5.11",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.16",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.17.0"

package/src/GeolocationButton/GeolocationButton.tsx

@@ -5,6 +5,8 @@ import { unByKey } from "ol/Observable";
 import { fromLonLat } from "ol/proj";
 import { useEffect, useMemo } from "preact/hooks";
 
+import GeoIcon from "../icons/Geolocation";
+import RvfButton from "../RvfButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
 export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
@@ -53,28 +55,14 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
   }, [geolocation, isTracking]);
 
   return (
-    <button
-      className="rounded-full bg-white p-1 shadow-lg"
+    <RvfButton
+      className={isTracking ? "animate-pulse" : ""}
+      Icon={GeoIcon}
       onClick={() => {
         setIsTracking(!isTracking);
       }}
-      type="button"
       {...props}
-    >
-      <svg
-        className={isTracking ? "animate-pulse" : ""}
-        fill="currentColor"
-        focusable="false"
-        height="1.5em"
-        stroke="currentColor"
-        strokeWidth="0"
-        viewBox="0 0 512 512"
-        width="1.5em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z" />
-      </svg>
-    </button>
+    />
   );
 }
 

package/src/Map/Map.tsx

@@ -1,9 +1,10 @@
-import { Map as OlMap } from "ol";
+import { Map as OlMap, View } from "ol";
+import { unByKey } from "ol/Observable";
 // @ts-expect-error bad type definition
 import olStyle from "ol/ol.css";
 import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
 
@@ -12,19 +13,50 @@ export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
 
 function Map({ children, ...props }: RealtimeMapProps) {
   const mapRef = useRef();
-  const {
-    center = "831634,5933959",
-    map,
-    maxzoom,
-    minzoom,
-    setMap,
-    zoom = "13",
-  } = useMapContext();
+  const { center, extent, map, maxextent, maxzoom, minzoom, setMap, zoom } =
+    useMapContext();
+
+  const view = useMemo(() => {
+    if (!maxextent) {
+      return;
+    }
+    const bbox = maxextent.split(",").map((c) => {
+      return parseFloat(c);
+    });
+    return new View({
+      constrainOnlyCenter: false, // allow to have the same value as extent and max extent
+      extent: bbox,
+      showFullExtent: true,
+    });
+  }, [maxextent]);
+
+  useEffect(() => {
+    if (!map || !view) {
+      return;
+    }
+    const key = map.on("change:view", (evt) => {
+      const oldView = evt.oldValue;
+      if (oldView) {
+        view.setMinZoom(oldView.getMinZoom());
+        view.setMaxZoom(oldView.getMaxZoom());
+        view.setCenter(oldView.getCenter());
+        view.setZoom(oldView.getZoom());
+      }
+    });
+    map.setView(view);
+
+    return () => {
+      unByKey(key);
+    };
+  }, [map, view]);
 
   useEffect(() => {
     let newMap: OlMap;
     if (mapRef.current) {
-      newMap = new OlMap({ controls: [], target: mapRef.current });
+      newMap = new OlMap({
+        controls: [],
+        target: mapRef.current,
+      });
       setMap(newMap);
     }
 
@@ -35,7 +67,19 @@ function Map({ children, ...props }: RealtimeMapProps) {
   }, [setMap]);
 
   useEffect(() => {
-    if (!map) {
+    if (!map || !extent) {
+      return;
+    }
+    const bbox = extent.split(",").map((c) => {
+      return parseFloat(c);
+    });
+    if (bbox) {
+      map.getView().fit(bbox);
+    }
+  }, [map, extent]);
+
+  useEffect(() => {
+    if (!map || !center) {
       return;
     }
     const [x, y] = center.split(",").map((c) => {

package/src/MobilityMap/MobilityMap.tsx

@@ -41,8 +41,10 @@ export interface MobilityMapProps {
   apikey?: string;
   baselayer?: string;
   center?: string;
+  extent?: string;
   geolocation?: string;
   mapsurl?: string;
+  maxextent?: string;
   maxzoom?: string;
   minzoom?: string;
   mots?: string;
@@ -63,8 +65,10 @@ function MobilityMap({
   apikey = null,
   baselayer = "travic_v2",
   center = "831634,5933959",
+  extent = null,
   geolocation = "true",
   mapsurl = "https://maps.geops.io",
+  maxextent = null,
   maxzoom = null,
   minzoom = null,
   mots = null,
@@ -102,11 +106,13 @@ function MobilityMap({
       baselayer,
       baseLayer,
       center,
+      extent,
       geolocation,
       isFollowing,
       isTracking,
       map,
       mapsurl,
+      maxextent,
       maxzoom,
       minzoom,
       mots,
@@ -141,11 +147,13 @@ function MobilityMap({
     baselayer,
     baseLayer,
     center,
+    extent,
     geolocation,
     isFollowing,
     isTracking,
     map,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,
@@ -171,8 +179,10 @@ function MobilityMap({
       new MobilityEvent<MobilityMapProps>("mwc:attribute", {
         baselayer,
         center: x && y ? `${x},${y}` : center,
+        extent,
         geolocation,
         mapsurl,
+        maxextent,
         maxzoom,
         minzoom,
         mots,
@@ -190,8 +200,10 @@ function MobilityMap({
   }, [
     baselayer,
     center,
+    extent,
     geolocation,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,

package/src/RvfButton/RvfButton.tsx

@@ -0,0 +1,38 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, SVGProps } from "preact/compat";
+
+export type RvfButtonProps = ButtonProps &
+  JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+interface ButtonProps {
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+  theme?: "primary" | "secondary";
+}
+
+function RvfButton({
+  children,
+  className,
+  disabled,
+  Icon,
+  onClick,
+  theme,
+}: RvfButtonProps) {
+  const baseClasses =
+    "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
+  const themeClasses =
+    theme === "primary"
+      ? "border-red bg-red text-white"
+      : "border-grey bg-white text-grey";
+
+  const classes = `${baseClasses} ${themeClasses} ${className || ""}`;
+
+  return (
+    <button className={classes} disabled={disabled} onClick={onClick}>
+      {children || <Icon height={"100%"} width={"100%"} />}
+    </button>
+  );
+}
+
+export default memo(RvfButton);

package/src/RvfButton/index.tsx

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -10,8 +10,7 @@ import {
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
 import { Map as OlMap } from "ol";
-import { getCenter } from "ol/extent";
-import { fromLonLat } from "ol/proj";
+import { transformExtent } from "ol/proj";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
@@ -24,6 +23,8 @@ import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
+import RvfSharedMobilityLayer from "../RvfSharedMobilityLayer";
+import RvfZoomButtons from "../RvfZoomButtons";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
 import SingleClickListener from "../SingleClickListener/SingleClickListener";
@@ -42,15 +43,22 @@ import style from "./index.css";
 
 export type RvfMobilityMapProps = {} & MobilityMapProps;
 
-const extent = [7.5, 47.7, 8.45, 48.4];
-const centerRvf = fromLonLat(getCenter(extent)).join(",");
+const rvfExtent = [7.5, 47.7, 8.45, 48.4];
+const rvfExtentTransformed = transformExtent(
+  rvfExtent,
+  "EPSG:4326",
+  "EPSG:3857",
+);
+const bbox = rvfExtentTransformed.join(",");
 
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
-  center = centerRvf,
+  center = null,
+  extent = bbox,
   geolocation = "true",
   mapsurl = "https://maps.geops.io",
+  maxextent = bbox,
   maxzoom = null,
   minzoom = null,
   mots = null,
@@ -64,7 +72,7 @@ function RvfMobilityMap({
   search = "false",
   stopsurl = "https://api.geops.io/stops/v1/",
   tenant = null,
-  zoom = "9.8",
+  zoom = null,
 }: RvfMobilityMapProps) {
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
   const [isFollowing, setIsFollowing] = useState(false);
@@ -88,11 +96,13 @@ function RvfMobilityMap({
       baselayer,
       baseLayer,
       center,
+      extent,
       geolocation,
       isFollowing,
       isTracking,
       map,
       mapsurl,
+      maxextent,
       maxzoom,
       minzoom,
       mots,
@@ -127,11 +137,13 @@ function RvfMobilityMap({
     baselayer,
     baseLayer,
     center,
+    extent,
     geolocation,
     isFollowing,
     isTracking,
     map,
     mapsurl,
+    maxextent,
     maxzoom,
     minzoom,
     mots,
@@ -157,8 +169,10 @@ function RvfMobilityMap({
       new MobilityEvent<RvfMobilityMapProps>("mwc:attribute", {
         baselayer,
         center: x && y ? `${x},${y}` : center,
+        extent,
         geolocation,
         mapsurl,
+        maxextent,
         maxzoom,
         minzoom,
         mots,
@@ -193,6 +207,8 @@ function RvfMobilityMap({
     x,
     y,
     z,
+    extent,
+    maxextent,
   ]);
 
   return (
@@ -208,6 +224,33 @@ function RvfMobilityMap({
               {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"
+              />
+
               <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" />
@@ -220,6 +263,9 @@ function RvfMobilityMap({
                   <Search />
                 </div>
               )}
+              <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
+                <RvfZoomButtons />
+              </div>
             </Map>
 
             <Overlay

package/src/RvfSharedMobilityLayer/RvfSharedMobilityLayer.tsx

@@ -0,0 +1,147 @@
+import { getUid } from "ol";
+import { GeoJSON } from "ol/format";
+import VectorLayer from "ol/layer/Vector";
+import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
+import { Vector } from "ol/source";
+import { Circle, Fill, Stroke, Style, Text } from "ol/style";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+export default function RvfSharedMobilityLayer({
+  color,
+  minZoom = 16.999,
+  name,
+  url,
+}: {
+  color: string;
+  minZoom?: number;
+  name: string;
+  url: string;
+}) {
+  const { map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!name || !url) {
+      return null;
+    }
+    const source = new Vector({
+      format: new GeoJSON(),
+      strategy: bboxStrategy,
+      url: function (extent) {
+        return (
+          url +
+          "?service=WFS&" +
+          "version=1.1.0&request=GetFeature&typename=" +
+          name +
+          "&" +
+          "outputFormat=application/json&srsname=EPSG:3857&" +
+          "bbox=" +
+          extent.join(",") +
+          ",EPSG:3857"
+        );
+      },
+    });
+    const style = new Style({
+      image: new Circle({
+        declutterMode: "declutter",
+        fill: new Fill({
+          color: "white",
+        }),
+        radius: 10,
+        stroke: new Stroke({
+          color: color,
+          width: 2,
+        }),
+      }),
+      text: new Text({
+        declutterMode: "declutter",
+
+        fill: new Fill({
+          color: color,
+        }),
+        font: "bold 12px inherit",
+        // text: ["to-string", ["get", "num_vehicles_available"]],
+      }),
+    });
+
+    const styleFunction = (feature) => {
+      const clone = style.clone();
+      clone
+        .getText()
+        .setText(feature.get("num_vehicles_available")?.toString());
+      const isFreeFloat = !feature.get("num_vehicles_available")?.toString();
+      if (isFreeFloat) {
+        (clone.getImage() as Circle).setRadius(6);
+      }
+      clone.setZIndex(parseInt(getUid(feature), 10));
+      return clone;
+    };
+    const layer = new VectorLayer({
+      // declutter: true,
+      minZoom: minZoom,
+      source: source,
+      // style: (feature) => {
+      //   console.log("feature", feature);
+      //   style
+      //     .getText()
+      //     .setText(feature.get("num_vehicles_available").toString());
+      //   return style;
+      // },
+
+      // style: {
+      //   "circle-fill-color": "white",
+      //   "circle-radius": 15,
+      //   "circle-stroke-color": color,
+      //   "circle-stroke-width": 2,
+      //   // "fill-color": "rgba(100,100,100,0.25)",
+      //   // "stroke-color": "white",
+      //   // "stroke-width": 0.75,
+      //   // "text-background-fill-color": "black",
+      //   "text-fill-color": color,
+      //   "text-font": "bold 12px sans-serif",
+      //   "text-stroke-color": color,
+      //   "text-value": ["to-string", ["get", "num_vehicles_available"]],
+      // },
+    });
+
+    source.on("addfeature", function (event) {
+      const feature = event.feature;
+      feature.setStyle(styleFunction);
+    });
+
+    return layer;
+  }, [color, minZoom, name, url]);
+
+  // Reload features every minutes
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      // @ts-expect-error - private property
+      layer.getSource().loadedExtentsRtree_.clear();
+      // vectorSource.clear(true);
+      layer.getSource().changed();
+    }, 60000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [layer]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    map.on("moveend", () => {
+      console.log("ZOOM", map.getView().getZoom());
+    });
+
+    // map.addLayer(layer);
+    layer.setMap(map);
+
+    return () => {
+      // map.removeLayer(layer);
+      layer.setMap(null);
+    };
+  });
+
+  return null;
+}

package/src/RvfSharedMobilityLayer/index.tsx

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

package/src/RvfZoomButtons/RvfZoomButtons.tsx

@@ -0,0 +1,66 @@
+import { memo } from "preact/compat";
+import { useState } from "preact/hooks";
+
+import Minus from "../icons/Minus";
+import Plus from "../icons/Plus";
+import RvfButton from "../RvfButton";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfZoomButtons() {
+  const { map } = useMapContext();
+  const [isZoomInDisabled, setIsZoomInDisabled] = useState(false);
+  const [isZoomOutDisabled, setIsZoomOutDisabled] = useState(false);
+
+  const handleZoomIn = () => {
+    const view = map.getView();
+    const zoom = view.getZoom();
+    const maxzoom = view.getMaxZoom();
+    const minzoom = view.getMinZoom();
+
+    if (maxzoom && zoom === Number(maxzoom)) {
+      setIsZoomInDisabled(true);
+      return;
+    }
+
+    view.setZoom(zoom + 1);
+
+    if (!minzoom || view.getZoom() > Number(minzoom)) {
+      setIsZoomOutDisabled(false);
+    }
+  };
+
+  const handleZoomOut = () => {
+    const view = map.getView();
+    const zoom = view.getZoom();
+    const maxzoom = view.getMaxZoom();
+    const minzoom = view.getMinZoom();
+
+    if (minzoom && zoom === Number(minzoom)) {
+      setIsZoomOutDisabled(true);
+      return;
+    }
+
+    view.setZoom(zoom - 1);
+
+    if (!maxzoom || view.getZoom() < Number(maxzoom)) {
+      setIsZoomInDisabled(false);
+    }
+  };
+
+  return (
+    <>
+      <RvfButton
+        disabled={isZoomInDisabled}
+        Icon={Plus}
+        onClick={handleZoomIn}
+      />
+      <RvfButton
+        disabled={isZoomOutDisabled}
+        Icon={Minus}
+        onClick={handleZoomOut}
+      />
+    </>
+  );
+}
+
+export default memo(RvfZoomButtons);

package/src/RvfZoomButtons/index.tsx

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

package/src/icons/Geolocation/Geolocation.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from "preact/compat";
+
+function Geolocation(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height="1.5em"
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      width="1.5em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z" />
+    </svg>
+  );
+}
+
+export default Geolocation;

package/src/icons/Geolocation/index.tsx

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