@geops/rvf-mobility-web-component 0.1.12 → 0.1.14

package/input.css

@@ -35,14 +35,8 @@ html {
   h4 {
     @apply text-lg;
   }
-  button {
+  /* button {
     @apply text-button font-semibold;
-  }
-}
-
-.button-map {
-  @apply bg-blue-500 text-white;
-  background: lightgray;
-  z-index: 5;
+  } */
 }
 

package/package.json

@@ -2,41 +2,43 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "jspdf": "^2.5.2",
     "maplibre-gl": "^4.7.1",
-    "mobility-toolbox-js": "3.1.0",
+    "mobility-toolbox-js": "3.1.1-beta.0",
     "ol": "^10.3.1",
-    "preact": "^10.25.1",
+    "preact": "^10.25.4",
     "preact-custom-element": "^4.3.0",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.4.0",
-    "rosetta": "^1.1.0"
+    "react-spatial": "^1.12.2",
+    "rosetta": "^1.1.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
-    "@types/geojson": "^7946.0.14",
+    "@types/geojson": "^7946.0.15",
     "@types/jest": "^29.5.14",
     "@types/preact-custom-element": "^4.0.4",
-    "concurrently": "^9.1.0",
-    "esbuild": "^0.24.0",
+    "concurrently": "^9.1.2",
+    "esbuild": "^0.24.2",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-perfectionist": "^4.2.0",
+    "eslint-plugin-perfectionist": "^4.5.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -46,13 +48,13 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-preact": "^4.1.1",
     "next": "15.0.3",
-    "preact-render-to-string": "^6.5.11",
+    "preact-render-to-string": "^6.5.12",
     "prettier": "^3.4.2",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0"
+    "typescript-eslint": "^8.19.0"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js",

package/scripts/build.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 

package/scripts/dev.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import * as esbuild from "esbuild";
 import { sassPlugin } from "esbuild-sass-plugin";
 
@@ -20,6 +19,8 @@ const { host, port } = await ctx.serve({
 });
 
 await ctx.watch();
+
+// eslint-disable-next-line no-undef
 console.log(
   `watching... and running at ${
     host === "0.0.0.0" ? "http://localhost" : host

package/src/RouteSchedule/RouteSchedule.tsx

@@ -24,8 +24,10 @@ function RouteSchedule(props: RouteScheduleProps) {
       }
       const nextStation = elt.querySelector("[data-station-passed=false]");
       if (nextStation) {
-        nextStation.scrollIntoView({
+        // We use scrollTo avoid scrolling the entire window.
+        (nextStation.parentNode as Element).scrollTo({
           behavior: "smooth",
+          top: (nextStation as HTMLElement).offsetTop || 0,
         });
       }
       clearInterval(interval);

package/src/RouteStop/RouteStop.tsx

@@ -110,7 +110,7 @@ function RouteStop({
             <RouteStopTime className="ml-4 flex w-10 shrink-0 flex-col justify-center text-xs" />
             <RouteStopDelay className="flex w-8 shrink-0 flex-col justify-center text-[0.6rem]" />
             <RouteStopProgress className="relative flex w-8 shrink-0 items-center" />
-            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2 text-sm font-medium" />
+            <RouteStopStation className="flex grow flex-col items-start justify-center pr-2" />
           </>
         )}
       </button>

package/src/RvfButton/RvfButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
 import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 export type RvfButtonProps = {
   selected?: boolean;
@@ -9,12 +10,12 @@ export type RvfButtonProps = {
   PreactDOMAttributes;
 
 const baseClasses =
-  "flex h-8 md:h-9 lg:h-10 px-5 py-1.75 max-h-button items-center justify-center rounded-full border";
+  "flex  gap-2 text-[14px] @sm/main:text-[16px] @md/main:text-[18px] h-[32px] @sm/main:h-[36px] @md/main:h-[40px] px-[22px] @sm/main:px-[22.5px] @md/main:px-[27.5px] pt-[7px] pb-[5px] @sm/main:pt-[8px] @sm/main:pb-[6px] @md/main:pt-[8.5px] @md/main:pb-[6.5px]  items-center justify-left rounded-full border font-semibold text-button";
 
 export const themes = {
   primary: {
     classes:
-      "border-red bg-red text-white disabled:bg-lightgrey disabled:border-lightgrey hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred",
+      "border-red bg-red text-white disabled:bg-lightgrey disabled:border-lightgrey hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred ",
     selectedClasses: "bg-darkred border-darkred",
   },
   secondary: {
@@ -32,7 +33,9 @@ function RvfButton({
   ...props
 }: RvfButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+    );
   }, [className, selected, theme]);
 
   return (

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -1,19 +1,26 @@
 import type { JSX } from "preact";
 
 import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 // @ts-expect-error - required for htm to resolve the JSX pragma
 import ok from "../icons/Ok/ok-grey.svg";
 
-export type RvfCheckboxProps = {} & JSX.InputHTMLAttributes<HTMLInputElement>;
+export type RvfCheckboxProps = {
+  checkedIconUrl?: string;
+} & JSX.InputHTMLAttributes<HTMLInputElement>;
 
 function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
+  const checkedIconUrl = props.checkedIconUrl || ok;
   return (
     <input
-      className={`box-border size-[20px] cursor-pointer appearance-none rounded border-2 border-grey bg-white bg-contain bg-center text-grey disabled:cursor-default disabled:border-lightgrey ${className}`}
+      className={twMerge(`
+        box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 border-grey bg-white bg-contain bg-center text-grey disabled:cursor-default disabled:border-lightgrey ${className}`)}
       style={{
         backgroundImage:
-          props.checked && !props.disabled ? `url('` + ok + `')` : "",
+          props.checked && !props.disabled
+            ? `url('` + checkedIconUrl + `')`
+            : "",
       }}
       {...props}
       type="checkbox"

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -2,22 +2,20 @@ import type { JSX, PreactDOMAttributes } from "preact";
 
 import { memo, useId, useState } from "preact/compat";
 
-import Cancel from "../icons/Cancel";
 import RvfButton from "../RvfButton";
 import RvfCheckbox from "../RvfCheckbox";
-import RvfIconButton from "../RvfIconButton";
 import RvfSelect from "../RvfSelect";
+import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import exportPdf from "../utils/exportPdf";
+import getAllLayers from "../utils/getAllLayers";
 import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
 
 export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-const formats = ["A4", "A1", "A3", "A0"];
+const formats = ["A4", "A3", "A1", "A0"];
 
 function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
-  const { setIsExportMenuOpen } = useRvfContext();
   const { map } = useMapContext();
   const [useMaxExtent, setUseMaxExtent] = useState(false);
   const [format, setFormat] = useState<string>(formats[0]);
@@ -27,75 +25,71 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
   const [isExportingError, setIsExportingError] = useState(false);
   return (
     <div {...props}>
-      <div className={"flex h-full flex-col gap-2 p-2"}>
-        {/* <!-- Header --> */}
-        <div className={"flex flex-row items-center justify-between gap-2"}>
-          <h1>Export </h1>
-          <RvfIconButton
-            onClick={() => {
-              setIsExportMenuOpen(false);
+      {/* <!-- Content --> */}
+      <div className="flex flex-1 flex-col gap-2">
+        <div className={"flex flex-wrap items-center gap-2"}>
+          <RvfCheckbox
+            checked={useMaxExtent}
+            id={checkboxId}
+            onChange={() => {
+              return setUseMaxExtent(!useMaxExtent);
             }}
-          >
-            <Cancel />
-          </RvfIconButton>
-        </div>
-        {/* <!-- Content --> */}
-        <div className="flex flex-1 flex-col gap-2">
-          <div className={"flex items-center gap-2"}>
-            {/* <input
-              checked={useMaxExtent}
-              id={checkboxId}
-              onChange={() => {
-                setUseMaxExtent(!useMaxExtent);
-              }}
-              type="checkbox"
-            /> */}
-            <RvfCheckbox
-              checked={useMaxExtent}
-              id={checkboxId}
-              onChange={() => {
-                return setUseMaxExtent(!useMaxExtent);
-              }}
-            />
-            <label htmlFor={checkboxId}>Ganze Region exportieren</label>
-          </div>
-          <div className={"flex items-center gap-2"}>
-            <label htmlFor={selectId}>Format:</label>
-            <RvfSelect
-              className={"w-24"}
-              id={selectId}
-              onChange={(evt) => {
-                setFormat((evt.target as HTMLSelectElement).value);
-              }}
-            >
-              {formats.map((format) => {
-                return <option key={format}>{format}</option>;
-              })}
-            </RvfSelect>
-          </div>
+          />
+          <label htmlFor={checkboxId}>Ganze Region exportieren</label>
         </div>
-        {/* <!-- Footer --> */}
-        <div>
-          <RvfButton
-            disabled={isExporting}
-            onClick={async () => {
-              setIsExportingError(false);
-              setIsExporting(true);
-              const result = await exportPdf(map, { format }, { useMaxExtent });
-              setTimeout(() => {
-                setIsExporting(false);
-                setIsExportingError(!result);
-              }, 1000);
+        <div className={"flex flex-wrap items-center gap-2"}>
+          <label htmlFor={selectId}>Format:</label>
+          <RvfSelect
+            className={"w-24"}
+            id={selectId}
+            onChange={(evt) => {
+              setFormat((evt.target as HTMLSelectElement).value);
             }}
           >
-            {isExporting
-              ? "Exporting..."
-              : isExportingError
-                ? "Error"
-                : "Download"}
-          </RvfButton>
+            {formats.map((format) => {
+              return <option key={format}>{format}</option>;
+            })}
+          </RvfSelect>
         </div>
       </div>
+      {/* <!-- Footer --> */}
+      <div>
+        <RvfButton
+          disabled={isExporting}
+          onClick={async () => {
+            setIsExportingError(false);
+            setIsExporting(true);
+            const result = await exportPdf(
+              map,
+              { format },
+              {
+                onAfter: (map, layers) => {
+                  getAllLayers(layers).forEach((layer) => {
+                    layer.set(LAYER_PROP_IS_EXPORTING, false);
+                  });
+                },
+
+                onBefore: (map, layers) => {
+                  getAllLayers(layers).forEach((layer) => {
+                    layer.set(LAYER_PROP_IS_EXPORTING, true);
+                  });
+                },
+                useMaxExtent,
+              },
+            );
+            setTimeout(() => {
+              setIsExporting(false);
+              setIsExportingError(!result);
+            }, 1000);
+          }}
+        >
+          {isExporting
+            ? "Exporting..."
+            : isExportingError
+              ? "Error"
+              : "Download"}
+        </RvfButton>
+      </div>
     </div>
   );
 }

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -24,15 +24,15 @@ function RvfFloatingMenu({
 
   return (
     <div className="pointer-events-none absolute bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
-      <div className="pointer-events-auto max-h-full rounded-lg border bg-white shadow-lg medium:w-largeMenu large:w-mediumMenu">
+      <div className="pointer-events-auto max-h-full w-48 rounded-lg border border-grey bg-white shadow-lg @lg/main:w-52">
         <button
-          className="flex w-full items-center justify-between px-2 py-1.5 "
+          className="flex w-full items-center justify-between px-2 py-1.5 font-bold"
           onClick={onClick}
         >
           {title} {isOpen ? <ArrowDown /> : <ArrowUp />}
         </button>
         {!isOpen && (
-          <div className="flex h-[calc(100%-39px)] w-full flex-1 overflow-y-auto">
+          <div className="flex h-[calc(100%-39px)] w-full flex-1 flex-col overflow-y-auto">
             {children}
           </div>
         )}

package/src/RvfIconButton/RvfIconButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
 import { memo, SVGProps, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
 
@@ -11,7 +12,7 @@ export type RvfIconButtonProps = {
   RvfButtonProps;
 
 const baseClasses =
-  "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
+  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border";
 
 function RvfIconButton({
   children,
@@ -22,7 +23,9 @@ function RvfIconButton({
   ...props
 }: RvfIconButtonProps) {
   const classes = useMemo(() => {
-    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+    );
   }, [className, selected, theme]);
 
   return (

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -0,0 +1,57 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { useRef, useState } from "preact/hooks";
+
+import Copy from "../icons/Copy";
+import RvfIconButton from "../RvfIconButton";
+
+function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
+  const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
+  const [isTooptipShowed, setIsTooltipShowed] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleCopyClick = (event) => {
+    setPositionTooltip(event.currentTarget.getBoundingClientRect());
+    navigator.clipboard.writeText(window?.location.href).then(() => {
+      setIsTooltipShowed(true);
+      setTimeout(() => {
+        setIsTooltipShowed(false);
+      }, 1000);
+    });
+    inputRef.current.select();
+  };
+
+  const handleInputFocus = () => {
+    inputRef.current.select();
+  };
+
+  return (
+    <div className="flex items-center text-grey">
+      <input
+        className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
+        onFocus={handleInputFocus}
+        readOnly
+        ref={inputRef}
+        type="text"
+        {...props}
+      />
+      <RvfIconButton
+        className="!size-7 rounded-l-none rounded-r-sm border-current"
+        onClick={handleCopyClick}
+      >
+        <Copy />
+      </RvfIconButton>
+      <div
+        className={`fixed rounded-md bg-grey p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
+        style={{
+          left: positionTooltip?.left - 30,
+          top: positionTooltip?.top - 40,
+        }}
+      >
+        Link kopiert!
+      </div>
+    </div>
+  );
+}
+
+export default RvfInputCopy;

