@geops/rvf-mobility-web-component 0.1.122 → 0.1.124

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.122",
+  "version": "0.1.124",
   "homepage": "https://rvf-mobility-web-component.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "5.12.0",
-    "mobility-toolbox-js": "3.6.8",
+    "mobility-toolbox-js": "3.6.10",
     "ol": "^10.8.0",
     "preact": "^10.28.4",
     "preact-custom-element": "^4.6.0",

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -145,6 +145,9 @@ const attrs: MobilityMapAttributes = {
     },
     "title": "Liniennetzpläne"
   }
+  "sharedmobility": {
+    minZoom": 14,
+  }
 </pre>}
 <br/>
 where:
@@ -160,7 +163,8 @@ where:
       <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li>
     </ul>
   <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
-</ul>`,
+  <li><i>minZoom</i> is the minimal zoom level at which the layer is visible (only <i>${LAYERS_NAMES.sharedMobility}</i> layer).</li>
+  </ul>`,
     public: true,
   },
   layertree: {

package/src/Permalink/Permalink.tsx

@@ -42,7 +42,8 @@ const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
       replaceState &&
       permalink &&
       permalink !== window.location.href &&
-      !permalink.includes(encodeURIComponent("{{"))
+      !permalink.includes(encodeURIComponent("{{")) &&
+      !permalink.includes("{{")
     ) {
       window.history.replaceState(null, null, permalink);
     }

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -37,8 +37,9 @@ function RvfSelectedFeatureHighlightLayer() {
   useEffect(() => {
     const vectorTileFeature = selectedFeature?.get("vectorTileFeature");
     selectedFeature?.set("selected", true);
-    const source = mbMap?.getSource(SOURCE_SELECT);
+    let source;
     if (selectedFeature) {
+      source = mbMap?.getSource(SOURCE_SELECT);
       const feature = selectedFeature.clone();
       feature.setStyle(null);
 

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -27,6 +27,7 @@ import {
   WFS_STATIONS_TYPE,
 } from "../utils/constants";
 import useI18n from "../utils/hooks/useI18n";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import { fetchSharingWFS } from "../utils/sharingWFSUtils";
@@ -66,6 +67,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
   const { baseLayer, map } = useMapContext();
   const { setSharedMobilityLayerGroup } = useRvfContext();
   const { t } = useI18n();
+  const layerConfig = useLayerConfig(LAYERS_NAMES.sharedMobility);
 
   // Layers
   // const [bikeFreloLayer, setBikeFreloLayer] = useState<MaplibreStyleLayer>();
@@ -159,7 +161,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         );
       },
       maplibreLayer: baseLayer,
-      minZoom: 12,
       name: LAYERS_NAMES.bikeFrelo,
       styleLayersFilter: ({ metadata }) => {
         return metadata?.["rvf.filter"] === "bike.frelo";
@@ -314,14 +315,15 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
         scooter,
         hitchHiking,
       ],
+      minZoom: layerConfig?.minZoom || 15.5,
       name: LAYERS_NAMES.sharedMobility,
       ...props,
     } as GroupOptions);
-  }, [baseLayer, props, t]);
+  }, [baseLayer, layerConfig?.minZoom, props, t]);
 
   const updateData = useCallback(() => {
     // Only update when layers are visible
-    if (map?.getView()?.getZoom() < 15.5 || !group.getVisible()) {
+    if (map?.getView()?.getZoom() < group.getMinZoom() || !group.getVisible()) {
       return;
     }
     const abortController = new AbortController();
@@ -428,6 +430,39 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     setSharedMobilityLayerGroup(group);
   }, [group, setSharedMobilityLayerGroup]);
 
+  // Override style layer zoom range to be able to display them at the right zoom level without modifying the style
+  // See TGSRVF-149
+  useEffect(() => {
+    if (layerConfig?.minZoom === undefined || !group) {
+      return;
+    }
+    const styleLayers = mbMap?.getStyle()?.layers;
+    const applyZoomRange = (evt) => {
+      group?.getLayersArray().forEach((layer: MaplibreStyleLayer) => {
+        evt.target
+          ?.getStyle()
+          ?.layers?.filter(layer.layersFilter)
+          .map((styleLayer) => {
+            return styleLayer.id;
+          })
+          .forEach((layerId: string) => {
+            if (evt.target?.getLayer(layerId)) {
+              evt.target.setLayerZoomRange(layerId, group.getMinZoom() - 1, 24);
+            }
+          });
+      });
+    };
+    if (!styleLayers) {
+      void mbMap?.once("idle", applyZoomRange);
+      return;
+    }
+    applyZoomRange({ target: mbMap });
+
+    return () => {
+      mbMap?.off("idle", applyZoomRange);
+    };
+  }, [mbMap, group, layerConfig?.minZoom]);
+
   useEffect(() => {
     if (!map || !group) {
       return;

package/src/utils/hooks/useLayersConfig.tsx

@@ -16,6 +16,7 @@ export interface LayerConfig {
     show?: boolean;
     text?: string;
   };
+  minZoom?: number;
   title?: string;
 }
 export type LayersConfig = Record<string, LayerConfig>;