diff --git a/src/App.tsx b/src/App.tsx index 724e14d..fcd1902 100644 --- a/src/App.tsx +++ b/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,6 +65,7 @@ export function App() { state.theme == "light" ? state.layer[p].color : state.layer[p].dark_color, + "fill-opacity": opacity, }, }); } @@ -58,7 +73,29 @@ export function App() { 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 ( - { + setZoom(viewState.zoom); + return { + ...viewState, + }; + }} + > + + // @ts-ignore + layers: layers, + }} + // @ts-ignore + mapLib={maplibregl} + /> + ); } diff --git a/src/Footer.tsx b/src/Footer.tsx index 6fb068a..cc2f765 100644 --- a/src/Footer.tsx +++ b/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"; diff --git a/src/Header.tsx b/src/Header.tsx index 60d3154..5a8d941 100644 --- a/src/Header.tsx +++ b/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)} /> diff --git a/src/Store.tsx b/src/Store.tsx index 8b906bb..2cc874b 100644 --- a/src/Store.tsx +++ b/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 })); }, diff --git a/src/Theme.tsx b/src/Theme.tsx index f45f6b0..f30259e 100644 --- a/src/Theme.tsx +++ b/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() { diff --git a/src/config.tsx b/src/config.tsx index 4b00866..f9971f2 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -1,4 +1,3 @@ -import { HSLAToRGBA } from "./utils/utils"; // @ts-ignore import colors from "./colors.module.css"; diff --git a/src/main.tsx b/src/main.tsx index 0c84407..0afe842 100644 --- a/src/main.tsx +++ b/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"),