fix(performance): improve tiles for performance

components/CookieBanner.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { createPortal } from "react-dom";
 import { Trans, useTranslation } from "react-i18next";
 
 import useLocalStorage from "@/utils/hooks/useLocalStorage";
@@ -18,30 +19,33 @@ const CookieBanner = () => {
     [i18n.language],
   );
 
-  return lsValue !== "true" ? (
-    <Message className="absolute bottom-0 z-50 flex w-screen items-center justify-between rounded-none border-none bg-zinc-900 text-white">
-      <div>
-        <Trans i18nKey="cookieConsent">
-          <a
-            className="text-white underline hover:text-primary-200"
-            href={link}
-            rel="noopener noreferrer"
-            target="_blank"
+  return lsValue !== "true"
+    ? createPortal(
+        <Message className="absolute bottom-0 z-[9999] flex w-screen items-center justify-between rounded-none border-none bg-zinc-900 text-white">
+          <div>
+            <Trans i18nKey="cookieConsent">
+              <a
+                className="text-white underline hover:text-primary-200"
+                href={link}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Datenschutzerklärung
+              </a>
+            </Trans>
+          </div>
+          <Button
+            className="ml-2 border-2 border-white !bg-zinc-900 text-white hover:border-white hover:!bg-zinc-600 hover:bg-zinc-700 hover:text-white"
+            data-cypress="cookie-consent-ok-btn"
+            onClick={() => setLsValue("true")}
+            variant="outlined"
           >
-            Datenschutzerklärung
-          </a>
-        </Trans>
-      </div>
-      <Button
-        className="ml-2 border-2 border-white !bg-zinc-900 text-white hover:border-white hover:!bg-zinc-600 hover:bg-zinc-700 hover:text-white"
-        data-cypress="cookie-consent-ok-btn"
-        onClick={() => setLsValue("true")}
-        variant="outlined"
-      >
-        OK
-      </Button>
-    </Message>
-  ) : null;
+            OK
+          </Button>
+        </Message>,
+        document.body,
+      )
+    : null;
 };
 
 export default CookieBanner;

components/MapGeolocation.tsx