package/src/RvfInputCopy/index.tsx

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

package/src/RvfLayerTree/RvfLayerTree.tsx

@@ -21,18 +21,14 @@ function RvfLayerTree({ layers, ...props }: RvfLayerTreeProps) {
     dispatch({ payload: layers, type: "INIT" });
   }, [layers]);
 
-  const renderedLayers = layers.map((item, idx) => {
-    return (
-      <div className="w-full" key={idx}>
-        <TreeItem className="w-full" {...item} />
-      </div>
-    );
-  });
-
   return (
     <LayersTreeContext.Provider value={tree}>
       <LayersTreeDispatchContext.Provider value={dispatch}>
-        <div {...props}>{renderedLayers}</div>
+        <div {...props}>
+          {layers.map((item) => {
+            return <TreeItem className="w-full" key={item.id} {...item} />;
+          })}
+        </div>
       </LayersTreeDispatchContext.Provider>
     </LayersTreeContext.Provider>
   );

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -11,6 +11,7 @@ import {
 
 import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
+import minusGrey from "../../icons/Minus/minus-grey.svg";
 import RvfCheckbox from "../../RvfCheckbox";
 import RvfRadioButton from "../../RvfRadioButton";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
@@ -76,13 +77,38 @@ function TreeItem({
     });
   };
 
