@geops/rvf-mobility-web-component 0.1.34 → 0.1.36

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

package/src/GeolocationButton/GeolocationButton.tsx

@@ -1,14 +1,32 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
-import { Geolocation } from "ol";
+import { Feature, Geolocation } from "ol";
+import { Point } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
 import { unByKey } from "ol/Observable";
 import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style } from "ol/style";
 import { useEffect, useMemo } from "preact/hooks";
 
 import GeolocationIcon from "../icons/Geolocation";
+// @ts-ecpect-error - svg file not handled by vite
+import locationSvg from "../icons/Geolocation/location.svg";
 import RvfIconButton from "../RvfIconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
+const point = new Point([0, 0]);
+const feature = new Feature(point);
+const layer = new VectorLayer({
+  source: new VectorSource({ features: [feature] }),
+  style: new Style({
+    image: new Icon({
+      anchor: [0.5, 1],
+      src: locationSvg,
+    }),
+  }),
+});
+
 export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
@@ -32,15 +50,19 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
       geolocation.once("change:position", (evt) => {
         const position = evt.target.getPosition();
         if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
           map.getView().setZoom(TRACKING_ZOOM);
-          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
         }
       }),
       // then we only center the map.
       geolocation.on("change:position", (evt) => {
         const position = evt.target.getPosition();
         if (evt.target.getPosition()) {
-          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
         }
       }),
     ];
