@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -0,0 +1,243 @@
+//type: "checkbox" | "date" | "select" | "textfield";
+
+import {
+  DEFAULT_QUERYABLE_LAYERS,
+  RVF_EXTENT_3857,
+  RVF_LAYERS_NAMES,
+} from "../utils/constants";
+
+// const geopsApiLink = `<a href="https://developer.geops.io/">geOps API key</a>`;
+// const geopsMapsApiLink = `<a href="https://developer.geops.io/apis/maps">geOps Maps API</a>`;
+// const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
+const geopsMocoApiLink = `<a href="https://geops.com/en/solution/disruption-information">geOps MOCO API</a>`;
+const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
+
+export interface WebComponentAttributeDoc {
+  defaultValue?: string;
+  description: string;
+  type?: "boolean" | undefined;
+}
+
+export type MobilityMapAttributeName =
+  | "apikey"
+  | "baselayer"
+  | "center"
+  | "details"
+  | "embed"
+  | "extent"
+  | "geolocation"
+  | "layers"
+  | "layersconfig"
+  | "layertree"
+  | "mainlink"
+  | "mapsurl"
+  | "maxextent"
+  | "maxzoom"
+  | "minzoom"
+  | "mots"
+  | "notification"
+  | "notificationat"
+  | "notificationtenant"
+  | "notificationurl"
+  | "permalink"
+  | "print"
+  | "queryablelayers"
+  | "realtime"
+  | "realtimebboxparameters"
+  | "realtimetenant"
+  | "realtimeurl"
+  | "runs"
+  | "search"
+  | "share"
+  | "stopsurl"
+  | "tenant"
+  | "toolbar"
+  | "zoom";
+
+export type MobilityMapAttributes = Record<
+  MobilityMapAttributeName,
+  WebComponentAttributeDoc
+>;
+
+const attrs: MobilityMapAttributes = {
+  apikey: {
+    defaultValue: "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
+    description: null, //`Your ${geopsApiLink}`,
+  },
+  baselayer: {
+    defaultValue: "de.rvf_moco",
+    description: null, //`The style's name from the ${geopsMapsApiLink}. <br/>Ex: base_dark_v2, base_bright_v2, ...`,
+  },
+  center: {
+    description:
+      "The center of the map in EPSG:3857 coordinates.<br/>Parameter required if extent is not set.",
+  },
+  details: {
+    defaultValue: "true",
+    description:
+      "Show shared mobility details in the sidebar when we click on an shared mobility feature.",
+    type: "boolean",
+  },
+  embed: {
+    defaultValue: "false",
+    description:
+      "Toggle the embedded navigation mode.<br/>In this mode zooming with mouse wheel is deactivated and, on touch device, you can only navigate with two finger, a warning message is displayed to warn the user.",
+    type: "boolean",
+  },
+  extent: {
+    defaultValue: RVF_EXTENT_3857.join(","),
+    description:
+      "The map's extent in EPSG:3857 coordinates.<br/>Ex: 831634,5933959,940649,6173660 .<br/>Parameter required if center and zoom are not set.",
+  },
+  geolocation: {
+    defaultValue: "true",
+    description: "Toggle the display of the geolocation button or not.",
+    type: "boolean",
+  },
+  layers: {
+    defaultValue: null,
+    description:
+      "A comma separated list of layers's name to make visible on load, others are hidden. If empty, all layers will be hidden except the baselayer.",
+  },
+  layersconfig: {
+    defaultValue: JSON.stringify({
+      [RVF_LAYERS_NAMES.liniennetz]: {
+        link: {
+          href: "https://www.rvf.de/fahrtinfo/netzplan",
+          text: "Zum Liniennetzpläne",
+        },
+        title: "Liniennetzpläne",
+      },
+      [RVF_LAYERS_NAMES.meldungen]: {
+        link: {
+          href: "https://moco.dev.geops.io/situation/{{id}}",
+          text: "Zum Moco",
+        },
+      },
+    }),
+    description: `A JSON string to configure the layers and other components associated to it. See "layers" attributes to find the list of available layers.<br/>
+       Definition for a layer :
+<pre style="font-size: 12px; overflow: auto;">{
+  liniennetz: {
+    link: { // Define the link to display int footer of the details view, if not defined no link is displayed.
+      text: "Zum Liniennetzpläne",  // The text of the link, if not defined the title is used.
+      href: "https://www.rvf.de/fahrtinfo/netzplan", // The url of the link, if not defined no link is displayed.
+    },
+    title: "Liniennetzpläne", // Text displayed on the layer tree and in the header of the details view.
+  }
+<//pre>}`,
+  },
+  layertree: {
+    defaultValue: "true",
+    description: "Show/hide the layers tree button in the toolbar.",
+    type: "boolean",
+  },
+  mainlink: {
+    defaultValue: "https://www.rvf.de/",
+    description: "A link displayed on bottom left of the map.",
+  },
+  mapsurl: {
+    defaultValue: "https://maps.geops.io",
+    description: null, //`The ${geopsMapsApiLink} url to use.`,
+  },
+  maxextent: {
+    defaultValue: RVF_EXTENT_3857.join(","),
+    description:
+      "The maximum extent of the map in EPSG:3857 coordinates.<br/>Ex: 831634,5933959,940649,6173660 .",
+  },
+  maxzoom: {
+    defaultValue: "20",
+    description: "The maximal zoom level of the map.",
+  },
+  minzoom: {
+    description: "The minimal zoom level of the map.",
+  },
+  mots: {
+    description: null,
+    // "Commas separated list of mots to display on the Realtime layer.<br/>Ex: rail,bus,coach,foot,tram,subway,gondola,funicular,ferry,car .",
+  },
+  notification: {
+    defaultValue: "true",
+    description: `Add the notification layer to the map. This layer will display informations about disruptions on the network. Data comes from
+        our ${geopsMocoApiLink} .`,
+    type: "boolean",
+  },
+  notificationat: {
+    description: null,
+    // "An ISO date string used to display active notification at this date in the notification layer. If not defined the current date will be used.<br/>Ex: 2025-08-01T00:00:00Z .",
+  },
+  notificationtenant: {
+    defaultValue: "rvf",
+    description: null, // `The ${geopsMocoApiLink} tenant to get the notification from.`,
+  },
+  notificationurl: {
+    defaultValue: "https://moco.dev.geops.io/api/v2/",
+    description: null, // `The ${geopsMocoApiLink} url to use.`,
+  },
+  permalink: {
+    defaultValue: "false",
+    description:
+      "Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
+    type: "boolean",
+  },
+  print: {
+    defaultValue: "true",
+    description: "Show/hide the print button in the toolbar.",
+    type: "boolean",
+  },
+  queryablelayers: {
+    defaultValue: DEFAULT_QUERYABLE_LAYERS,
+    description:
+      "A comma separated list of layers's name. The data of these layers will be queryable by click on the map (see selectedfeature event). If empty, all layers will not be queryable.",
+  },
+  realtime: {
+    defaultValue: "true",
+    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
+    type: "boolean",
+  },
+  realtimebboxparameters: {
+    defaultValue: "line_tags=RVF",
+    description: null,
+    // "A space separated list of parameters to add to the realtime BBOX request to define custom behavior.<br/>Ex: graph=XXX line_tags=XXX.",
+  },
+  realtimetenant: {
+    description: null, // `The ${geopsRealtimeApiLink} tenant to get the realtime data from.`,
+  },
+  realtimeurl: {
+    defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
+    description: null, //`The ${geopsRealtimeApiLink} url to use.`,
+  },
+  runs: {
+    defaultValue: "false",
+    description:
+      "Shows the number of trips on a line in the sidebar, use only for debugging.",
+    type: "boolean",
+  },
+  search: {
+    defaultValue: "true",
+    description: "Toggle the search stops input.",
+    type: "boolean",
+  },
+  share: {
+    defaultValue: "true",
+    description: "Show/hide the share button in the toolbar.",
+    type: "boolean",
+  },
+  stopsurl: {
+    defaultValue: "https://api.geops.io/stops/v1/",
+    description: null, // `The ${geopsStopsApiLink} to use.`,
+  },
+  tenant: {
+    description: null, //`The tenant to use by default for all geOps APIs (Stops, Realtime, MOCO ...). Can be override for each API by other XXXXtenant parameters.`,
+  },
+  toolbar: {
+    defaultValue: "false",
+    description: "Show/hide the toolbar on the left.",
+    type: "boolean",
+  },
+  zoom: {
+    description: "The zoom level of the map.",
+  },
+};
+
+export default attrs;

