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

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,7 +2,7 @@
   "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.13",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -11,7 +11,7 @@
     "maplibre-gl": "^4.7.1",
     "mobility-toolbox-js": "3.1.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",
@@ -19,24 +19,24 @@
     "rosetta": "^1.1.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 +46,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

@@ -9,12 +9,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 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-center 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: {

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -10,7 +10,8 @@ export type RvfCheckboxProps = {} & JSX.InputHTMLAttributes<HTMLInputElement>;
 function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
   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={`
+        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 + `')` : "",

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -7,14 +7,16 @@ 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();
@@ -30,8 +32,9 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
       <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>
+          <span className={"font-bold"}>Drucken </span>
           <RvfIconButton
+            className={"!size-[32px]"}
             onClick={() => {
               setIsExportMenuOpen(false);
             }}
@@ -41,15 +44,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
         </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"
-            /> */}
+          <div className={"flex flex-wrap items-center gap-2"}>
             <RvfCheckbox
               checked={useMaxExtent}
               id={checkboxId}
@@ -59,7 +54,7 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
             />
             <label htmlFor={checkboxId}>Ganze Region exportieren</label>
           </div>
-          <div className={"flex items-center gap-2"}>
+          <div className={"flex flex-wrap items-center gap-2"}>
             <label htmlFor={selectId}>Format:</label>
             <RvfSelect
               className={"w-24"}
@@ -81,7 +76,24 @@ function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
             onClick={async () => {
               setIsExportingError(false);
               setIsExporting(true);
-              const result = await exportPdf(map, { format }, { useMaxExtent });
+              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);

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -24,9 +24,9 @@ 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 />}

package/src/RvfIconButton/RvfIconButton.tsx

@@ -11,7 +11,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,

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

@@ -76,13 +76,21 @@ 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;
+  }
 
   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}
