@geops/rvf-mobility-web-component 0.1.55 → 0.1.57

package/src/MobilityMap/MobilityMap.tsx

@@ -1,26 +1,34 @@
 import { memo } from "preact/compat";
 import { useMemo, useRef, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
 import EmbedNavigation from "../EmbedNavigation";
+import ExportMenuButton from "../ExportMenuButton";
+import FeaturesInfosListener from "../FeaturesInfosListener";
 import GeolocationButton from "../GeolocationButton";
+import LayerTreeButton from "../LayerTreeButton";
+import LayoutState from "../LayoutState";
+import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
 import Map from "../Map";
 import MapDispatchEvents from "../MapDispatchEvents";
-import NotificationLayer from "../NotificationLayer";
+import NotificationsLayer from "../NotificationsLayer";
 import Overlay from "../Overlay";
+import OverlayContent from "../OverlayContent";
 import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
-import RouteSchedule from "../RouteSchedule";
 import ScaleLine from "../ScaleLine";
 import Search from "../Search";
-import SingleClickListener from "../SingleClickListener/SingleClickListener";
-import Station from "../Station";
+import SearchButton from "../SearchButton";
+import ShareMenuButton from "../ShareMenuButton";
+import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
 import { I18nContext } from "../utils/hooks/useI18n";
 import { MapContext } from "../utils/hooks/useMapContext";
 import i18n from "../utils/i18n";
 import WindowMessageListener from "../WindowMessageListener";
+import ZoomButtons from "../ZoomButtons";
 
 import MobilityMapAttributes from "./MobilityMapAttributes";
 
@@ -33,8 +41,10 @@ import type {
   MaplibreLayer,
   MaplibreStyleLayer,
   RealtimeLayer as MbtRealtimeLayer,
+  MocoLayer,
 } from "mobility-toolbox-js/ol";
 import type {
+  LayerGetFeatureInfoResponse,
   RealtimeStation,
   RealtimeStationId,
   RealtimeStopSequence,
@@ -50,18 +60,49 @@ export type MobilityMapProps = Record<
   null | string | undefined
 >;
 
+const scrollableHandlerProps = {
+  style: { width: "calc(100% - 60px)" },
+};
+
 function MobilityMap(props: MobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
-  const [isFollowing, setIsFollowing] = useState(false);
-  const [isTracking, setIsTracking] = useState(false);
+  const [isFollowing, setIsFollowing] = useState<boolean>(false);
+  const [isTracking, setIsTracking] = useState<boolean>(false);
+  const [isEmbed, setIsEmbed] = useState<boolean>(false);
+  const [hasGeolocation, setHasGeolocation] = useState<boolean>(false);
+  const [hasLnp, setHasLnp] = useState<boolean>(false);
+  const [hasDetails, setHasDetails] = useState<boolean>(false);
+  const [hasNotification, setHasNotification] = useState<boolean>(false);
+  const [hasPermalink, setHasPermalink] = useState<boolean>(false);
+  const [hasPrint, setHasPrint] = useState<boolean>(false);
+  const [hasRealtime, setHasRealtime] = useState<boolean>(false);
+  const [hasSearch, setHasSearch] = useState<boolean>(false);
+  const [hasStations, setHasStations] = useState<boolean>(false);
+  const [hasToolbar, setHasToolbar] = useState<boolean>(false);
+  const [hasShare, setHasShare] = useState<boolean>(false);
+  const [hasLayerTree, setHasLayerTree] = useState<boolean>(false);
+  const [isOverlayOpen, setIsOverlayOpen] = useState<boolean>(false);
+  const [isExportMenuOpen, setIsExportMenuOpen] = useState<boolean>(false);
+  const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
+  const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
   const [stopSequence, setStopSequence] = useState<RealtimeStopSequence>();
   const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
   const [station, setStation] = useState<RealtimeStation>();
   const [realtimeLayer, setRealtimeLayer] = useState<MbtRealtimeLayer>();
+  const [notificationsLayer, setNotificationsLayer] = useState<MocoLayer>();
+  const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
+    useState<MaplibreStyleLayer>();
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [featuresInfos, setFeaturesInfos] = useState<
+    LayerGetFeatureInfoResponse[]
+  >([]);
+  const [featuresInfosHovered, setFeaturesInfosHovered] = useState<
+    LayerGetFeatureInfoResponse[]
+  >([]);
   const [selectedFeature, setSelectedFeature] = useState<Feature>(null);
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>([]);
   const [permalinkUrlSearchParams, setPermalinkUrlSearchParams] =
@@ -70,40 +111,6 @@ function MobilityMap(props: MobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const {
-    embed,
-    geolocation,
-    notification,
-    permalink,
-    realtime,
-    search,
-    tenant,
-  } = props;
-
-  const hasRealtime = useMemo(() => {
-    return realtime === "true";
-  }, [realtime]);
-
-  const hasNotification = useMemo(() => {
-    return notification === "true" || !!previewNotifications;
-  }, [notification, previewNotifications]);
-
-  const hasGeolocation = useMemo(() => {
-    return geolocation === "true";
-  }, [geolocation]);
-
-  const hasPermalink = useMemo(() => {
-    return permalink === "true";
-  }, [permalink]);
-
-  const hasSearch = useMemo(() => {
-    return search === "true";
-  }, [search]);
-
-  const isEmbed = useMemo(() => {
-    return embed === "true";
-  }, [embed]);
-
   // Object representing all the web-component attributes and the map context values.
   const mapContextValue = useMemo(() => {
     return {
@@ -111,19 +118,61 @@ function MobilityMap(props: MobilityMapProps) {
       ...props,
       // MapContextProps
       baseLayer,
+      featuresInfos,
+      featuresInfosHovered,
+      hasDetails,
+      hasGeolocation,
+      hasLayerTree,
+      hasLnp,
+      hasNotification,
+      hasPermalink,
+      hasPrint,
+      hasRealtime,
+      hasSearch,
+      hasShare,
+      hasToolbar,
       isEmbed,
+      isExportMenuOpen,
       isFollowing,
+      isLayerTreeOpen,
+      isOverlayOpen,
+      isSearchOpen,
+      isShareMenuOpen,
       isTracking,
+      linesNetworkPlanLayer,
       map,
+      notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
       realtimeLayer,
       selectedFeature,
       selectedFeatures,
       setBaseLayer,
+      setFeaturesInfos,
+      setFeaturesInfosHovered,
+      setHasDetails,
+      setHasGeolocation,
+      setHasLayerTree,
+      setHasLnp,
+      setHasNotification,
+      setHasPermalink,
+      setHasPrint,
+      setHasRealtime,
+      setHasSearch,
+      setHasShare,
+      setHasStations,
+      setHasToolbar,
+      setIsEmbed,
+      setIsExportMenuOpen,
       setIsFollowing,
+      setIsLayerTreeOpen,
+      setIsOverlayOpen,
+      setIsSearchOpen,
+      setIsShareMenuOpen,
       setIsTracking,
+      setLinesNetworkPlanLayer,
       setMap,
+      setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
       setRealtimeLayer,
@@ -143,10 +192,30 @@ function MobilityMap(props: MobilityMapProps) {
   }, [
     props,
     baseLayer,
+    featuresInfos,
+    featuresInfosHovered,
+    hasDetails,
+    hasGeolocation,
+    hasLayerTree,
+    hasLnp,
+    hasNotification,
+    hasPermalink,
+    hasPrint,
+    hasRealtime,
+    hasSearch,
+    hasShare,
+    hasToolbar,
     isEmbed,
+    isExportMenuOpen,
     isFollowing,
+    isLayerTreeOpen,
+    isOverlayOpen,
+    isSearchOpen,
+    isShareMenuOpen,
     isTracking,
+    linesNetworkPlanLayer,
     map,
+    notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,
     realtimeLayer,
@@ -161,52 +230,197 @@ function MobilityMap(props: MobilityMapProps) {
 
   return (
     <I18nContext.Provider value={i18n}>
+      {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
+      see  https://github.com/tailwindlabs/tailwindcss/issues/15005*/}
+      <style>
+        {`:host {
+            --tw-divide-y-reverse: 0;
+            --tw-border-style: solid;
+            --tw-font-weight: initial;
+            --tw-tracking: initial;
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+            --tw-rotate-x: rotateX(0);
+            --tw-rotate-y: rotateY(0);
+            --tw-rotate-z: rotateZ(0);
+            --tw-skew-x: skewX(0);
+            --tw-skew-y: skewY(0);
+            --tw-space-x-reverse: 0;
+            --tw-gradient-position: initial;
+            --tw-gradient-from: #0000;
+            --tw-gradient-via: #0000;
+            --tw-gradient-to: #0000;
+            --tw-gradient-stops: initial;
+            --tw-gradient-via-stops: initial;
+            --tw-gradient-from-position: 0%;
+            --tw-gradient-via-position: 50%;
+            --tw-gradient-to-position: 100%;
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-ring-color: initial;
+            --tw-ring-shadow: 0 0 #0000;
+            --tw-inset-ring-color: initial;
+            --tw-inset-ring-shadow: 0 0 #0000;
+            --tw-ring-inset: initial;
+            --tw-ring-offset-width: 0px;
+            --tw-ring-offset-color: #fff;
+            --tw-ring-offset-shadow: 0 0 #0000;
+            --tw-blur: initial;
+            --tw-brightness: initial;
+            --tw-contrast: initial;
+            --tw-grayscale: initial;
+            --tw-hue-rotate: initial;
+            --tw-invert: initial;
+            --tw-opacity: initial;
+            --tw-saturate: initial;
+            --tw-sepia: initial;
+            --tw-drop-shadow: initial;
+            --tw-duration: initial;
+            --tw-ease: initial;
+        }`}
+      </style>
       <style>{tailwind}</style>
       <style>{style}</style>
       <MapContext.Provider value={mapContextValue}>
+        <LayoutState />
         <Permalink replaceState={hasPermalink} />
         <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
         <WindowMessageListener eventNode={eventNodeRef.current} />
+        <SingleClickListener />
+        <FeaturesInfosListener />
+
+        {/* Layers */}
+        <BaseLayer />
+        {hasNotification && <NotificationsLayer />}
+        {hasRealtime && <RealtimeLayer />}
+        {hasStations && <StationsLayer />}
+        {hasLnp && <LinesNetworkPlanLayer />}
+
+        {/* Layout  */}
         <div
           className="@container/main relative size-full border font-sans"
           ref={eventNodeRef}
         >
           <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
             <Map className="relative flex-1 overflow-visible">
-              <BaseLayer />
-              <SingleClickListener />
               <EmbedNavigation />
 
-              {hasNotification && <NotificationLayer />}
-              {hasRealtime && <RealtimeLayer />}
-              {tenant && <StationsLayer />}
               <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 top-2 right-2 z-10 flex">
-                {hasGeolocation && <GeolocationButton />}
+
+              <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
+                <ZoomButtons />
               </div>
-              {hasSearch && (
+
+              {hasGeolocation && (
+                <div className="absolute top-2 right-2 z-10 flex flex-col gap-2">
+                  <GeolocationButton />
+                </div>
+              )}
+
+              {!hasToolbar && hasSearch && (
                 <div className="absolute top-2 right-12 left-2 z-10 flex max-h-[90%] max-w-96 min-w-64 flex-col">
                   <Search />
                 </div>
               )}
             </Map>
 
-            <Overlay
-              className={"z-50"}
-              ScrollableHandlerProps={{
-                style: { width: "calc(100% - 60px)" },
-              }}
-            >
-              {hasRealtime && trainId && (
-                <RouteSchedule className="relative overflow-x-hidden overflow-y-auto" />
-              )}
-              {tenant && stationId && (
-                <Station className="relative overflow-x-hidden overflow-y-auto" />
+            <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
+              <div
+                className={
+                  "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+                }
+              >
+                {hasToolbar && (
+                  <div
+                    className={twMerge(
+                      "border-grey relative z-10 flex gap-[1px] overflow-hidden rounded-2xl border",
+                      "*:size-[46px] *:rounded-none *:border-none",
+                      "*:first:!rounded-l-2xl",
+                      "*:last:!rounded-r-2xl",
+                      isSearchOpen
+                        ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
+                        : "",
+                    )}
+                  >
+                    {hasPrint && <ExportMenuButton title={"Drucken"} />}
+                    {hasShare && <ShareMenuButton title={"Share"} />}
+                    {hasLayerTree && <LayerTreeButton title={"Layers"} />}
+                    {hasSearch && <SearchButton title={"Suche"} />}
+                  </div>
+                )}
+
+                {hasToolbar && hasSearch && (
+                  <div
+                    className={twMerge(
+                      "absolute top-14 left-0 z-5 h-[48px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-47px)]",
+                      isSearchOpen ? "w-64 opacity-100" : "",
+                    )}
+                  >
+                    <Search
+                      className={
+                        "border-grey @container m-0 h-[40px] gap-4 rounded-2xl border p-2 px-4 text-base @sm/main:h-[48px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
+                      }
+                      // inputClassName="h-6 text-base"
+                      inputContainerClassName="border-none"
+                      resultClassName="text-base  **:hover:cursor-pointer p-2"
+                      resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-t-0 "
+                      withResultsClassName="text-base !rounded-b-none"
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Desktop (>= lg) */}
+              {isOverlayOpen && (
+                <div
+                  className={twMerge(
+                    "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-64",
+                  )}
+                  style={{ containerType: "normal" }}
+                >
+                  <Overlay
+                    className={
+                      "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
+                    }
+                    ScrollableHandlerProps={scrollableHandlerProps}
+                  >
+                    <OverlayContent
+                      hasDetails={hasDetails}
+                      hasLayerTree={hasLayerTree}
+                      hasPrint={hasPrint}
+                      hasRealtime={hasRealtime}
+                      hasSearch={false}
+                      hasShare={hasShare}
+                    />
+                  </Overlay>
+                </div>
               )}
-            </Overlay>
+            </div>
+
+            {/* Mobile (< lg) */}
+            {isOverlayOpen && (
+              <Overlay
+                className={
+                  "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
+                }
+                ScrollableHandlerProps={scrollableHandlerProps}
+              >
+                <OverlayContent
+                  hasDetails={hasDetails}
+                  hasLayerTree={hasLayerTree}
+                  hasPrint={hasPrint}
+                  hasRealtime={hasRealtime}
+                  hasSearch={false}
+                  hasShare={hasShare}
+                />
+              </Overlay>
+            )}
           </div>
         </div>
       </MapContext.Provider>

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -2,9 +2,9 @@
 
 import {
   DEFAULT_QUERYABLE_LAYERS,
+  LAYERS_NAMES,
   LAYERS_WITH_LINK,
-  RVF_EXTENT_3857,
-  RVF_LAYERS_NAMES,
+  MAX_EXTENT,
 } from "../utils/constants";
 
 // import type { LayersConfig } from "../utils/hooks/useLayerConfig";
@@ -13,7 +13,7 @@ import {
 // 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>`;
+// const geopsRealtimeApiLink = `<a href="https://developer.geops.io/apis/realtime">geOps Realtime API</a>`;
 
 export interface WebComponentAttributeDoc {
   defaultValue?: string;
@@ -32,6 +32,7 @@ export type MobilityMapAttributeName =
   | "layers"
   | "layersconfig"
   | "layertree"
+  | "lnp"
   | "mainlink"
   | "mainlinktitle"
   | "mapsurl"
@@ -79,7 +80,7 @@ const attrs: MobilityMapAttributes = {
   details: {
     defaultValue: "true",
     description:
-      "Show shared mobility details in the sidebar when we click on an shared mobility feature.",
+      "When a feature of a queryable layer is clicked, it displays informations about it.",
     type: "boolean",
   },
   embed: {
@@ -89,7 +90,7 @@ const attrs: MobilityMapAttributes = {
     type: "boolean",
   },
   extent: {
-    defaultValue: RVF_EXTENT_3857.join(","),
+    defaultValue: MAX_EXTENT.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.",
   },
@@ -100,59 +101,57 @@ const attrs: MobilityMapAttributes = {
   },
   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.<br/>Layers available are ${Object.values(RVF_LAYERS_NAMES).join(", ")}.`,
+    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.<br/>Layers available are ${Object.values(LAYERS_NAMES).join(", ")}.`,
   },
   layersconfig: {
-    // defaultValue:
-    // JSON.stringify({
-    //   [RVF_LAYERS_NAMES.liniennetz]: {
-    //     link: {
-    //       href: "https://www.rvf.de/fahrtinfo/netzplan",
-    //       show: true,
-    //       text: "Zu den Liniennetzplänen",
-    //     },
-    //     title: "Liniennetzpläne",
-    //   },
-    //   [RVF_LAYERS_NAMES.meldungen]: {
-    //     link: {
-    //       href: "https://moco.geops.io/situation/{{id}}",
-    //       show: true,
-    //       text: "Zum Moco",
-    //     },
-    //   },
-    // } as LayersConfig),
     description: `A JSON string to configure the layers and other components associated to it.<br/>
-       The layers available are : ${LAYERS_WITH_LINK}.<br/>
+       The layers available are : ${LAYERS_WITH_LINK.toString()}.<br/>
        Definition for a layer :
 <pre style="font-size: 12px; overflow: auto;">{
-  liniennetz: { // The layer name, here the liniennetz layer.
-    link: { // Define the link to display int footer of the details view, if not defined no link is displayed.
-      text: "Zu den Liniennetzplänen",  // 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.
+  "liniennetz": {
+    "link": {
+      "href": "https://www.rvf.de/fahrtinfo/netzplan",
+      "show": true,
+      "text": "Zu den Liniennetzplänen"
     },
-    title: "Liniennetzpläne", // Text displayed on the layer tree and in the header of the details view.
+    "title": "Liniennetzpläne"
   }
-</pre>}`,
+</pre>}
+<br/>
+where:
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li><i>link</i> defined a external link displayed at the bottom of the detail view</li>
+    <ul style="list-style-type: disc; padding-left: 40px;">
+      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li>
+      <li><i>text</i> is the text display as a link</li>
+      <li><i>show</i> show/hide the link in the details view</li>
+    </ul>
+  <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
+</ul>`,
   },
   layertree: {
     defaultValue: "true",
     description: "Show/hide the layers tree button in the toolbar.",
     type: "boolean",
   },
+  lnp: {
+    defaultValue: "true",
+    description: null,
+    type: "boolean",
+  },
   mainlink: {
-    // defaultValue: "https://www.rvf.de/",
-    description: "A link displayed on bottom left of the map.",
+    description:
+      "A link displayed on bottom left of the map.  The link can be template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#{{x}}/{{y}}/{{z}}.",
   },
   mainlinktitle: {
-    // defaultValue: "Gesamte Karte",
     description: "A title for the mainlink, used as tooltip.",
   },
   mapsurl: {
     defaultValue: "https://maps.geops.io",
-    description: null, //`The ${geopsMapsApiLink} url to use.`,
+    description: null,
   },
   maxextent: {
-    defaultValue: RVF_EXTENT_3857.join(","),
+    defaultValue: MAX_EXTENT.join(","),
     description:
       "The maximum extent of the map in EPSG:3857 coordinates.<br/>Ex: 831634,5933959,940649,6173660 .",
   },
@@ -165,25 +164,23 @@ const attrs: MobilityMapAttributes = {
   },
   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: "false",
+    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.`,
+    description: null,
   },
   notificationurl: {
     defaultValue: "https://moco.geops.io/api/v2/",
-    description: `The ${geopsMocoApiLink} url to use.`,
+    description: null,
   },
   permalink: {
     defaultValue: "false",
@@ -197,26 +194,25 @@ const attrs: MobilityMapAttributes = {
     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.",
+    defaultValue: DEFAULT_QUERYABLE_LAYERS.toString(),
+    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.<br/>
+      Layers available are ${Object.values(LAYERS_NAMES).join(", ")}`,
   },
   realtime: {
     defaultValue: "true",
-    description: `Add the realtime layer to the map. Data comes from the ${geopsRealtimeApiLink} .`,
+    description: null,
     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.`,
+    description: null,
   },
   realtimeurl: {
     defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
-    description: null, //`The ${geopsRealtimeApiLink} url to use.`,
+    description: null,
   },
   runs: {
     defaultValue: "false",
@@ -236,10 +232,10 @@ const attrs: MobilityMapAttributes = {
   },
   stopsurl: {
     defaultValue: "https://api.geops.io/stops/v1/",
-    description: null, // `The ${geopsStopsApiLink} to use.`,
+    description: null,
   },
   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.`,
+    description: null,
   },
   toolbar: {
     defaultValue: "true",