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

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

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -33,15 +33,11 @@ function FeaturesInfosListener() {
         return info.layer === realtimeLayer;
       })?.features || [];
 
-    const stationsFeatures =
+    const [stationFeature] =
       featuresInfos?.find((info) => {
         return info.layer === stationsLayer;
       })?.features || [];
 
-    const [stationFeature] = stationsFeatures.filter((feat) => {
-      return feat.get("tralis_network")?.includes(tenant);
-    });
-
     const features =
       featuresInfos?.flatMap((info) => {
         return info.features;

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,
@@ -44,11 +51,19 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
         bbox = transformExtent(bbox, "EPSG:3857", "EPSG:4326");
       }
     } else {
-      bbox = transformExtent(
-        map.getView()?.calculateExtent(map.getSize()),
-        "EPSG:3857",
-        "EPSG:4326",
-      );
+      // we have to wait that the map is well sized to get the extent
+      // It triggers an erro in FF without this
+      if (
+        map.getView()?.getCenter() &&
+        map.getSize()[0] > 0 &&
+        map.getSize()[1] > 0
+      ) {
+        bbox = transformExtent(
+          map.getView()?.calculateExtent(),
+          "EPSG:3857",
+          "EPSG:4326",
+        );
+      }
     }
     return new MtbMapsetLayer({
       apiKey: apikey,
@@ -131,6 +146,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;
 }
 

package/src/SingleClickListener/SingleClickListener.tsx

@@ -20,8 +20,14 @@ function SingleClickListener({
   debounceTimeout = 0,
   hover = true,
 }: SingleClickListenerProps) {
-  const { map, queryablelayers, setFeaturesInfos, setFeaturesInfosHovered } =
-    useMapContext();
+  const {
+    map,
+    queryablelayers,
+    setFeaturesInfos,
+    setFeaturesInfosHovered,
+    stationsLayer,
+    tenant,
+  } = useMapContext();
 
   const getFeaturesInfosAtEvt = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
@@ -34,9 +40,30 @@ function SingleClickListener({
         5,
         true,
       );
+
+      // Filter the features clicked in the stations layer by the tenant
+      if (stationsLayer) {
+        // Clean the features infos stations clicked
+        const featuresInfoStations = featuresInfos?.find((info) => {
+          return info.layer === stationsLayer;
+        });
+        const stationsFeatures = featuresInfoStations?.features || [];
+
+        const [stationFeature] = stationsFeatures.filter((feat) => {
+          return feat.get("tralis_network")?.includes(tenant);
+        });
+
+        // Replace the features clicked in the stations layer by the filtered one
+        if (featuresInfoStations) {
+          featuresInfoStations.features = stationFeature
+            ? [stationFeature]
+            : [];
+        }
+      }
+
       return featuresInfos;
     },
-    [queryablelayers],
+    [queryablelayers, stationsLayer, tenant],
   );
 
   const onPointerMove = useCallback(