Use deck.gl controller, add height rendering

src/App.tsx

@@ -1,9 +1,8 @@
 import { createRoot } from "react-dom/client";
-import { useState, useEffect, useRef } from "react";
-import "./styles.css";
-import Map from "react-map-gl";
+import { useEffect } from "react";
+import DeckGL from "deck.gl/typed";
+import { Map, MapProvider } from "react-map-gl";
 import maplibregl from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
 import { Protocol } from "pmtiles";
 
 import { useMenuStore } from "./Store";
@@ -14,21 +13,20 @@ const INITIAL_VIEW_STATE = {
   zoom: 4,
   minZoom: 4,
   maxZoom: 14,
-  maxPitch: 0,
-  bearing: 0,
 };
 
 export function App() {
-  const mapRef = useRef(null);
-
   const zoom = useMenuStore((state: any) => state.zoom);
   const setZoom = useMenuStore((state: any) => state.setZoom);
-  const setSearchFlyFunction = useMenuStore(
-    (state: any) => state.setSearchFlyFunction,
-  );
+  const searchView = useMenuStore((state: any) => {
+    if (state.searchView.zoom) {
+      return state.searchView;
+    } else {
+      return INITIAL_VIEW_STATE;
+    }
+  });
 
   useEffect(() => {
-    setSearchFlyFunction(mapRef);
     let protocol: any = new Protocol();
     maplibregl.addProtocol("pmtiles", protocol.tile);
     return () => {
@@ -41,6 +39,22 @@ export function App() {
 
     for (const p in state.layer) {
       if (state.layer[p].type == "ground" && state.layer[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",
@@ -51,14 +65,37 @@ export function App() {
               state.theme == "light"
                 ? state.layer[p].color
                 : state.layer[p].dark_color,
+            "fill-opacity": opacity,
           },
         });
       }
 
       if (
         state.layer[p].type == "communication" &&
         state.layer[p].checked == true
-      )
+      ) {
+        let line_width = 1;
+        let line_blur = 1;
+        let line_gap_width = 0;
+
+        if (zoom >= 8 && (p == "Motorväg" || p == "Motortrafikled")) {
+          line_width = 2;
+          line_blur = 1;
+          line_gap_width = 0;
+        }
+
+        layers.push({
+          id: `${p}_outline`,
+          source: "connection",
+          "source-layer": state.layer[p].name,
+          type: "line",
+          paint: {
+            "line-color": state.theme == "light" ? "#000" : "#fff",
+            "line-width": line_width,
+            "line-blur": line_blur,
+            "line-gap-width": line_gap_width,
+          },
+        });
         layers.push({
           id: p,
           source: "connection",
@@ -69,8 +106,11 @@ export function App() {
               state.theme == "light"
                 ? state.layer[p].color
                 : state.layer[p].dark_color,
+            "line-width": line_width,
+            "line-gap-width": line_gap_width,
           },
         });
+      }
     }
 
     layers.push({
@@ -104,35 +144,56 @@ export function App() {
   });
 
   return (
-    <Map
-      ref={mapRef}
-      initialViewState={INITIAL_VIEW_STATE}
-      style={{ width: "100vw", height: "100vh", margin: "0 auto" }}
-      mapStyle={{
-        version: 8,
-        glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
-        sources: {
-          ground: {
-            type: "vector",
-            url: "pmtiles://sweden_ground.pmtiles",
-          },
-          connection: {
-            type: "vector",
-            url: "pmtiles://sweden_road.pmtiles",
-          },
-          construction: {
-            type: "vector",
-            url: "pmtiles://sweden_building.pmtiles",
+    <DeckGL
+      initialViewState={searchView}
+      controller={{ inertia: 300, scrollZoom: { speed: 1, smooth: true } }}
+      ContextProvider={MapProvider}
+      onViewStateChange={({ viewState }) => {
+        setZoom(viewState.zoom);
+        return {
+          ...viewState,
+        };
+      }}
+    >
+      <Map
+        style={{ width: "100vw", height: "100vh", margin: "0 auto" }}
+        mapStyle={{
+          version: 8,
+          glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
+          sources: {
+            ground: {
+              type: "vector",
+              url: "pmtiles://sweden_ground.pmtiles",
+            },
+            connection: {
+              type: "vector",
+              url: "pmtiles://sweden_road.pmtiles",
+            },
+            construction: {
+              type: "vector",
+              url: "pmtiles://sweden_building.pmtiles",
+            },
+            text: {
+              type: "vector",
+              url: "pmtiles://sweden_text.pmtiles",
+            },
+            terrain: {
+              type: "raster-dem",
+              url: "pmtiles://output.pmtiles",
+              tileSize: 512,
+            },
           },
-          text: {
-            type: "vector",
-            url: "pmtiles://sweden_text.pmtiles",
+          terrain: {
+            source: "terrain",
+            exaggeration: 0.001,
           },
-        },
-        layers: layers,
-      }}
-      mapLib={maplibregl}
-    />
+          // @ts-ignore
+          layers: layers,
+        }}
+        // @ts-ignore
+        mapLib={maplibregl}
+      />
+    </DeckGL>
   );
 }
 

src/Footer.tsx

@@ -1,5 +1,4 @@
 import { Button, Flex, Popover } from "@radix-ui/themes";
-import { InfoCircledIcon, EnvelopeClosedIcon } from "@radix-ui/react-icons";
 
 import { ThemeButton } from "./Theme";
 import { useMenuStore } from "./Store";

src/Header.tsx

@@ -9,7 +9,6 @@ import {
   ScrollArea,
   Switch,
 } from "@radix-ui/themes";
-import { GlobeIcon, LayersIcon } from "@radix-ui/react-icons";
 import AsyncSelect from "react-select/async";
 import { mapElements } from "./config";
 import { useMenuStore } from "./Store";
@@ -102,9 +101,7 @@ export function Header() {
   // @ts-ignore
   const searchResult = useMenuStore((state: any) => state.searchResult);
   // @ts-ignore
-  const searchFlyFunction = useMenuStore(
-    (state: any) => state.searchFlyFunction,
-  );
+  const setSearchResult = useMenuStore((state: any) => state.setSearchResult);
   // @ts-ignore
   const [initialViewState, setInitialViewState] = useState({
     latitude: 62.5,
@@ -174,12 +171,7 @@ export function Header() {
           cacheOptions
           defaultOptions={defaultSearchOptions}
           loadOptions={loadOptions}
-          onChange={(e) => {
-            searchFlyFunction.current?.flyTo({
-              center: e.geometry_xy,
-              zoom: 10,
-            });
-          }}
+          onChange={(e) => setSearchResult(e, setInitialViewState)}
         />
         <Popover.Root>
           <Popover.Trigger>

src/Store.tsx

@@ -8,10 +8,6 @@ export const useMenuStore = create((set) => ({
   layer: structuredClone(mapElements),
   searchResult: {},
   searchView: {},
-  searchFlyFunction: () => {},
-  setSearchFlyFunction: (fun: any) => {
-    set(() => ({ searchFlyFunction: fun }));
-  },
   setZoom: (zoom: number) => {
     set(() => ({ zoom: zoom }));
   },

src/Theme.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@radix-ui/themes";
-import { SunIcon, MoonIcon } from "@radix-ui/react-icons";
 import { useMenuStore } from "./Store";
 
 export function ThemeButton() {

src/config.tsx

@@ -1,4 +1,3 @@
-import { HSLAToRGBA } from "./utils/utils";
 // @ts-ignore
 import colors from "./colors.module.css";
 

src/main.tsx

@@ -3,6 +3,7 @@ import { Header } from "./Header.tsx";
 import { Footer } from "./Footer.tsx";
 
 import "./styles.css";
+import "maplibre-gl/dist/maplibre-gl.css";
 
 renderToDOM(
   document.getElementById("root"),