@geops/rvf-mobility-web-component 0.1.59 → 0.1.60

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -361,6 +361,7 @@ function NotificationDetails({
                     <Warning />
                   </span>
                   <span
+                    className={"*:inline"}
                     dangerouslySetInnerHTML={{
                       __html: textualContent?.summary,
                     }}
@@ -390,12 +391,26 @@ function NotificationDetails({
                         key={startTime}
                       >
                         <span>
-                          {`von ${toShortDate(new Date(startTime), !hasDailyTime, !isStartCurrentYear)}`}
-                          {!isEndInfinite &&
-                            ` bis ${toShortDate(new Date(endTime), !hasDailyTime, !isEndCurrentYear)}`}
+                          {t("from_to", {
+                            from: toShortDate(
+                              new Date(startTime),
+                              !hasDailyTime,
+                              !isStartCurrentYear,
+                            ),
+                            to: !isEndInfinite
+                              ? toShortDate(
+                                  new Date(endTime),
+                                  !hasDailyTime,
+                                  !isEndCurrentYear,
+                                )
+                              : undefined,
+                          })}
                         </span>
                         {hasDailyTime && (
-                          <span>{` (täglich von ${dailyStartTime} bis ${dailyEndTime})`}</span>
+                          <span>{` (${t("daily_from_to", {
+                            from: dailyStartTime,
+                            to: dailyEndTime,
+                          })})`}</span>
                         )}
                       </div>
                     );
@@ -405,13 +420,13 @@ function NotificationDetails({
                   className="mt-4"
                   dangerouslySetInnerHTML={{
                     __html:
-                      textualContent?.description || "Keine Details verfügbar",
+                      textualContent?.description || t("no_details_available"),
                   }}
                 />
                 {!!pubLines?.length && (
                   <div>
                     <br />
-                    <div className={"font-bold"}>Betroffene Lines:</div>
+                    <div className={"font-bold"}>{t("affected_lines")}:</div>
                     <div className={"flex flex-wrap gap-1 text-sm"}>
                       {pubLines?.map((name) => {
                         return (
@@ -430,7 +445,7 @@ function NotificationDetails({
                 )}
                 <div>
                   <br />
-                  <div className={"font-bold"}>Betroffene Haltestellen:</div>
+                  <div className={"font-bold"}>{t("affected_stops")}:</div>
                   <div className={"flex flex-wrap gap-1 text-sm"}>
                     {stations?.length ? (
                       stations.map((name) => {
@@ -451,7 +466,7 @@ function NotificationDetails({
                           "bg-red rounded-md px-2 py-1 font-bold text-white"
                         }
                       >
-                        Alle Bahnhöfe auf dieser Strecke
+                        {t("all_line_stops")}
                       </div>
                     )}
                   </div>

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,5 +1,5 @@
 import { memo } from "preact/compat";
-import { useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import BaseLayer from "../BaseLayer";
@@ -31,13 +31,13 @@ import SearchButton from "../SearchButton";
 import ShareMenuButton from "../ShareMenuButton";
 import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
-import { LAYERS_TITLES } from "../utils/constants";
 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";
@@ -199,7 +199,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const { layers, mainlink } = props;
+  const { lang, layers, mainlink } = props;
 
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers);
@@ -371,6 +371,10 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     };
   }, []);
 
+  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
@@ -445,35 +449,15 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
               <Map className="relative flex-1 overflow-visible">
                 <BaseLayer {...baseLayerProps} />
                 {isEmbed && <EmbedNavigation />}
-                {hasNotification && (
-                  <NotificationsLayer
-                    isQueryable={true}
-                    title={LAYERS_TITLES.notifications}
-                  />
-                )}
+                {hasNotification && <NotificationsLayer />}
                 <RvfSelectedFeatureHighlightLayer />
-                {hasRealtime && (
-                  <RealtimeLayer
-                    title={LAYERS_TITLES.realtime}
-                    {...realtimeLayerProps}
-                  />
-                )}
-                <StationsLayer
-                  minZoom={10}
-                  {...stationsLayerProps}
-                  title={LAYERS_TITLES.stations}
-                />
-                <RvfTarifZonenLayer title={LAYERS_TITLES.tarifzonen} />
-                <RvfSellingPointsLayer title={LAYERS_TITLES.verkaufsstellen} />
-                {hasLnp && (
-                  <LinesNetworkPlanLayer
-                    title={LAYERS_TITLES.linesnetworkplan}
-                  />
-                )}
-                <RvfPoisLayer title={LAYERS_TITLES.pois} />
-                <RvfSharedMobilityLayerGroup
-                  title={LAYERS_TITLES.sharedMobility}
-                />
+                {hasRealtime && <RealtimeLayer {...realtimeLayerProps} />}
+                <StationsLayer minZoom={10} {...stationsLayerProps} />
+                <RvfTarifZonenLayer />
+                <RvfSellingPointsLayer />
+                {hasLnp && <LinesNetworkPlanLayer />}
+                <RvfPoisLayer />
+                <RvfSharedMobilityLayerGroup />
                 {mainlink && (
                   <RvfMainLinkButton className="absolute inset-x-2 bottom-8 z-10" />
                 )}
@@ -493,6 +477,17 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                 <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 *:pointer-events-auto">
@@ -506,7 +501,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                     {hasSearch && (
                       <div
                         className={twMerge(
-                          "absolute top-12 left-0 h-[40px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
+                          "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" : "",
                         )}
                       >
@@ -525,7 +520,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
 
                     <div
                       className={twMerge(
-                        "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border",
+                        "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",
@@ -534,18 +529,19 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                           : "",
                       )}
                     >
-                      {hasPrint && <ExportMenuButton title={"Drucken"} />}
-                      {hasShare && <ShareMenuButton title={"Share"} />}
-                      {hasLayerTree && <LayerTreeButton title={"Layers"} />}
-                      {hasSearch && <SearchButton title={"Suche"} />}
+                      {hasPrint && <ExportMenuButton />}
+                      {hasShare && <ShareMenuButton />}
+                      {hasLayerTree && <LayerTreeButton />}
+                      {hasSearch && <SearchButton />}
                     </div>
                   </div>
                 )}
 
+                {/* Desktop (>= lg) */}
                 <div
                   className={twMerge(
                     "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
-                    isOverlayOpen ? "@lg:min-w-60" : "p-0",
+                    isOverlayOpen ? "@lg:min-w-64" : "p-0",
                   )}
                   style={{ containerType: "normal" }}
                 >
@@ -594,14 +590,22 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
 }
 
 // We creates a wrapper to inject the default props values from MobilityMapAttributes.
-const defaultProps = {};
-
+const defaultProps: Partial<MobilityMapProps> = {};
 Object.entries(MobilityMapAttributes).forEach(([key]) => {
   defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
 });
 
 function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  return <RvfMobilityMap {...defaultProps} {...props} />;
+  // Apply initial value from permalink, only x,y,z
+  const { permalinktemplate } = props;
+  const { permalinktemplate: defaultPermalinkTemplate } = defaultProps;
+  const propsFromPermalink = useInitialPermalink(
+    permalinktemplate || defaultPermalinkTemplate,
+  );
+
+  return (
+    <RvfMobilityMap {...defaultProps} {...propsFromPermalink} {...props} />
+  );
 }
 
 export default memo(MobilityMapWithDefaultProps);

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -6,32 +6,31 @@ import Automat from "../icons/Automat";
 import InPerson from "../icons/InPerson";
 import Video from "../icons/Video";
 import { LAYERS_NAMES } from "../utils/constants";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
 import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 
 function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
-  const { title } = props;
   const { baseLayer, map } = useMapContext();
   const { setSellingPointsLayer } = useRvfContext();
+  const layerConfig = useLayerConfig(LAYERS_NAMES.verkaufsstellen);
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["general.filter"] === "selling_points";
       },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.verkaufsstellen,
       ...(props || {}),
-
-      title: (
+      layerTreeTitle: (
         <div className="flex items-center justify-between gap-2">
-          {title}
+          {layerConfig?.title}
           <span className="flex items-center">
             <Automat />
             <InPerson />
@@ -39,8 +38,9 @@ function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
           </span>
         </div>
       ),
+      title: layerConfig?.title,
     });
-  }, [baseLayer, props, title]);
+  }, [baseLayer, props, layerConfig]);
 
   useEffect(() => {
     setSellingPointsLayer(layer);

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -26,7 +26,7 @@ import {
   WFS_FREE_FLOAT_TYPE,
   WFS_STATIONS_TYPE,
 } from "../utils/constants";
-import useLayersConfig from "../utils/hooks/useLayersConfig";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import { fetchSharingWFS } from "../utils/sharingWFSUtils";
@@ -65,7 +65,7 @@ const fetchStations = async (
 function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   const { baseLayer, map } = useMapContext();
   const { setSharedMobilityLayerGroup } = useRvfContext();
-  const layersConfig = useLayersConfig();
+  const { t } = useI18n();
 
   // Layers
   // const [bikeFreloLayer, setBikeFreloLayer] = useState<MaplibreStyleLayer>();
@@ -234,33 +234,36 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     }
 
     const bikeFrelo = new MaplibreStyleLayer({
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Bicycle />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.bikeFrelo,
       styleLayersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "bike.frelo";
       },
-
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {"Frelo"}
-          <Bicycle />
-        </div>
-      ),
     });
     // setBikeFreloLayer(bikeFrelo);
 
     const bikeOthers = new MaplibreStyleLayer({
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Bicycle />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.bikeOthers,
       styleLayersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "bike.other";
       },
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.bikeOthers]?.title}
-          <Bicycle />
-        </div>
-      ),
     });
     // setBikeOthersLayer(bikeOthers);
 