package/src/MobilityMap/index.tsx

@@ -1 +1,2 @@
 export { default } from "../RvfMobilityMap";
+export { default as MobilityMapAttributes } from "./MobilityMapAttributes";

package/src/MobilitySearch/MobilitySearch.tsx

@@ -0,0 +1,35 @@
+import { memo } from "preact/compat";
+
+import StopsSearch from "../StopsSearch/StopsSearch";
+import { I18nContext } from "../utils/hooks/useI18n";
+import i18n from "../utils/i18n";
+
+import MobilitySearchAttributes from "./MobilitySearchAttributes";
+
+// @ts-expect-error tailwind must be added for the search web component
+import tailwind from "../style.css";
+
+import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
+
+export type MobilitySearchProps = StopsSearchProps;
+
+function MobilitySearch(props: MobilitySearchProps) {
+  return (
+    <I18nContext.Provider value={i18n}>
+      <style>{tailwind}</style>
+      <StopsSearch {...props} />
+    </I18nContext.Provider>
+  );
+}
+
+// We creates a wrapper to inject the default props values from MobilityMapAttributes.
+const defaultProps = {};
+Object.entries(MobilitySearchAttributes).forEach(([key]) => {
+  defaultProps[key] = MobilitySearchAttributes[key].defaultValue || null;
+});
+
+function MobilitySearchWithDefaultProps(props: MobilitySearchProps) {
+  return <MobilitySearch {...defaultProps} {...props} />;
+}
+
+export default memo(MobilitySearchWithDefaultProps);