@@ -52,7 +74,13 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
 
   useEffect(() => {
     geolocation.setTracking(isTracking);
-  }, [geolocation, isTracking]);
+    if (isTracking) {
+      layer.setMap(map);
+    }
+    return () => {
+      layer.setMap(null);
+    };
+  }, [map, geolocation, isTracking]);
 
   return (
     <RvfIconButton

package/src/RvfEmbedNavigation/DragPanWarning.ts

@@ -0,0 +1,124 @@
+import type { Map, MapBrowserEvent } from "ol";
+import type { Options } from "ol/control/Control";
+
+import { Control } from "ol/control";
+import { EventsKey } from "ol/events";
+import { DragPan } from "ol/interaction";
+import { unByKey } from "ol/Observable";
+
+type DragPanWarningOptions = {
+  className?: string;
+} & Options;
+
+class DragPanWarning extends Control {
+  dragPan?: DragPan;
+
+  icon: HTMLDivElement;
+
+  onPointerDragRef?: EventsKey;
+
+  text: HTMLParagraphElement;
+
+  constructor(options: DragPanWarningOptions = {}) {
+    const element = document.createElement("div");
+    element.className =
+      options.className !== undefined
+        ? options.className
+        : "ol-drag-pan-warning";
+    element.style.display = "none";
+    element.style.pointerEvents = "auto";
+
+    super({
+      element,
+      render: options.render,
+      target: options.target,
+    });
+
+    this.icon = document.createElement("div");
+    this.icon.className = `${element.className}-icon`;
+
+    // sbb icons: sbb/two-finger-tap-large.svg';
+    this.icon.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+        <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
+      </svg>
+    `;
+    this.element.appendChild(this.icon);
+
+    this.text = document.createElement("p");
+    this.text.className = `${element.className}-text`;
+    this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
+    this.element.appendChild(this.text);
+
+    this.dragPan = undefined;
+    this.onPointerDragRef = undefined;
+    this.onPointerDrag = this.onPointerDrag.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+  }
+
+  onPointerDrag(event: MapBrowserEvent<PointerEvent>) {
+    // Show the warning on next pointerdrag events.
+    if (event.activePointers?.length !== 1) {
+      return true;
+    }
+    this.element.style.display = "flex";
+    document.addEventListener("touchend", this.onTouchEnd, { once: true });
+    return false;
+  }
+
+  onTouchEnd() {
+    unByKey(this.onPointerDragRef);
+    this.element.style.display = "none";
+  }
+
+  setMap(map: Map) {
+    super.setMap(map);
+    document.removeEventListener("touchend", this.onTouchEnd);
+    unByKey(this.onPointerDragRef);
+
+    if (map) {
+      const viewport = map.getViewport();
+
+      // We allow default scroll behavior for touch events.
+      viewport.style.touchAction = "pan-x pan-y";
+
+      // Deactivate drag pan only on touch events.
+      this.dragPan = map
+        .getInteractions()
+        .getArray()
+        .find((interaction) => {
+          return interaction instanceof DragPan;
+        }) as DragPan;
+
+      if (!this.dragPan) {
+        console.error(
+          "Impossible to find the DragPan interaction, DragPanWarning will not work as expected.",
+        );
+        return;
+      }
+
+      this.listenerKeys.push(
+        // @ts-expect-error - we need to listen to pointerdown events
+        map.on("pointerdown", (evt: MapBrowserEvent<PointerEvent>) => {
+          document.removeEventListener("touchend", this.onTouchEnd);
+
+          if (
+            evt.originalEvent.pointerType !== "touch" ||
+            // @ts-expect-error - condition_ is a private method
+            !this.dragPan?.condition_(evt)
+          ) {
+            this.element.style.display = "none";
+            return true;
+          }
+
+          this.onPointerDragRef = map.on("pointerdrag", this.onPointerDrag);
+
+          return true;
+        }),
+      );
+      this.element.addEventListener("click", this.onTouchEnd);
+    }
+  }
+}
+
+export default DragPanWarning;

package/src/RvfEmbedNavigation/RvfEmbedNavigation.tsx

@@ -0,0 +1,50 @@
+import { MouseWheelZoom } from "ol/interaction";
+import { useEffect, useState } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import DragPanWarning from "./DragPanWarning";
+
+function RvfEmbedNavigation() {
+  const { map } = useMapContext();
+  const [target, setTarget] = useState(null);
+
+  useEffect(() => {
+    let dragPanWarningControl = null;
+
+    if (!map || !target) {
+      return;
+    }
+    // Deactivates mouse wheel zoom
+    map.getInteractions().forEach((interaction) => {
+      if (interaction instanceof MouseWheelZoom) {
+        interaction.setActive(false);
+      }
+    });
+
+    dragPanWarningControl = new DragPanWarning({ target: target });
+    map.addControl(dragPanWarningControl);
+
+    return () => {
+      if (dragPanWarningControl) {
+        map.removeControl(dragPanWarningControl);
+      }
+
+      // Deactivates mouse wheel zoom
+      map.getInteractions().forEach((interaction) => {
+        if (interaction instanceof MouseWheelZoom) {
+          interaction.setActive(true);
+        }
+      });
+    };
+  }, [map, target]);
+
+  return (
+    <div
+      ref={(node) => {
+        return setTarget(node);
+      }}
+    ></div>
+  );
+}
+
+export default RvfEmbedNavigation;

package/src/RvfEmbedNavigation/index.js

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

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -29,6 +29,7 @@ import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
+import RvfEmbedNavigation from "../RvfEmbedNavigation/RvfEmbedNavigation";
 import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
@@ -80,6 +81,7 @@ const PRIORITY_FROM_TYPE = {
 
 export type RvfMobilityMapProps = {
   details: string;
+  embed: string;
   layers: string; // list of visible layers on load
   layertree: string;
   print: string;
@@ -153,6 +155,7 @@ function RvfMobilityMap({
   baselayer = "de.rvf",
   center = null,
   details = "true",
+  embed = "false",
   extent = bbox,
   geolocation = "true",
   layers = null,
@@ -241,6 +244,10 @@ function RvfMobilityMap({
     return details === "true";
   }, [details]);
 
+  const isEmbed = useMemo(() => {
+    return embed === "true";
+  }, [embed]);
+
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers);
 
@@ -331,6 +338,7 @@ function RvfMobilityMap({
         baselayer,
         center,
         details,
+        embed,
         extent,
         geolocation,
         layers,
@@ -356,6 +364,7 @@ function RvfMobilityMap({
     );
   }, [
     baselayer,
+    embed,
     layers,
     center,
     geolocation,
@@ -526,6 +535,8 @@ function RvfMobilityMap({
               <Map className="relative flex-1 overflow-visible ">
                 <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
+                {isEmbed && <RvfEmbedNavigation />}
+
                 <RvfSelectedFeatureHighlightLayer />
 
                 {hasRealtime && (

package/src/RvfMobilityMap/index.css

@@ -0,0 +1,13 @@
+
+.ol-drag-pan-warning {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 25px;
+  z-index: 100000;
+}

package/src/RvfSearch/RvfSearch.tsx

@@ -0,0 +1,28 @@
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import StopsSearch from "../StopsSearch";
+import centerOnStation from "../utils/centerOnStation";
+import { RVF_EXTENT_4326 } from "../utils/constants";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfSearch() {
+  const { apikey, map, stopsurl } = useMapContext();
+
+  const onSelect = useCallback(
+    (selected) => {
+      return centerOnStation(selected, map);
+    },
+    [map],
+  );
+
+  return (
+    <StopsSearch
+      apikey={apikey}
+      bbox={RVF_EXTENT_4326.join(",")}
+      onselect={onSelect}
+      url={stopsurl}
+    />
+  );
+}
+export default memo(RvfSearch);

package/src/RvfSearch/index.tsx

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

package/src/Search/index.tsx

@@ -1 +1 @@
-export { default } from "./Search";
+export { default } from "../RvfSearch";

package/src/StopsSearch/StopsSearch.tsx

@@ -10,9 +10,9 @@ import {
   useRef,
   useState,
 } from "preact/hooks";
-import { FaSearch } from "react-icons/fa";
-import { MdClose } from "react-icons/md";
 
+import Cancel from "../icons/Cancel";
+import Search from "../icons/Search";
 // @ts-expect-error tailwind must be added for the search web component
 import tailwind from "../style.css";
 import i18n from "../utils/i18n";
@@ -203,8 +203,8 @@ function StopsSearch({
         }
         ref={myRef}
       >
-        <div className={"flex items-center "}>
-          <FaSearch className="size-4" />
+        <div className={"flex items-center text-grey"}>
+          <Search className="size-4" />
         </div>
         <div className={"flex grow overflow-hidden border-b-2 border-solid"}>
           <input
@@ -234,13 +234,13 @@ function StopsSearch({
                 setResults(undefined);
               }}
             >
-              <MdClose className="size-4" />
+              <Cancel className="size-4 text-grey" />
             </button>
           )}
         </div>
       </div>
 
-      <div className="-mt-4px flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
+      <div className="flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
         {results && results.length === 0 && (
           <div
             className={

package/src/icons/Geolocation/location.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/location</title>
+    <g id="iconfont/location" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,1.42108547e-14 C17.5228474,1.42108547e-14 22,4.47715241 22,10 C22,13.3716045 20.1975984,16.6760073 17.2259527,19.8127445 C16.2070021,20.8883035 15.118253,21.8681776 14.0291768,22.735405 C13.6473986,23.0394136 13.2921737,23.3081093 12.9722093,23.5391947 C12.777224,23.6800174 12.6351454,23.77842 12.5547002,23.8320502 C12.2188008,24.0559831 11.7811992,24.0559831 11.4452998,23.8320502 C11.3648546,23.77842 11.222776,23.6800174 11.0277907,23.5391947 C10.7078263,23.3081093 10.3526014,23.0394136 9.97082322,22.735405 C8.88174698,21.8681776 7.7929979,20.8883035 6.77404732,19.8127445 C3.80240157,16.6760073 2,13.3716045 2,10 C2,4.47715241 6.47715256,1.42108547e-14 12,1.42108547e-14 Z M12,2 C7.58172205,2 4,5.58172193 4,10 C4,12.7533953 5.57259843,15.6364924 8.22595268,18.4372552 C9.1757521,19.4398213 10.196378,20.3583846 11.2166768,21.1708447 C11.4951711,21.3926087 11.7576885,21.5936102 12,21.7726167 C12.2423115,21.5936102 12.5048289,21.3926087 12.7833232,21.1708447 C13.803622,20.3583846 14.8242479,19.4398213 15.7740473,18.4372552 C18.4274016,15.6364924 20,12.7533953 20,10 C20,5.58172193 16.418278,2 12,2 Z M12,5.99999987 C14.209139,5.99999987 16,7.79086087 16,9.99999987 C16,12.2091389 14.209139,13.9999999 12,13.9999999 C9.790861,13.9999999 8,12.2091389 8,9.99999987 C8,7.79086087 9.790861,5.99999987 12,5.99999987 Z M12,7.99999987 C10.8954305,7.99999987 10,8.89543037 10,9.99999987 C10,11.1045694 10.8954305,11.9999999 12,11.9999999 C13.1045695,11.9999999 14,11.1045694 14,9.99999987 C14,8.89543037 13.1045695,7.99999987 12,7.99999987 Z" id="Combined-Shape" fill="#E3000B" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/icons/Search/Search.tsx

@@ -0,0 +1,39 @@
+function Search({ ...props }) {
+  return (
+    <svg
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>iconfont/search</title>
+      <defs>
+        <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
+      </defs>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="iconfont/search"
+        stroke="none"
+        strokeWidth="1"
+      >
+        <g id="Group-3-Copy" transform="translate(2, 2)">
+          <mask fill="white" id="mask-2">
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <g id="Clip-2"></g>
+          <path
+            d="M14.0345333,13.8617333 C14.0025333,13.8864 13.9718667,13.9137333 13.9432,13.9430667 C13.9138667,13.9724 13.8865333,14.0030667 13.8632,14.0350667 C12.6038667,15.2517333 10.8892,15.9997333 8.99986667,15.9997333 C5.13386667,15.9997333 1.99986667,12.8657333 1.99986667,8.99973333 C1.99986667,5.13373333 5.13386667,1.99973333 8.99986667,1.99973333 C12.8658667,1.99973333 15.9998667,5.13373333 15.9998667,8.99973333 C15.9998667,10.8890667 15.2512,12.6037333 14.0345333,13.8617333 M19.7072,18.2930667 L16.0318667,14.6177333 C17.2632,13.0784 17.9998667,11.1250667 17.9998667,8.99973333 C17.9998667,4.02973333 13.9705333,-0.000266666667 8.99986667,-0.000266666667 C4.0292,-0.000266666667 -0.000133333333,4.02973333 -0.000133333333,8.99973333 C-0.000133333333,13.9704 4.0292,17.9997333 8.99986667,17.9997333 C11.1252,17.9997333 13.0785333,17.2637333 14.6178667,16.0317333 L18.2932,19.7070667 C18.6832,20.0977333 19.3165333,20.0977333 19.7072,19.7070667 C20.0978667,19.3164 20.0978667,18.6837333 19.7072,18.2930667"
+            fill="currentColor"
+            id="Fill-1"
+            mask="url(#mask-2)"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default Search;

package/src/icons/Search/index.tsx

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

package/src/icons/Search/search.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/search</title>
+    <defs>
+        <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
+    </defs>
+    <g id="iconfont/search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-3-Copy" transform="translate(2, 2)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Clip-2"></g>
+            <path d="M14.0345333,13.8617333 C14.0025333,13.8864 13.9718667,13.9137333 13.9432,13.9430667 C13.9138667,13.9724 13.8865333,14.0030667 13.8632,14.0350667 C12.6038667,15.2517333 10.8892,15.9997333 8.99986667,15.9997333 C5.13386667,15.9997333 1.99986667,12.8657333 1.99986667,8.99973333 C1.99986667,5.13373333 5.13386667,1.99973333 8.99986667,1.99973333 C12.8658667,1.99973333 15.9998667,5.13373333 15.9998667,8.99973333 C15.9998667,10.8890667 15.2512,12.6037333 14.0345333,13.8617333 M19.7072,18.2930667 L16.0318667,14.6177333 C17.2632,13.0784 17.9998667,11.1250667 17.9998667,8.99973333 C17.9998667,4.02973333 13.9705333,-0.000266666667 8.99986667,-0.000266666667 C4.0292,-0.000266666667 -0.000133333333,4.02973333 -0.000133333333,8.99973333 C-0.000133333333,13.9704 4.0292,17.9997333 8.99986667,17.9997333 C11.1252,17.9997333 13.0785333,17.2637333 14.6178667,16.0317333 L18.2932,19.7070667 C18.6832,20.0977333 19.3165333,20.0977333 19.7072,19.7070667 C20.0978667,19.3164 20.0978667,18.6837333 19.7072,18.2930667" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
+        </g>
+    </g>
+</svg>

package/src/index.tsx

@@ -30,6 +30,7 @@ register(
     "tenant",
     "zoom",
     "permalink",
+    "embed",
   ],
   { shadow: true },
 );