@geops/rvf-mobility-web-component 0.1.68 → 0.1.69

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.68",
+  "version": "0.1.69",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/LayerTreeMenu/LayerTreeMenu.tsx

@@ -27,6 +27,7 @@ export interface LayerTreeConfig {
 }
 
 export type LayerTreeMenuProps = {
+  filter?: (layer: BaseLayer) => boolean;
   order: string[];
 } & HTMLAttributes<HTMLDivElement> &
   Partial<LayerTreeProps> &
@@ -62,6 +63,7 @@ const getConfigForLayer = (
 };
 
 function LayerTreeMenu({
+  filter,
   order = LAYER_TREE_ORDER,
   ...props
 }: LayerTreeMenuProps) {
@@ -74,6 +76,12 @@ function LayerTreeMenu({
       map
         ?.getLayers()
         .getArray()
+        .filter(
+          filter ??
+            (() => {
+              return true;
+            }),
+        )
         .sort((a, b) => {
           if (
             order &&
@@ -88,7 +96,7 @@ function LayerTreeMenu({
           return getConfigForLayer(layer, revision, layersConfig);
         }) || [];
     return config;
-  }, [layersConfig, map, order, revision]);
+  }, [filter, layersConfig, map, order, revision]);
 
   // Force update of config when a layers`s visibility changes progammatically
   useEffect(() => {

package/src/MapsetLayer/MapsetLayer.tsx

@@ -11,6 +11,13 @@ import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
 
 let moveEndTimeout: ReturnType<typeof setTimeout>;
 
+export const isFeatureOutsideZoomLimit = (feature, map) => {
+  const zoom = map?.getView()?.getZoom();
+  const minZoom = feature.get("minZoom");
+  const maxZoom = feature.get("maxZoom");
+  return minZoom > zoom || zoom > maxZoom;
+};
+
 function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
   const {
     apikey,
@@ -131,6 +138,35 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
     };
   }, [map, layer, mapsetplanid]);
 
+  // Apply fetaure's minzoom and maxzoom to its style
+  // TODO should be done by the mapset layer itself
+  useEffect(() => {
+    let key = null;
+    if (layer) {
+      key = layer.on("updatefeatures", () => {
+        const features = layer.getSource()?.getFeatures();
+        if (!features?.length) {
+          return;
+        }
+        features.forEach((feature) => {
+          const styleFunction = feature.getStyleFunction();
+          if (styleFunction) {
+            (feature as Feature).setStyle((feat, resolution) => {
+              if (isFeatureOutsideZoomLimit(feat, layer.getMapInternal())) {
+                return null;
+              }
+              return styleFunction(feature, resolution);
+            });
+          }
+        });
+      });
+    }
+
+    return () => {
+      unByKey(key);
+    };
+  }, [layer]);
+
   return null;
 }