@@ -30,7 +30,7 @@ function MapGeolocation() {
   });
 
   return getIsMobileDevice() ? (
-    <div className="absolute bottom-28 right-5 z-50 flex items-center rounded p-1 backdrop-blur-sm">
+    <div className="absolute bottom-28 right-5 z-40 flex items-center rounded p-1 backdrop-blur-sm">
       <Button
         className="flex h-[34px] !w-[34px] items-center justify-center bg-white !px-0 !py-0 !text-primary-500 hover:bg-white hover:!text-primary-200"
         onClick={() => geoloc.setTracking(true)}

components/MapLayersMenu.tsx

@@ -161,7 +161,7 @@ function MapLayersMenu() {
       {({ open }) => {
         return (
           <>
-            <PopoverButton className="absolute right-5 top-5 z-50 flex items-center rounded-lg p-1 backdrop-blur-sm sm:w-60">
+            <PopoverButton className="absolute right-5 top-5 z-30 flex items-center rounded-lg p-1 backdrop-blur-sm sm:w-60">
               <div
                 className={`${buttonStyles} ${outlinedStyles} flex w-full justify-between gap-2 border-none !px-3`}
               >

components/MapLocation.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { Map } from "ol";
 import OLFeature from "ol/Feature";
 import { Point } from "ol/geom";
 import { transform } from "ol/proj";
@@ -123,6 +124,13 @@ const iconFeature: OLFeature = new OLFeature({
   geometry: new Point([4756710, -2831367]),
 });
 
+function getFeaturesFromLayers(coordinate: Coordinate, map: Map) {
+  const pixel: number[] = map.getPixelFromCoordinate(coordinate);
+  const features = (map?.getFeaturesAtPixel(pixel) ??
+    []) as unknown as TreeAppGeoJsonFeature[];
+  return features;
+}
+
 function MapLocation() {
   const map = useContext(MapContext);
   const { maplibreLayer, markerLayer, userLocationsLayer } =
@@ -135,14 +143,8 @@ function MapLocation() {
   const { i18n, t } = useTranslation();
 
   useEffect(() => {
-    const handleCoords = (
-      { coordinate }: { coordinate: Coordinate },
-      resetFormLocation = true,
-    ) => {
-      const pixel: number[] = map.getPixelFromCoordinate(coordinate);
-      const features = (map?.getFeaturesAtPixel(pixel) ??
-        []) as unknown as TreeAppGeoJsonFeature[];
-
+    const updateForm = (coordinate: Coordinate, resetFormLocation = true) => {
+      const features = getFeaturesFromLayers(coordinate, map);
       if (
         features.some(
           (f) =>
@@ -180,11 +182,39 @@ function MapLocation() {
         setMapLocation(location, true, true, "f");
       }
     };
+
+    const handleClick = (
+      { coordinate }: { coordinate: Coordinate },
+      resetFormLocation = true,
+    ) => {
+      const hasFtFeature = getFeaturesFromLayers(coordinate, map).some(
+        (f) => f.sourceLayer === "forest_types",
+      );
+      const currentZoom = map.getView().getZoom();
+
+      if (currentZoom && currentZoom <= 13 && hasFtFeature) {
+        map.getView().animate(
+          {
+            center: coordinate,
+            duration: 500,
+            zoom: 13,
+          },
+          () => {
+            maplibreLayer?.waitForVectorTileLayerToRender("ft", () =>
+              updateForm(coordinate, resetFormLocation),
+            );
+          },
+        );
+      } else {
+        updateForm(coordinate, resetFormLocation);
+      }
+    };
     maplibreLayer?.on("loadend" as EventTypes, () => {
-      mapLocation.coordinate &&
-        handleCoords({ coordinate: to3857(mapLocation.coordinate) }, false);
+      if (mapLocation.coordinate) {
+        updateForm(to3857(mapLocation.coordinate), false);
+      }
     });
-    map.on("singleclick", handleCoords);
+    map.on("singleclick", handleClick);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map, activeProfile]);
 

components/spatial/components/layer/LayersProvider.tsx

@@ -12,9 +12,9 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { BASELAYER_GRAY } from "@/components/MapBaselayerSwitcher";
 import useStore from "@/store";
 
+import style from "../../../../map/style.json";
 import mapPosition from "../../../icons/mapPosition.svg";
 import userLocation from "../../../icons/userLocation.svg";
-import style from "../../style.json";
 import { MapContext } from "../Map";
 
 import MaplibreLayer from "./MapLibreLayer";
@@ -39,7 +39,7 @@ interface Metadata {
 
 interface Paint {
   "fill-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
-  "fill-opacity"?: number;
+  "fill-opacity"?: DataDrivenPropertyValueSpecification<number> | number;
   "line-opacity"?: number;
   "text-opacity"?: number;
 }
@@ -100,6 +100,17 @@ export const getStyle = (
     } else if (layer.type === "symbol") {
       paint["text-opacity"] = isSourceLayer ? 1 : 0.0;
     }
+    if (/^ft$/.test(layer.id)) {
+      paint["fill-opacity"] = [
+        "interpolate",
+        ["linear"],
+        ["zoom"],
+        12,
+        0.8,
+        22,
+        0.5,
+      ];
+    }
     if (/^ft_label$/.test(layer.id)) {
       // eslint-disable-next-line no-param-reassign
       layer.layout["text-field"] = [

components/spatial/components/layer/MapLibreLayer.ts

@@ -45,27 +45,7 @@ class MaplibreLayer extends Layer {
     });
 
     this.maplibreMap.on("load", () => {
-      const layers = (
-        (this.maplibreMap.getStyle().layers || []) as [
-          TreeAppLayerSpecification,
-        ]
-      ).filter((l) => l.metadata?.group === "main");
-
-      const loadedLayers = layers.map((layer) => ({
-        id: layer.id,
-        loaded: false,
-      }));
-      layers.forEach((layer) => {
-        this.waitForVectorTileLayerToRender(layer.id, () => {
-          const styleLayer = loadedLayers.find((l) => l.id === layer.id);
-          if (styleLayer) {
-            styleLayer.loaded = true;
-          }
-          if (loadedLayers.every((l) => l.loaded)) {
-            this.dispatchEvent("loadend");
-          }
-        });
-      });
+      this.getLayersAreLoaded();
     });
 
     this.map = map;
@@ -74,6 +54,28 @@ class MaplibreLayer extends Layer {
     this.renderer_ = new MaplibreRenderer({ layer: this });
   }
 
+  getLayersAreLoaded() {
+    const layers = (
+      (this.maplibreMap.getStyle().layers || []) as [TreeAppLayerSpecification]
+    ).filter((l) => l.metadata?.group === "main");
+
+    const loadedLayers = layers.map((layer) => ({
+      id: layer.id,
+      loaded: false,
+    }));
+    layers.forEach((layer) => {
+      this.waitForVectorTileLayerToRender(layer.id, () => {
+        const styleLayer = loadedLayers.find((l) => l.id === layer.id);
+        if (styleLayer) {
+          styleLayer.loaded = true;
+        }
+        if (loadedLayers.every((l) => l.loaded)) {
+          this.dispatchEvent("loadend");
+        }
+      });
+    });
+  }
+
   /**
    * Waits for a Maplibre vector tile layer to be fully loaded and rendered.
    * Calls the provided callback when the layer is ready.