-  const renderedLayers = childItems.map((item, idx) => {
-    return <TreeItem key={idx} {...item} />;
-  });
+  const renderedLayers = childItems
+    .filter(({ title }) => {
+      return !!title;
+    })
+    .map((item, idx) => {
+      return <TreeItem key={idx} {...item} />;
+    });
+
+  if (!title) {
+    return null;
+  }
+
+  const isMiddleState = () => {
+    if (childItems.length > 0) {
+      const checkedItems = childItems.filter((item) => {
+        return item.isControlChecked;
+      });
+      if (checkedItems.length === childItems.length) {
+        return false;
+      }
+
+      return childItems.some((item) => {
+        return item.isControlChecked;
+      });
+    }
+
+    return false;
+  };
 
   return (
     <div>
-      <div className="flex items-center gap-2 border-b py-2">
+      <div className="flex items-center gap-2 border-b py-2 pr-1">
         {selectionType === SelectionType.RADIO ? (
           <RvfRadioButton
             checked={isControlChecked}
@@ -92,19 +118,21 @@ function TreeItem({
         ) : (
           <RvfCheckbox
             checked={isControlChecked}
+            checkedIconUrl={isMiddleState() ? minusGrey : null}
+            className={isMiddleState() ? "bg-[length:18px]" : ""}
             id={inputId}
             onChange={handleSelectionChange}
           />
         )}
         <label
-          className={`cursor-pointer`}
-          htmlFor={childItems.length > 0 ? buttonId : inputId}
+          className={`flex-1 cursor-pointer`}
+          htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
         >
           {title}
         </label>
-        {childItems.length > 0 && (
+        {renderedLayers.length > 0 && (
           <button
-            className={`flex cursor-pointer items-center gap-2 font-normal`}
+            className={`flex cursor-pointer items-center gap-2`}
             id={buttonId}
             onClick={handleItemClick}
           >
@@ -112,7 +140,9 @@ function TreeItem({
           </button>
         )}
       </div>
-      {isContainerVisible && <div className="pl-6">{renderedLayers}</div>}
+      {isContainerVisible && renderedLayers.length > 0 && (
+        <div className="pl-6">{renderedLayers}</div>
+      )}
     </div>
   );
 }

package/src/RvfLayerTree/layersTreeReducer.ts

@@ -107,6 +107,7 @@ const updateRadioChildNodes = (parent) => {
 const updateCheckboxChildNodes = (parent) => {
   for (const child of parent.childItems) {
     child.isControlChecked = parent.isControlChecked;
+    child.layer.setVisible(child.isControlChecked);
 
     if (child.childItems.length) {
       updateChildNodes(child);

package/src/RvfLayerTreeButton/RvfLayerTreeButton.tsx

@@ -0,0 +1,27 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Stack from "../icons/Stack";
+import RvfIconButton from "../RvfIconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfLayerTreeButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
+  const { isLayerTreeOpen, setIsLayerTreeOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsLayerTreeOpen(!isLayerTreeOpen);
+  }, [isLayerTreeOpen, setIsLayerTreeOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
+      <Stack />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfLayerTreeButton);

package/src/RvfLayerTreeButton/index.tsx

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

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -4,20 +4,20 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setLineNetworkPlanLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
-      layersFilter: ({ metadata, source }) => {
-        return (
-          metadata?.["rvf.filter"] === "netowrk_plans" ||
-          source === "network_plans"
-        );
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "netzplan_lines";
       },
       maplibreLayer: baseLayer,
       minZoom: 10,
@@ -25,6 +25,10 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setLineNetworkPlanLayer(layer);
+  }, [layer, setLineNetworkPlanLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;