From ebe3a29f3d804aa0cf687699a4f70c5c1e6b7109 Mon Sep 17 00:00:00 2001
From: Sofus Lind <sofushl@proton.me>
Date: Wed, 7 Oct 2026 18:35:59 +0200
Subject: [PATCH] oppgave5 ferdig

---
 src/api/getRuteMellomPunkter.ts | 24 ++++++++++++++++++++
 src/components/MapLibreMap.tsx  | 39 +++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/src/api/getRuteMellomPunkter.ts b/src/api/getRuteMellomPunkter.ts
index 1d807f2..10148cd 100644
--- a/src/api/getRuteMellomPunkter.ts
+++ b/src/api/getRuteMellomPunkter.ts
@@ -34,6 +34,30 @@ export const getRuteMellomPunkter = async (
     ZoomLevel: 14,
   };
 
+  try {
+    const apiResult = await fetch(query, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-WAAPI-TOKEN': `${apiKey}`,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    if (apiResult.ok) {
+      const data = await apiResult.json();
+      console.log(data);
+      return data;
+    } else {
+      console.error('API request failed with status:', apiResult.status);
+      return [];
+    }
+  } catch (error) {
+    console.error('An error occurred while fetching data:', error);
+    return [];
+  }
+
   // TODO: Fullfør/endre koden for å hente og returnere en kjørerute mellom to punkter
 
   // Hint: Du kan se på getHoydeFromPunkt for å få en idé om hvordan dette kan gjøres.
diff --git a/src/components/MapLibreMap.tsx b/src/components/MapLibreMap.tsx
index 76c5b13..0a0693c 100644
--- a/src/components/MapLibreMap.tsx
+++ b/src/components/MapLibreMap.tsx
@@ -12,6 +12,7 @@ import DrawComponent from './DrawComponent';
 import { SearchBar, type Address } from './SearchBar';
 import { getBygningAtPunkt } from '../api/getBygningAtPunkt';
 import type { GeoJSON } from 'geojson';
+import { getRuteMellomPunkter } from '../api/getRuteMellomPunkter';
 
 const TRONDHEIM_COORDS: [number, number] = [10.40565401, 63.4156575];
 
@@ -22,6 +23,11 @@ const polygonStyle = {
     "fill-color": "rgba(18, 94, 45, 0.41)"
 }
 
+const lineStyle = {
+    "line-color": "#1a73e8",
+    "line-width": 4,
+};
+
 type NorkartBasemapVariant =
     | 'standard'
     | 'standard-without-text'
@@ -40,6 +46,9 @@ export const MapLibreMap = () => {
         undefined
     );
 
+    const [startPunkt, setStartPunkt] = useState<LngLat | undefined>(undefined);
+    const [rute, setRute] = useState<GeoJSON | undefined>(undefined);
+    const [ruteCost, setRuteCost] = useState<{ Cost: number; Name: string }[] | undefined>(undefined);
     const [address, setAddress] = useState<Address | null>(null);
     const [bygningsOmriss, setBygningsOmriss] = useState<GeoJSON | undefined>(undefined);
     const [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
@@ -57,6 +66,22 @@ export const MapLibreMap = () => {
         } else {
             setBygningsOmriss(undefined);
         }
+        if (!startPunkt) {
+            setStartPunkt(e.lngLat);
+            return;
+        }
+
+        const ruteRespons = await getRuteMellomPunkter(
+            startPunkt.lng,
+            startPunkt.lat,
+            e.lngLat.lng,
+            e.lngLat.lat
+        );
+        if (ruteRespons?.RouteGeometry) {
+            setRute(ruteRespons.RouteGeometry);
+            setRuteCost(ruteRespons.CostList);
+        }
+        setStartPunkt(undefined);
     };
 
     return (
@@ -88,6 +113,9 @@ export const MapLibreMap = () => {
                         <p>Latitude: {clickPoint.lat.toFixed(6)}</p>
                         <p>Longitude: {clickPoint.lng.toFixed(6)}</p>
                         <p>Height: {pointHoyde.toFixed(1)} m</p>
+                        {ruteCost && ruteCost != undefined && (
+                            <p>Tid: {ruteCost.find(o => o.Name === "time")?.Cost.toFixed(1)} m</p>
+                        )}
                     </div>
                 </RPopup>
             )}
@@ -103,6 +131,17 @@ export const MapLibreMap = () => {
                     />
                 </>
             }
+            {rute &&
+                <>
+                    <RSource id="rute" type="geojson" data={rute} />
+                    <RLayer
+                        source="rute"
+                        id="rute-line"
+                        type="line"
+                        paint={lineStyle}
+                    />
+                </>
+            }
         </RMap>
     );
 };