Move out layer assemblies

Ingenjorsarbete-For-Klimatet · Jun 4, 2024 · 0cc884a · 0cc884a
1 parent 45e4059
commit 0cc884a
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 145 deletions.
diff --git a/src/map/components/App.tsx b/src/map/components/App.tsx
@@ -1,12 +1,11 @@
-import { MVTLoader } from "@loaders.gl/mvt";
+import { assembleMapLayers, assembleDataLayers } from "../layer_assembly.tsx";
 import DeckGL from "deck.gl";
 import maplibregl from "maplibre-gl";
 import { Protocol } from "pmtiles";
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { Map, MapProvider } from "react-map-gl/maplibre";
 
-import DataTileLayer from "../layers/datatile-layer.tsx";
 import { MenuState, SearchView } from "../types.tsx";
 import { useMenuStore } from "./Store.tsx";
 
@@ -37,155 +36,18 @@ export function App() {
     };
   }, []);
 
-  const layers = useMenuStore((state: MenuState) => {
-    const layers = [];
-
-    for (const [p, _] of state.layer) {
-      if (
-        state.layer.get(p)!.type == "ground" &&
-        state.layer.get(p)!.checked == true
-      ) {
-        let opacity = 1;
-        if (
-          p == "Sverige" ||
-          p == "Sjö" ||
-          p == "Anlagt vatten" ||
-          p == "Vattendragsyta"
-        ) {
-          opacity = 1;
-        } else if (p == "Kalfjäll" || p == "Fjällbjörkskog") {
-          opacity = Math.pow(zoom, 2) / 50;
-        } else {
-          opacity = Math.pow(zoom, 2) / 150;
-        }
-
-        opacity = opacity > 1 ? 1 : opacity;
-
-        layers.push({
-          id: p,
-          source: "ground",
-          "source-layer": state.layer.get(p)!.name,
-          type: "fill",
-          paint: {
-            "fill-color":
-              state.theme == "light"
-                ? state.layer.get(p)!.color
-                : state.layer.get(p)!.dark_color,
-            "fill-opacity": opacity,
-          },
-        });
-      }
-
-      if (
-        state.layer.get(p)!.type == "communication" &&
-        state.layer.get(p)!.checked == true
-      ) {
-        let line_width = 2;
-        let line_blur = 1;
-        let line_gap_width = 0;
-
-        if (zoom >= 8 && (p == "Motorväg" || p == "Motortrafikled")) {
-          line_width = 4;
-          line_blur = 1;
-        }
-
-        if (zoom >= 12 && (p == "Motorväg" || p == "Motortrafikled")) {
-          line_gap_width = 1;
-        }
-
-        layers.push({
-          id: `${p}_outline`,
-          source: "connection",
-          "source-layer": state.layer.get(p)!.name,
-          type: "line",
-          paint: {
-            "line-color": state.theme == "light" ? "#000" : "#fff",
-            "line-width": line_width + 1,
-            "line-blur": line_blur,
-            "line-gap-width": line_gap_width,
-          },
-        });
-        layers.push({
-          id: p,
-          source: "connection",
-          "source-layer": state.layer.get(p)!.name,
-          type: "line",
-          paint: {
-            "line-color":
-              state.theme == "light"
-                ? state.layer.get(p)!.color
-                : state.layer.get(p)!.dark_color,
-            "line-width": line_width,
-            "line-gap-width": line_gap_width,
-          },
-        });
-      }
-    }
-
-    layers.push({
-      id: "bygg",
-      source: "construction",
-      "source-layer": "100_bygg",
-      type: "fill",
-      paint: {
-        "fill-color": "#000000",
-      },
-    });
-
-    // layers.push({
-    //   id: "terrain",
-    //   source: "terrain",
-    //   type: "hillshade",
-    //   paint: {
-    //     "hillshade-exaggeration": 1,
-    //   },
-    //   layout: {
-    //     visibility: "visible",
-    //   },
-    // });
-
-    layers.push({
-      id: "text",
-      source: "text",
-      "source-layer": "sweden_text",
-      type: "symbol",
-      paint: {
-        "text-color": state.theme == "light" ? "#000000" : "#ffffff",
-        "text-halo-color": state.theme == "light" ? "#ffffff" : "#000000",
-        "text-halo-width": 1,
-      },
-      layout: {
-        "text-field": ["get", "textstrang"],
-        "text-radial-offset": 0.5,
-        "text-size": 12,
-      },
-    });
-
-    return layers;
+  const mapLayers = useMenuStore((state: MenuState) => {
+    return assembleMapLayers(state, zoom);
   });
 
-  const layers2 = useMenuStore((state: MenuState) => {
-    const layers = [];
-
-    layers.push(
-      new DataTileLayer({
-        id: "test",
-        data: "http://localhost:5173/mesan.pmtiles",
-        loaders: [MVTLoader],
-        alpha: state.layer.get("Temperatur")!.checked == true ? 200 : 0,
-        // updateTriggers: {
-        //   alpha: state.layer.get("Temperatur")?.checked
-        // }
-      }),
-    );
-
-    return layers;
+  const dataLayers = useMenuStore((state: MenuState) => {
+    return assembleDataLayers(state);
   });
 
   return (
     <DeckGL
       initialViewState={searchView}
-      layers={layers2}
+      layers={dataLayers}
       controller={{ inertia: 500, scrollZoom: { speed: 0.2, smooth: false } }}
       ContextProvider={MapProvider}
       onViewStateChange={({ viewState }) => {
@@ -229,7 +91,7 @@ export function App() {
           //   exaggeration: 2,
           // },
           // @ts-ignore
-          layers: layers,
+          layers: mapLayers,
         }}
       />
     </DeckGL>

diff --git a/src/map/layer_assembly.tsx b/src/map/layer_assembly.tsx
@@ -0,0 +1,148 @@
+import { MVTLoader } from "@loaders.gl/mvt";
+import DataTileLayer from "./layers/datatile-layer.tsx";
+import { MenuState } from "./types.tsx";
+
+export function assembleMapLayers(state: MenuState, zoom: number) {
+  const layers = [];
+
+  for (const [p, _] of state.layer) {
+    if (
+      state.layer.get(p)!.type == "ground" &&
+      state.layer.get(p)!.checked == true
+    ) {
+      let opacity = 1;
+      if (
+        p == "Sverige" ||
+        p == "Sjö" ||
+        p == "Anlagt vatten" ||
+        p == "Vattendragsyta"
+      ) {
+        opacity = 1;
+      } else if (p == "Kalfjäll" || p == "Fjällbjörkskog") {
+        opacity = Math.pow(zoom, 2) / 50;
+      } else {
+        opacity = Math.pow(zoom, 2) / 150;
+      }
+
+      opacity = opacity > 1 ? 1 : opacity;
+
+      layers.push({
+        id: p,
+        source: "ground",
+        "source-layer": state.layer.get(p)!.name,
+        type: "fill",
+        paint: {
+          "fill-color":
+            state.theme == "light"
+              ? state.layer.get(p)!.color
+              : state.layer.get(p)!.dark_color,
+          "fill-opacity": opacity,
+        },
+      });
+    }
+
+    if (
+      state.layer.get(p)!.type == "communication" &&
+      state.layer.get(p)!.checked == true
+    ) {
+      let line_width = 2;
+      let line_blur = 1;
+      let line_gap_width = 0;
+
+      if (zoom >= 8 && (p == "Motorväg" || p == "Motortrafikled")) {
+        line_width = 4;
+        line_blur = 1;
+      }
+
+      if (zoom >= 12 && (p == "Motorväg" || p == "Motortrafikled")) {
+        line_gap_width = 1;
+      }
+
+      layers.push({
+        id: `${p}_outline`,
+        source: "connection",
+        "source-layer": state.layer.get(p)!.name,
+        type: "line",
+        paint: {
+          "line-color": state.theme == "light" ? "#000" : "#fff",
+          "line-width": line_width + 1,
+          "line-blur": line_blur,
+          "line-gap-width": line_gap_width,
+        },
+      });
+      layers.push({
+        id: p,
+        source: "connection",
+        "source-layer": state.layer.get(p)!.name,
+        type: "line",
+        paint: {
+          "line-color":
+            state.theme == "light"
+              ? state.layer.get(p)!.color
+              : state.layer.get(p)!.dark_color,
+          "line-width": line_width,
+          "line-gap-width": line_gap_width,
+        },
+      });
+    }
+  }
+
+  layers.push({
+    id: "bygg",
+    source: "construction",
+    "source-layer": "100_bygg",
+    type: "fill",
+    paint: {
+      "fill-color": "#000000",
+    },
+  });
+
+  // layers.push({
+  //   id: "terrain",
+  //   source: "terrain",
+  //   type: "hillshade",
+  //   paint: {
+  //     "hillshade-exaggeration": 1,
+  //   },
+  //   layout: {
+  //     visibility: "visible",
+  //   },
+  // });
+
+  layers.push({
+    id: "text",
+    source: "text",
+    "source-layer": "sweden_text",
+    type: "symbol",
+    paint: {
+      "text-color": state.theme == "light" ? "#000000" : "#ffffff",
+      "text-halo-color": state.theme == "light" ? "#ffffff" : "#000000",
+      "text-halo-width": 1,
+    },
+    layout: {
+      "text-field": ["get", "textstrang"],
+      "text-radial-offset": 0.5,
+      "text-size": 12,
+    },
+  });
+
+  return layers;
+}
+
+export function assembleDataLayers(state: MenuState) {
+  const layers = [];
+
+  layers.push(
+    new DataTileLayer({
+      id: "test",
+      data: "http://localhost:5173/mesan.pmtiles",
+      loaders: [MVTLoader],
+      alpha: state.layer.get("Temperatur")!.checked == true ? 200 : 0,
+      // updateTriggers: {
+      //   alpha: state.layer.get("Temperatur")?.checked
+      // }
+    }),
+  );
+
+  return layers;
+}