package/src/MobilitySearch/MobilitySearchAttributes.test.ts

@@ -0,0 +1,21 @@
+import attributes from "./MobilitySearchAttributes";
+
+describe("MobilityMapAttributes", () => {
+  Object.entries(attributes).forEach(([key, value]) => {
+    test(`${key} has a description`, () => {
+      expect(value.description).toBeDefined();
+    });
+
+    if (value.type === "boolean") {
+      test(`${key} has a defaultValue for boolean`, () => {
+        expect(value.defaultValue).toMatch(/^(true|false)$/);
+      });
+    }
+
+    if (value.defaultValue === "true" || value.defaultValue === "false") {
+      test(`${key} is boolean when defaultValue is true or false`, () => {
+        expect(value.type).toBe("boolean");
+      });
+    }
+  });
+});

package/src/MobilitySearch/MobilitySearchAttributes.ts

@@ -0,0 +1,68 @@
+import type { WebComponentAttributeDoc } from "../MobilityMap/MobilityMapAttributes";
+
+const geopsApiLink = `<a href="https://developer.geops.io/">geOps API key</a>`;
+const geopsStopsApiLink = `<a href="https://developer.geops.io/apis/stops">geOps Stops API</a>`;
+
+export type MobilitySearchAttributeName =
+  | "apikey"
+  | "bbox"
+  | "countrycode"
+  | "event"
+  | "field"
+  | "limit"
+  | "mots"
+  | "onselect"
+  | "params"
+  | "prefagencies"
+  | "reflocation"
+  | "url";
+
+export type MobilitySearchAttributes = Record<
+  MobilitySearchAttributeName,
+  WebComponentAttributeDoc
+>;
+
+const attrs: MobilitySearchAttributes = {
+  apikey: {
+    description: `Your ${geopsApiLink}`,
+  },
+  bbox: {
+    description: `The extent where to search the stops (minx,miny,maxx,maxy). See the ${geopsStopsApiLink} documentation.`,
+  },
+  countrycode: {
+    description: "The country code to filter the results (IT, DE, CH ...)",
+  },
+  event: {
+    defaultValue: "mwc:stopssearchselect",
+    description: "The event's name to listen to when a stop is selected.",
+  },
+  field: {
+    description: `Which field to look up, default all of them, Possible values:id, name, coords. See the ${geopsStopsApiLink} documentation.`,
+  },
+  limit: {
+    defaultValue: "5",
+    description: `The number of suggestions to show. See the ${geopsStopsApiLink} documentation.`,
+  },
+  mots: {
+    description: `Commas separated list of mots used to filter the results (rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car). See the ${geopsStopsApiLink} documentation.`,
+  },
+  onselect: {
+    description: null, //`Function called when a stop is selected. The function receives the selected stop as parameter.`,
+  },
+  params: {
+    description: `JSON string with additional parameters to pass to the request to the API. Ex: {"{ 'key': 'value' }"}. See the ${geopsStopsApiLink} documentation.`,
+  },
+  prefagencies: {
+    description: `comma seperated list, order chooses which agency will be preferred as
+        ident_source (for id and code fields). Possible values: sbb, db. See the ${geopsStopsApiLink} documentation.`,
+  },
+  reflocation: {
+    description: `Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher. See the ${geopsStopsApiLink} documentation.`,
+  },
+  url: {
+    defaultValue: "https://api.geops.io/stops/v1/",
+    description: `The URL to the ${geopsStopsApiLink}.`,
+  },
+};
+
+export default attrs;

