@geops/rvf-mobility-web-component 0.1.64 → 0.1.66

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,200 +1,16 @@
-import {
-  type MaplibreLayer,
-  type MaplibreStyleLayer,
-  type MapsetLayer as MbtMapsetLayer,
-  type RealtimeLayer as MbtRealtimeLayer,
-  type MocoLayer,
-} from "mobility-toolbox-js/ol";
+import { type MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
+import { useMemo, useState } from "preact/hooks";
 
-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 MapsetLayer from "../MapsetLayer";
+import MobilityMap from "../MobilityMap/MobilityMap";
 import MobilityMapAttributes from "../MobilityMap/MobilityMapAttributes";
-import NotificationsLayer from "../NotificationsLayer";
-import Overlay from "../Overlay";
-import OverlayContent from "../OverlayContent";
-import Permalink from "../Permalink";
-import RealtimeLayer from "../RealtimeLayer";
-import RvfMainLinkButton from "../RvfMainLinkButton";
-import RvfPoisLayer from "../RvfPoisLayer";
-import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
-import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
-import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
-import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
-import ScaleLine from "../ScaleLine";
-import Search from "../Search";
-import SearchButton from "../SearchButton";
-import ShareMenuButton from "../ShareMenuButton";
-import SingleClickListener from "../SingleClickListener";
-import StationsLayer from "../StationsLayer";
-import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
-import getBgColor from "../utils/getBgColor";
-import { getRadius } from "../utils/getRadius";
-import getTextColor from "../utils/getTextColor";
-import { I18nContext } from "../utils/hooks/useI18n";
-import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
-import useInitialPermalink from "../utils/hooks/useInitialPermalink";
-import { MapContext } from "../utils/hooks/useMapContext";
 import { RvfContext } from "../utils/hooks/useRvfContext";
-import i18n from "../utils/i18n";
-import realtimeRVFStyle from "../utils/realtimeRVFStyle";
-import WindowMessageListener from "../WindowMessageListener";
-import ZoomButtons from "../ZoomButtons";
 
-// @ts-expect-error bad type definition
-import tailwind from "../style.css";
-// @ts-expect-error bad type definition
-import style from "./index.css";
-
-import type {
-  LayerGetFeatureInfoResponse,
-  RealtimeStation,
-  RealtimeStationId,
-  RealtimeStopSequence,
-  RealtimeTrainId,
-  SituationType,
-} from "mobility-toolbox-js/types";
-import type { Feature, Map as OlMap } from "ol";
 import type { Group } from "ol/layer";
 
 import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
 
-const PRIORITY_FROM_TYPE = {
-  bus: 25,
-  coach: 15,
-  train: 30,
-  tram: 20,
-};
-
-export type RvfMobilityMapProps = {
-  details: string;
-  embed: string;
-  layers: string; // list of visible layers on load
-  layertree: string;
-  print: string;
-  queryablelayers: string;
-  share: string;
-  toolbar: string;
-} & MobilityMapProps;
-
-const baseLayerProps = {
-  mapLibreOptions: {
-    // For printing purpose
-    maxCanvasSize: [20000, 20000] as [number, number], // remove 4096 limitations
-    preserveDrawingBuffer: true,
-  },
-};
-
-const styleProps = {
-  //fontSize: 16
-};
-
-const scrollableHandlerProps = {
-  style: { width: "calc(100% - 60px)" },
-};
-
-const realtimeLayerProps = {
-  fullTrajectoryStyle: fullTrajectoryStyle,
-  getMotsByZoom: (z: number) => {
-    if (z < 9) {
-      return ["rail"];
-    }
-    return null;
-  },
-  sort: (
-    { properties: { delay: delayA, type: typeA } },
-    { properties: { delay: delayB, type: typeB } },
-  ) => {
-    if (typeA !== typeB) {
-      if (PRIORITY_FROM_TYPE[typeA] < PRIORITY_FROM_TYPE[typeB]) {
-        return -1;
-      }
-      return 1;
-    }
-
-    if (delayA === delayB) {
-      return 0;
-    }
-
-    if (delayA < delayB) {
-      return -1;
-    }
-    return 1;
-  },
-  style: realtimeRVFStyle,
-  styleOptions: {
-    getBgColor: getBgColor,
-    getMaxRadiusForStrokeAndDelay: () => {
-      return 4;
-    },
-    getMaxRadiusForText: () => {
-      return 8;
-    },
-    getRadius: getRadius,
-    getTextColor: getTextColor,
-  },
-};
-
-function RvfMobilityMap(props: RvfMobilityMapProps) {
-  const eventNodeRef = useRef<HTMLDivElement>();
-  const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
-  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 [hasMapset, setHasMapset] = 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 [mapsetLayer, setMapsetLayer] = useState<MbtMapsetLayer>();
-
-  const [map, setMap] = useState<OlMap>();
-  const [stationId, setStationId] = useState<RealtimeStationId>();
-  const [trainId, setTrainId] = useState<RealtimeTrainId>();
-  const [linesIds, setLinesIds] = useState<string[]>();
-  const [featuresInfos, setFeaturesInfos] = useState<
-    LayerGetFeatureInfoResponse[]
-  >([]);
-  const [featuresInfosHovered, setFeaturesInfosHovered] = useState<
-    LayerGetFeatureInfoResponse[]
-  >([]);
-  const [selectedFeature, setSelectedFeature] = useState<Feature>();
-  const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
-
-  const [permalinkUrlSearchParams, setPermalinkUrlSearchParams] =
-    useState<URLSearchParams>();
+function RvfMobilityMap(props: MobilityMapProps) {
   const [sellingPointsLayer, setSellingPointsLayer] =
     useState<MaplibreStyleLayer>();
   const [tarifZonenLayer, setTarifZonenLayer] = useState<MaplibreStyleLayer>();
@@ -202,141 +18,6 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
   const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
     useState<Group>();
 
-  const [previewNotifications, setPreviewNotifications] =
-    useState<SituationType[]>();
-
-  const { lang, layers, mainlink } = props;
-
-  // Apply initial visibility of layers
-  useInitialLayersVisiblity(map, layers);
-
-  const mapContextValue = useMemo(() => {
-    return {
-      // MobilityMapProps
-      ...props,
-      // MapContextProps
-      baseLayer,
-      featuresInfos,
-      featuresInfosHovered,
-      hasDetails,
-      hasGeolocation,
-      hasLayerTree,
-      hasLnp,
-      hasMapset,
-      hasNotification,
-      hasPermalink,
-      hasPrint,
-      hasRealtime,
-      hasSearch,
-      hasShare,
-      hasStations,
-      hasToolbar,
-      isEmbed,
-      isExportMenuOpen,
-      isFollowing,
-      isLayerTreeOpen,
-      isOverlayOpen,
-      isSearchOpen,
-      isShareMenuOpen,
-      isTracking,
-      linesIds,
-      linesNetworkPlanLayer,
-      map,
-      mapsetLayer,
-      notificationsLayer,
-      permalinkUrlSearchParams,
-      previewNotifications,
-      realtimeLayer,
-      selectedFeature,
-      selectedFeatures,
-      setBaseLayer,
-      setFeaturesInfos,
-      setFeaturesInfosHovered,
-      setHasDetails,
-      setHasGeolocation,
-      setHasLayerTree,
-      setHasLnp,
-      setHasMapset,
-      setHasNotification,
-      setHasPermalink,
-      setHasPrint,
-      setHasRealtime,
-      setHasSearch,
-      setHasShare,
-      setHasStations,
-      setHasToolbar,
-      setIsEmbed,
-      setIsExportMenuOpen,
-      setIsFollowing,
-      setIsLayerTreeOpen,
-      setIsOverlayOpen,
-      setIsSearchOpen,
-      setIsShareMenuOpen,
-      setIsTracking,
-      setLinesIds,
-      setLinesNetworkPlanLayer,
-      setMap,
-      setMapsetLayer,
-      setNotificationsLayer,
-      setPermalinkUrlSearchParams,
-      setPreviewNotifications,
-      setRealtimeLayer,
-      setSelectedFeature,
-      setSelectedFeatures,
-      setStation,
-      setStationId,
-      setStationsLayer,
-      setStopSequence,
-      setTrainId,
-      station,
-      stationId,
-      stationsLayer,
-      stopSequence,
-      trainId,
-    };
-  }, [
-    props,
-    baseLayer,
-    featuresInfos,
-    featuresInfosHovered,
-    hasDetails,
-    hasGeolocation,
-    hasLayerTree,
-    hasLnp,
-    hasMapset,
-    hasNotification,
-    hasPermalink,
-    hasPrint,
-    hasRealtime,
-    hasSearch,
-    hasShare,
-    hasStations,
-    hasToolbar,
-    isEmbed,
-    isExportMenuOpen,
-    isFollowing,
-    isLayerTreeOpen,
-    isOverlayOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    isTracking,
-    linesIds,
-    linesNetworkPlanLayer,
-    map,
-    mapsetLayer,
-    notificationsLayer,
-    permalinkUrlSearchParams,
-    previewNotifications,
-    realtimeLayer,
-    selectedFeature,
-    selectedFeatures,
-    station,
-    stationId,
-    stationsLayer,
-    stopSequence,
-    trainId,
-  ]);
-
   const rvfContextValue = useMemo(() => {
     return {
       poisLayer,
@@ -355,258 +36,15 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     tarifZonenLayer,
   ]);
 
-  const copyrightOptions = useMemo(() => {
-    return {
-      format: (copyrights) => {
-        const newCopyrights = [];
-        let alreadyAGeopsLink = false;
-        copyrights.forEach((copyright) => {
-          if (/geops/i.test(copyright)) {
-            // Hack until all geOps tiles are the same
-            // Currently there is some geops.com or geops.ch links
-            if (!alreadyAGeopsLink) {
-              alreadyAGeopsLink = true;
-              newCopyrights.push(copyright);
-            }
-          } else if (!/(sbb|rvf)/i.test(copyright)) {
-            newCopyrights.push(copyright);
-          }
-        });
-
-        return newCopyrights.join("&nbsp;|&nbsp;");
-      },
-    };
-  }, []);
-
-  const stationsLayerProps = useMemo(() => {
-    return {
-      layersFilter: ({ metadata }) => {
-        return metadata?.["general.filter"] === "stations";
-      },
-    };
-  }, []);
-
-  useEffect(() => {
-    i18n.locale(lang);
-  }, [lang]);
-
   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}>
-        <RvfContext.Provider value={rvfContextValue}>
-          <LayoutState />
-          <Permalink replaceState={hasPermalink} />
-          <MapDispatchEvents node={eventNodeRef.current} wcAttributes={props} />
-          <WindowMessageListener eventNode={eventNodeRef.current} />
-          <SingleClickListener />
-          <FeaturesInfosListener />
-
-          <div
-            className="@container/main relative size-full overflow-hidden font-sans"
-            ref={eventNodeRef}
-            style={styleProps}
-          >
-            <div className="relative flex size-full flex-col text-base @lg/main:flex-row-reverse">
-              <Map className="relative flex-1 overflow-visible">
-                <BaseLayer {...baseLayerProps} />
-                {isEmbed && <EmbedNavigation />}
-                {hasNotification && <NotificationsLayer />}
-                <RvfSelectedFeatureHighlightLayer />
-                {hasRealtime && <RealtimeLayer {...realtimeLayerProps} />}
-                <StationsLayer minZoom={10} {...stationsLayerProps} />
-                <RvfTarifZonenLayer />
-                <RvfSellingPointsLayer />
-                {hasLnp && <LinesNetworkPlanLayer />}
-
-                {hasMapset && <MapsetLayer />}
-
-                <RvfPoisLayer />
-                <RvfSharedMobilityLayerGroup />
-                {mainlink && (
-                  <RvfMainLinkButton className="absolute inset-x-2 bottom-8 z-10" />
-                )}
-
-                <div className="pointer-events-none 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="pointer-events-auto bg-slate-50/70"
-                    options={copyrightOptions}
-                  />
-                </div>
-                <div className="absolute top-2 right-2 z-10 flex">
-                  {hasGeolocation && (
-                    <GeolocationButton title={"Geolokalisierung"} />
-                  )}
-                </div>
-                <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
-                  <ZoomButtons />
-                </div>
-
-                {!hasToolbar && hasSearch && (
-                  <div
-                    className={twMerge(
-                      "absolute top-2 right-2 left-2 z-10 max-w-96",
-                      isOverlayOpen && "@lg:left-68",
-                    )}
-                  >
-                    <Search />
-                  </div>
-                )}
-              </Map>
-
-              <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
-                {hasToolbar && (
-                  <div
-                    className={
-                      "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
-                    }
-                    //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
-                  >
-                    {hasSearch && (
-                      <div
-                        className={twMerge(
-                          "absolute top-12 left-0 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
-                          isSearchOpen ? "w-64 opacity-100" : "",
-                        )}
-                      >
-                        <Search
-                          className={
-                            "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
-                          }
-                          inputClassName="h-6 text-base"
-                          inputContainerClassName="border-none"
-                          resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
-                          resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
-                          withResultsClassName="text-base !rounded-b-none"
-                        />
-                      </div>
-                    )}
-
-                    <div
-                      className={twMerge(
-                        "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border @sm/main:h-[44px] @md/main:h-[48px]",
-                        "*:size-[38px] *:rounded-none *:border-none *:@sm/main:size-[42px] *:@md/main:!size-[46px]",
-                        "*: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 />}
-                      {hasShare && <ShareMenuButton />}
-                      {hasLayerTree && <LayerTreeButton />}
-                      {hasSearch && <SearchButton />}
-                    </div>
-                  </div>
-                )}
-
-                {/* Desktop (>= lg) */}
-                <div
-                  className={twMerge(
-                    "pointer-events-none flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
-                    isOverlayOpen ? "@lg:min-w-[320px]" : "p-0",
-                  )}
-                  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>
-              </div>
-
-              {/* Mobile */}
-              <Overlay
-                className={
-                  isOverlayOpen
-                    ? "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
-                    : "@lg:hidden"
-                }
-                ScrollableHandlerProps={scrollableHandlerProps}
-              >
-                <OverlayContent
-                  hasDetails={hasDetails}
-                  hasLayerTree={hasLayerTree}
-                  hasPrint={hasPrint}
-                  hasRealtime={hasRealtime}
-                  hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
-                  hasShare={hasShare}
-                />
-              </Overlay>
-            </div>
-          </div>
-        </RvfContext.Provider>
-      </MapContext.Provider>
-    </I18nContext.Provider>
+    <RvfContext.Provider value={rvfContextValue}>
+      <MobilityMap {...props} />
+    </RvfContext.Provider>
   );
 }
 
+const MemoRvFMobilityMap = memo(RvfMobilityMap);
+
 // We creates a wrapper to inject the default props values from MobilityMapAttributes.
 const defaultProps: Partial<MobilityMapProps> = {};
 Object.entries(MobilityMapAttributes).forEach(([key]) => {
@@ -614,15 +52,7 @@ Object.entries(MobilityMapAttributes).forEach(([key]) => {
 });
 
 function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  // Apply initial value from permalink, only x,y,z
-  const { permalinktemplate } = props;
-  const { permalinktemplate: defaultPermalinkTemplate } = defaultProps;
-  const propsFromPermalink = useInitialPermalink(
-    permalinktemplate || defaultPermalinkTemplate,
-  );
-  return (
-    <RvfMobilityMap {...defaultProps} {...props} {...propsFromPermalink} />
-  );
+  return <MemoRvFMobilityMap {...defaultProps} {...props} />;
 }
 
 export default memo(MobilityMapWithDefaultProps);

package/src/RvfRealtimeLayer/RvfRealtimeLayer.tsx

@@ -0,0 +1,64 @@
+import { memo } from "preact/compat";
+
+import RealtimeLayer from "../RealtimeLayer/RealtimeLayer";
+import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
+import getBgColor from "../utils/getBgColor";
+import { getRadius } from "../utils/getRadius";
+import getTextColor from "../utils/getTextColor";
+import realtimeRVFStyle from "../utils/realtimeRVFStyle";
+
+import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol";
+
+const PRIORITY_FROM_TYPE = {
+  bus: 25,
+  coach: 15,
+  train: 30,
+  tram: 20,
+};
+
+const defaultProps: Partial<RealtimeLayerOptions> = {
+  fullTrajectoryStyle: fullTrajectoryStyle,
+  getMotsByZoom: (z: number) => {
+    if (z < 9) {
+      return ["rail"];
+    }
+    return null;
+  },
+  sort: (
+    { properties: { delay: delayA, type: typeA } },
+    { properties: { delay: delayB, type: typeB } },
+  ) => {
+    if (typeA !== typeB) {
+      if (PRIORITY_FROM_TYPE[typeA] < PRIORITY_FROM_TYPE[typeB]) {
+        return -1;
+      }
+      return 1;
+    }
+
+    if (delayA === delayB) {
+      return 0;
+    }
+
+    if (delayA < delayB) {
+      return -1;
+    }
+    return 1;
+  },
+  style: realtimeRVFStyle,
+  styleOptions: {
+    getBgColor: getBgColor,
+    getMaxRadiusForStrokeAndDelay: () => {
+      return 4;
+    },
+    getMaxRadiusForText: () => {
+      return 8;
+    },
+    getRadius: getRadius,
+    getTextColor: getTextColor,
+  },
+};
+function RvfRealtimeLayer(props: Partial<RealtimeLayerOptions>) {
+  return <RealtimeLayer {...defaultProps} {...props} />;
+}
+
+export default memo(RvfRealtimeLayer);

package/src/RvfRealtimeLayer/index.tsx

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