@@ -268,14 +271,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "cargo_bike.frelo";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <CargoBike />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.cargobikeFrelo,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.cargobikeFrelo]?.title}
-          <CargoBike />
-        </div>
-      ),
     });
     // setCargobikeFreloLayer(cargobikeFrelo);
 
@@ -283,14 +288,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "cargo_bike.other";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <CargoBike />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.cargobikeOthers,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.cargobikeOthers]?.title}
-          <CargoBike />
-        </div>
-      ),
     });
     // setCargobikeOthersLayer(cargobikeOthers);
 
@@ -298,14 +305,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.grueneflotte";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Car />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.carGrf,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.carGrf]?.title}
-          <Car />
-        </div>
-      ),
     });
     // setCarGrfLayer(carGrf);
 
@@ -313,14 +322,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.naturenergy";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Car />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.carNatur,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.carNatur]?.title}
-          <Car />
-        </div>
-      ),
     });
     // setCarNaturLayer(carNatur);
 
@@ -328,14 +339,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "car.other";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Car />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.carOthers,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.carOthers]?.title}
-          <Car />
-        </div>
-      ),
     });
     // setCarOthersLayer(carOthers);
 
@@ -343,14 +356,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "scooter";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Scooter />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.eroller,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.eroller]?.title}
-          <Scooter />
-        </div>
-      ),
     });
     // setScooterLayer(scooter);
 