@@ -97,14 +105,14 @@ function TreeItem({
           />
         )}
         <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 +120,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/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -4,15 +4,18 @@ 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({
+      isQueryable: true,
       layersFilter: ({ metadata, source }) => {
         return (
           metadata?.["rvf.filter"] === "netowrk_plans" ||
@@ -25,6 +28,10 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setLineNetworkPlanLayer(layer);
+  }, [layer, setLineNetworkPlanLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -10,8 +10,15 @@ import {
   RealtimeTrainId,
 } from "mobility-toolbox-js/types";
 import { Feature, Map as OlMap } from "ol";
+import { Group } from "ol/layer";
 import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
 import Copyright from "../Copyright";
@@ -58,11 +65,18 @@ const bbox = RVF_EXTENT_3857.join(",");
 
 const baseLayerProps = {
   mapLibreOptions: {
-    maxCanvasSize: [20000, 20000], // remove 4096 limitations
+    maxCanvasSize: [20000, 20000] as [number, number], // remove 4096 limitations
     preserveDrawingBuffer: true,
   },
 };
 
+const styleProps = {
+  //fontSize: 16
+};
+const scrollableHandlerProps = {
+  style: { width: "calc(100% - 60px)" },
+};
+
 function RvfMobilityMap({
   apikey = "5cc87b12d7c5370001c1d655820abcc37dfd4d968d7bab5b2a74a935",
   baselayer = "de.rvf",
@@ -101,6 +115,14 @@ function RvfMobilityMap({
   const [selectedFeature, setSelectedFeature] = useState<Feature>();
   const [selectedFeatures, setSelectedFeatures] = useState<Feature[]>();
   const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
+  const [sellingPointsLayer, setSellingPointsLayer] =
+    useState<MaplibreStyleLayer>();
+  const [tarifZonenLayer, setTarifZonenLayer] = useState<MaplibreStyleLayer>();
+  const [poisLayer, setPoisLayer] = useState<MaplibreStyleLayer>();
+  const [lineNetworkPlanLayer, setLineNetworkPlanLayer] =
+    useState<MaplibreStyleLayer>();
+  const [sharedMobilityLayerGroup, setSharedMobilityLayerGroup] =
+    useState<Group>();
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
@@ -229,14 +251,56 @@ function RvfMobilityMap({
     return {
       isExportMenuOpen,
       isLayerTreeOpen,
+      lineNetworkPlanLayer,
+      poisLayer,
       selectedFeature,
       selectedFeatures,
+      sellingPointsLayer,
       setIsExportMenuOpen,
       setIsLayerTreeOpen,
+      setLineNetworkPlanLayer,
+      setPoisLayer,
       setSelectedFeature,
       setSelectedFeatures,
+      setSellingPointsLayer,
+      setSharedMobilityLayerGroup,
+      setTarifZonenLayer,
+      sharedMobilityLayerGroup,
+      tarifZonenLayer,
     };
-  }, [isExportMenuOpen, selectedFeature, selectedFeatures, isLayerTreeOpen]);
+  }, [
+    isExportMenuOpen,
+    isLayerTreeOpen,
+    lineNetworkPlanLayer,
+    poisLayer,
+    selectedFeature,
+    selectedFeatures,
+    sellingPointsLayer,
+    sharedMobilityLayerGroup,
+    tarifZonenLayer,
+  ]);
+
+  const onLayerTreeMenuClick = useCallback(() => {
+    setIsLayerTreeOpen(!isLayerTreeOpen);
+  }, [isLayerTreeOpen]);
+
+  const onExportMenuClose = useCallback(() => {
+    setIsExportMenuOpen(false);
+  }, []);
+
+  const copyrightOptions = useMemo(() => {
+    return {
+      format: (copyrights) => {
+        const newCopyrights = [];
+        copyrights.forEach((copyright) => {
+          if (!/(sbb|rvf)/i.test(copyright)) {
+            newCopyrights.push(copyright);
+          }
+        });
+        return newCopyrights.join("&nbsp;|&nbsp;");
+      },
+    };
+  }, []);
 
   return (
     <I18nContext.Provider value={i18n}>
@@ -247,20 +311,11 @@ function RvfMobilityMap({
           <div
             className="relative size-full border font-sans @container/main"
             ref={eventNodeRef}
-            style={{ fontSize: 16 }}
+            style={styleProps}
           >
-            <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
+            <div className="relative flex size-full flex-col text-base @lg/main:flex-row-reverse">
               <Map className="relative flex-1 overflow-visible ">
-                <RvfFloatingMenu
-                  isOpen={isLayerTreeOpen}
-                  onClick={() => {
-                    setIsLayerTreeOpen(!isLayerTreeOpen);
-                  }}
-                  title="Kartendaten"
-                >
-                  <Topics className={"w-full px-2"} />
-                </RvfFloatingMenu>
-                <BaseLayer {...baseLayerProps} isNotInLayerTree />
+                <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
 
                 {realtime === "true" && <RealtimeLayer title="Echtzeit" />}
@@ -274,7 +329,10 @@ function RvfMobilityMap({
 
                 <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" />
+                  <Copyright
+                    className="bg-slate-50/70"
+                    options={copyrightOptions}
+                  />
                 </div>
 
                 <div className="absolute right-2 top-2 z-10 flex flex-col gap-2">
@@ -291,13 +349,19 @@ function RvfMobilityMap({
                 <div className="absolute bottom-10 right-2 z-10 flex flex-col justify-between gap-2">
                   <RvfZoomButtons />
                 </div>
+
+                <RvfFloatingMenu
+                  isOpen={isLayerTreeOpen}
+                  onClick={onLayerTreeMenuClick}
+                  title="Kartendaten"
+                >
+                  <Topics className={"w-full px-2"} />
+                </RvfFloatingMenu>
               </Map>
 
               <Overlay
                 className={"z-50"}
-                ScrollableHandlerProps={{
-                  style: { width: "calc(100% - 60px)" },
-                }}
+                ScrollableHandlerProps={scrollableHandlerProps}
               >
                 {realtime === "true" && trainId && (
                   <RouteSchedule className="relative overflow-y-auto  overflow-x-hidden" />
@@ -311,11 +375,7 @@ function RvfMobilityMap({
               </Overlay>
 
               {isExportMenuOpen && (
-                <Modal
-                  onClose={() => {
-                    setIsExportMenuOpen(false);
-                  }}
-                >
+                <Modal onClose={onExportMenuClose}>
                   <RvfExportMenu className="relative flex h-full flex-col overflow-y-auto  overflow-x-hidden" />
                 </Modal>
               )}

package/src/RvfPoisLayer/RvfPoisLayer.tsx

@@ -4,9 +4,11 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setPoisLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -22,6 +24,10 @@ function RvfPoisLayer(props: MaplibreStyleLayerOptions) {
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setPoisLayer(layer);
+  }, [layer, setPoisLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfRadioButton/RvfRadioButton.tsx

@@ -6,7 +6,7 @@ export type RvfRadioButtonProps =
 function RvfRadioButton(props: RvfRadioButtonProps) {
   return (
     <input
-      className="peer mr-2 h-inputControl w-inputControl rounded-full border-2 border-grey accent-red"
+      className="peer mr-2 size-[20px] rounded-full border-2 border-grey accent-red"
       {...props}
       type="radio"
     />

package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx

@@ -4,26 +4,30 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfSellingPointsLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setSellingPointsLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
-      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
-        return (
-          metadata?.["rvf.filter"] === "selling_points" ||
-          (source === "rvf" && sourceLayer === "selling_points")
-        );
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["general.filter"] === "selling_points";
       },
       maplibreLayer: baseLayer,
       ...(props || {}),
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setSellingPointsLayer(layer);
+  }, [layer, setSellingPointsLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;