Merge branch 'Forelesning3'

.github/workflows/publish.yaml

@@ -25,3 +25,24 @@ jobs:
                   path: ./dist
             - uses: actions/deploy-pages@v4
               id: deployment
+    publish:
+        runs-on: ubuntu-latest
+        permissions:
+            id-token: write
+            pages: write
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: "npm"
+            - run: npm ci
+            - run: npm run build
+            - uses: actions/upload-pages-artifact@v3
+              with:
+                  path: ./dist
+            - uses: actions/deploy-pages@v4
+              id: deployment

package.json

@@ -1,30 +1,21 @@
 {
-  "name": "forelesning2",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "husky": "^8.0.3",
-    "ol": "^8.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8"
-  }
+    "devDependencies": {
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        "husky": "^8.0.3",
+        "prettier": "^3.2.4",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.12"
+    },
+    "dependencies": {
+        "ol": "^8.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "npm run check && vite build",
+        "check": "prettier --check . && tsc --noEmit",
+        "prepare": "husky install"
+    }
 }

src/main.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import ReactDOM from "react-dom/client";
-import { MapApplication } from "./components/application/mapApplication";
+import { MapApplication } from "./modules/application/mapApplication";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 

src/modules/application/application.css

@@ -0,0 +1,20 @@
+* {
+    margin: unset;
+}
+
+#root {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    height: 100dvh;
+}
+
+nav {
+    display: flex;
+    gap: 1rem;
+}
+
+.kommune-overlay {
+    background-color: white;
+    translate: -50% calc(-50% - 30px);
+    padding: 0.5em;
+}

src/modules/application/mapApplication.tsx

@@ -0,0 +1,52 @@
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import { OSM } from "ol/source";
+import { useGeographic } from "ol/proj";
+
+import "./application.css";
+import "ol/ol.css";
+import { KommuneLayerCheckbox } from "../kommune/kommuneLayerCheckbox";
+import { Layer } from "ol/layer";
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+useGeographic();
+
+const map = new Map({
+    view: new View({ center: [10, 59], zoom: 8 }),
+});
+
+export function MapApplication() {
+    function handleFocusUser(e: React.MouseEvent) {
+        e.preventDefault();
+        navigator.geolocation.getCurrentPosition((pos) => {
+            const { latitude, longitude } = pos.coords;
+            map.getView().animate({
+                center: [longitude, latitude],
+                zoom: 10,
+            });
+        });
+    }
+
+    const [layers, setLayers] = useState<Layer[]>([
+        new TileLayer({ source: new OSM() }),
+    ]);
+
+    const mapRef = useRef() as MutableRefObject<HTMLDivElement>;
+    useEffect(() => map.setTarget(mapRef.current), []);
+    useEffect(() => map.setLayers(layers), [layers]);
+    return (
+        <>
+            <header>
+                <h1>Kommune kart</h1>
+            </header>
+            <nav>
+                <a href={"#"} onClick={handleFocusUser}>
+                    Focus on me
+                </a>
+                <KommuneLayerCheckbox map={map} setLayers={setLayers} />
+            </nav>
+            <div ref={mapRef}></div>
+        </>
+    );
+}

src/modules/kommune/kommuneLayerCheckbox.tsx

@@ -0,0 +1,104 @@
+import {
+    Dispatch,
+    MutableRefObject,
+    SetStateAction,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { Layer } from "ol/layer";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { GeoJSON } from "ol/format";
+import { Feature, Map, MapBrowserEvent, Overlay } from "ol";
+import { Polygon } from "ol/geom";
+
+type KommuneProperties = {
+    kommunenummer: string;
+    navn: {
+        sprak: string;
+        navn: string;
+    }[];
+};
+
+type KommuneFeature = Feature<Polygon> & {
+    getProperties(): KommuneProperties;
+};
+
+const kommuneSource = new VectorSource<KommuneFeature>({
+    url: "/kommuner.json",
+    format: new GeoJSON(),
+});
+const kommuneLayer = new VectorLayer({
+    source: kommuneSource,
+});
+
+export function KommuneLayerCheckbox({
+    map,
+    setLayers,
+}: {
+    map: Map;
+    setLayers: Dispatch<SetStateAction<Layer[]>>;
+}) {
+    const [checked, setChecked] = useState(false);
+    const overlay = useMemo(() => new Overlay({}), []);
+    const overlayRef = useRef() as MutableRefObject<HTMLDivElement>;
+    useEffect(() => {
+        overlay.setElement(overlayRef.current);
+        map.addOverlay(overlay);
+        return () => {
+            map.removeOverlay(overlay);
+        };
+    }, []);
+    const [selectedKommune, setSelectedKommune] = useState<
+        KommuneFeature | undefined
+    >();
+    function handleClick(e: MapBrowserEvent<MouseEvent>) {
+        const clickedKommune = kommuneSource.getFeaturesAtCoordinate(
+            e.coordinate
+        ) as KommuneFeature[];
+        if (clickedKommune.length === 1) {
+            setSelectedKommune(clickedKommune[0]);
+            overlay.setPosition(e.coordinate);
+        } else {
+            setSelectedKommune(undefined);
+            overlay.setPosition(undefined);
+        }
+    }
+
+    useEffect(() => {
+        if (checked) {
+            setLayers((old) => [...old, kommuneLayer]);
+            map.on("click", handleClick);
+        }
+        return () => {
+            map.un("click", handleClick);
+            setLayers((old) => old.filter((l) => l !== kommuneLayer));
+        };
+    }, [checked]);
+
+    return (
+        <div>
+            <label>
+                <input
+                    type={"checkbox"}
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                />
+                {checked ? "Hide" : "Show"} kommune layer
+            </label>
+            <div ref={overlayRef} className={"kommune-overlay"}>
+                {selectedKommune && (
+                    <>
+                        {
+                            (
+                                selectedKommune.getProperties() as KommuneProperties
+                            ).navn.find((n) => n.sprak === "nor")!.navn
+                        }
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}