@@ -358,14 +373,16 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "hitchhiking";
       },
+      layerTreeTitle: (title) => {
+        return (
+          <div className="flex items-center justify-between gap-2">
+            {t(title)}
+            <Ride />
+          </div>
+        );
+      },
       maplibreLayer: baseLayer,
       name: LAYERS_NAMES.mitfahrpunkte,
-      title: (
-        <div className="flex items-center justify-between gap-2">
-          {layersConfig[LAYERS_NAMES.mitfahrpunkte]?.title}
-          <Ride />
-        </div>
-      ),
     });
 
     return new Group({
@@ -380,9 +397,10 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         scooter,
         hitchHiking,
       ],
+      name: LAYERS_NAMES.sharedMobility,
       ...props,
     } as GroupOptions);
-  }, [baseLayer, layersConfig, props]);
+  }, [baseLayer, props, t]);
 
   // Reload features every minute
   useEffect(() => {

package/src/Search/Search.tsx

@@ -7,7 +7,7 @@ import useMapContext from "../utils/hooks/useMapContext";
 
 import type { StopsSearchProps } from "../StopsSearch/StopsSearch";
 
-function Search(props: StopsSearchProps) {
+function Search(props: Partial<StopsSearchProps>) {
   const { apikey, map, stopsurl } = useMapContext();
 
   const onSelect = useCallback(

package/src/SearchButton/SearchButton.tsx

@@ -3,22 +3,28 @@ import { useCallback } from "preact/hooks";
 
 import Search from "../icons/Search";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
 
-export type SearchButtonProps = HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
+export type SearchButtonProps = IconButtonProps;
 
 function SearchButton({ ...props }: SearchButtonProps) {
   const { isSearchOpen, setIsSearchOpen } = useMapContext();
+  const { t } = useI18n();
 
   const onClick = useCallback(() => {
     setIsSearchOpen(!isSearchOpen);
   }, [isSearchOpen, setIsSearchOpen]);
 
   return (
-    <IconButton {...props} onClick={onClick} selected={isSearchOpen}>
+    <IconButton
+      title={t("search_menu_title")}
+      {...props}
+      onClick={onClick}
+      selected={isSearchOpen}
+    >
       <Search />
     </IconButton>
   );

package/src/ShareMenu/ShareMenu.tsx

@@ -5,6 +5,7 @@ import Email from "../icons/Email";
 import Image from "../icons/Image";
 import PermalinkInput from "../PermalinkInput";
 import Button from "../ui/Button";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
@@ -14,6 +15,7 @@ function ShareMenu({
   ...props
 }: HTMLAttributes<HTMLDivElement> & PreactDOMAttributes) {
   const { map } = useMapContext();
+  const { t } = useI18n();
 
   return (
     // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
@@ -23,12 +25,12 @@ function ShareMenu({
         href={`mailto:?subject=Karte&body=${window?.location.href}`}
       >
         <Email />
-        <span>Email senden</span>
+        <span>{t("share_email_send")}</span>
       </Button>
       <CanvasSaveButton map={map}>
         <Button className={"w-fit"}>
           <Image />
-          <span>Bild speichern</span>
+          <span>{t("share_image_save")}</span>
         </Button>
       </CanvasSaveButton>
       <PermalinkInput />

package/src/ShareMenuButton/ShareMenuButton.tsx

@@ -3,22 +3,29 @@ import { useCallback } from "preact/hooks";
 
 import Share from "../icons/Share";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfShareMenuButtonProps = HTMLAttributes<HTMLButtonElement> &
+export type ShareMenuButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
-function ShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
+function ShareMenuButton({ ...props }: ShareMenuButtonProps) {
   const { isShareMenuOpen, setIsShareMenuOpen } = useMapContext();
+  const { t } = useI18n();
 
   const onClick = useCallback(() => {
     setIsShareMenuOpen(!isShareMenuOpen);
   }, [isShareMenuOpen, setIsShareMenuOpen]);
 
   return (
-    <IconButton {...props} onClick={onClick} selected={isShareMenuOpen}>
+    <IconButton
+      title={t("share_menu_title")}
+      {...props}
+      onClick={onClick}
+      selected={isShareMenuOpen}
+    >
       <Share />
     </IconButton>
   );

package/src/StationsLayer/StationsLayer.tsx

@@ -16,7 +16,10 @@ function StationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
     }
     return new MaplibreStyleLayer({
       layersFilter: ({ metadata }) => {
-        return metadata?.["general.filter"] === "stations";
+        return (
+          metadata?.["tralis.variable"] === "station" ||
+          metadata?.["general.filter"] === "stations"
+        );
       },
       maplibreLayer: baseLayer,
       name: LAYER_NAME_STATIONS,