package/src/MobilitySearch/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./MobilitySearch";
+export { default as MobilitySearchAttributes } from "./MobilitySearchAttributes";

package/src/NotificationLayer/NotificationLayer.tsx

@@ -1,12 +1,22 @@
 import { MocoLayer } from "mobility-toolbox-js/ol";
-import { MocoLayerOptions } from "mobility-toolbox-js/ol/layers/MocoLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import { LAYER_NAME_NOTIFICATION } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
-function NotificationLayer(props: MocoLayerOptions) {
-  const { apikey, baseLayer, map } = useMapContext();
+import type { MocoLayerOptions } from "mobility-toolbox-js/ol";
+
+function NotificationLayer(props?: Partial<MocoLayerOptions>) {
+  const {
+    apikey,
+    baseLayer,
+    map,
+    notificationat,
+    notificationtenant,
+    notificationurl,
+    previewNotifications,
+  } = useMapContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -14,10 +24,23 @@ function NotificationLayer(props: MocoLayerOptions) {
     }
     return new MocoLayer({
       apiKey: apikey,
+      date: notificationat ? new Date(notificationat) : undefined,
       maplibreLayer: baseLayer,
+      name: LAYER_NAME_NOTIFICATION,
+      situations: previewNotifications,
+      tenant: notificationtenant,
+      url: notificationurl,
       ...(props || {}),
     });
-  }, [apikey, baseLayer, props]);
+  }, [
+    apikey,
+    baseLayer,
+    notificationat,
+    notificationtenant,
+    notificationurl,
+    previewNotifications,
+    props,
+  ]);
 
   useEffect(() => {
     if (!map || !layer) {

package/src/Overlay/Overlay.tsx

@@ -1,15 +1,21 @@
-import { JSX, PreactDOMAttributes } from "preact";
-
-import type { ScrollableHandlerProps } from "../ScrollableHandler";
+import { twMerge } from "tailwind-merge";
 
 import ScrollableHandler from "../ScrollableHandler";
 
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { ScrollableHandlerProps } from "../ScrollableHandler";
+
 export type OverlayProps = {
   ScrollableHandlerProps?: ScrollableHandlerProps;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function Overlay({ children, ScrollableHandlerProps = {} }: OverlayProps) {
+function Overlay({
+  children,
+  className,
+  ScrollableHandlerProps = {},
+}: OverlayProps) {
   let hasChildren = !!children;
   if (Array.isArray(children)) {
     hasChildren =
@@ -23,18 +29,25 @@ function Overlay({ children, ScrollableHandlerProps = {} }: OverlayProps) {
     return null;
   }
 
+  // ${
+  //           // children
+  //           //   ? "max-h-[70%] min-h-[75px] w-full border-t @lg:w-[350px] @lg:border-t-0 @lg:border-r"
+  //           //   : "max-h-0 min-h-0 @lg:w-0"
+  //         }
   return (
     <div
-      className={`relative z-50 flex flex-col overflow-hidden bg-white transition-[min-height,max-height] @lg:transition-[width]  ${
-        children
-          ? "max-h-[70%] min-h-[75px] w-full border-t @lg:h-[100%!important] @lg:max-h-full @lg:w-[350px] @lg:border-r @lg:border-t-0"
-          : "max-h-0 min-h-0 @lg:w-0"
-      }`}
+      // We set text-base so the clamp works on overlay container, not main
+      className={
+        (twMerge(
+          `pointer-events-auto relative z-50 flex flex-col overflow-hidden bg-white transition-[min-height,max-height] @lg:transition-[width]`,
+        ),
+        className)
+      }
     >
       {hasChildren && (
         <>
           <ScrollableHandler
-            className="absolute inset-0 flex h-[65px] touch-none justify-center @lg:hidden"
+            className="absolute inset-0 flex h-[65px] touch-none justify-center @lg/main:hidden"
             style={{ width: "100%" }}
             {...ScrollableHandlerProps}
           >

package/src/Permalink/Permalink.tsx

@@ -0,0 +1,77 @@
+import debounce from "lodash.debounce";
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
+import { unByKey } from "ol/Observable";
+import { memo } from "preact/compat";
+import { useCallback, useEffect } from "preact/hooks";
+
+import getPermalinkParameters from "../utils/getPermalinkParameters";
+// import { LAYER_PROP_IS_EXPORTING } from "../constants";
+// import getLayersAsFlatArray from "../getLayersAsFlatArray";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { Map } from "ol";
+import type { EventsKey } from "ol/events";
+
+/**
+ * This component keeps track of the map's state using URL search parameters: x,y,z or layers visibility.
+ * WARNING: This component is not responsible for applying the url parameters, only for updating them.
+ *
+ */
+const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
+  const { map, setPermalinkUrlSearchParams } = useMapContext();
+
+  const updatePermalink = useCallback(
+    (currentMap: Map) => {
+      // No update when exporting
+      // if (map.get(LAYER_PROP_IS_EXPORTING)) {
+      //   return;
+      // }
+      const currentUrlParams = new URLSearchParams(window.location.search);
+      const urlParams = getPermalinkParameters(currentMap, currentUrlParams);
+      urlParams.set("permalink", "true");
+      setPermalinkUrlSearchParams(urlParams);
+      if (replaceState) {
+        window.history.replaceState(null, null, `?${urlParams.toString()}`);
+      }
+    },
+    [replaceState, setPermalinkUrlSearchParams],
+  );
+
+  useEffect(() => {
+    let moveEndKey: EventsKey;
+    let loadEndKey: EventsKey;
+    let changeVisibleKeys: EventsKey[];
+    const updatePermalinkDebounced = debounce(updatePermalink, 1000);
+
+    if (map) {
+      updatePermalinkDebounced(map);
+
+      // Update x,y,z in URL on moveend
+      moveEndKey = map?.on("moveend", (evt) => {
+        updatePermalinkDebounced(evt.map);
+      });
+
+      // Update layers in permalink on change:visible event
+      loadEndKey = map.once("loadend", (evt) => {
+        updatePermalinkDebounced(evt.map);
+        changeVisibleKeys = getLayersAsFlatArray(
+          evt.map.getLayers().getArray(),
+        ).map((layer) => {
+          return layer.on("change:visible", () => {
+            updatePermalinkDebounced(evt.map);
+          });
+        });
+      });
+    }
+
+    return () => {
+      unByKey(moveEndKey);
+      unByKey(loadEndKey);
+      unByKey(changeVisibleKeys);
+    };
+  }, [map, updatePermalink]);
+
+  return null;
+};
+
+export default memo(Permalink);

package/src/Permalink/index.tsx

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