From 6e0ffbf89c7423982971ebc947fe227be78aea89 Mon Sep 17 00:00:00 2001
From: Sofus Lind <sofushl@proton.me>
Date: Wed, 7 Oct 2026 18:08:29 +0200
Subject: [PATCH] oppgave 3 ferdig

---
 src/api/getBygningAtPunkt.ts   | 28 ++++++++++++++++++++--------
 src/components/MapLibreMap.tsx | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/api/getBygningAtPunkt.ts b/src/api/getBygningAtPunkt.ts
index a8211af..2c0b3f9 100644
--- a/src/api/getBygningAtPunkt.ts
+++ b/src/api/getBygningAtPunkt.ts
@@ -2,13 +2,25 @@ export const getBygningAtPunkt = async (x: number, y: number) => {
   const apiKey = import.meta.env.VITE_API_KEY;
   const query = `https://bygning.api.norkart.no/bygninger/byposition?x=${x}&y=${y}&MaxRadius=1&GeometryTextFormat=GeoJson&IncludeFkbData=true`;
 
-  // TODO: Fullfør/endre koden for hente og returnere bygningsdata på et punkt
+  try {
+    const apiResult = await fetch(query, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-WAAPI-TOKEN': `${apiKey}`,
+      },
+    });
 
-  // Hint: Du kan se på getAdresseFromSearchText og getHoydeFromPunkt for å få en idé om hvordan
-  // dette kan gjøres.
-
-  // Merk at dette er en GET request, og ikke en POST request!
-
-  // Når du har fått til kallet til API-et kan du se i Network-taben i nettleseren eller i
-  // konsollen for å se hvordan responsen ser ut.
+    if (apiResult.ok) {
+      const data = await apiResult.json();
+      return data.Bygninger[0];
+    } else {
+      console.error('API request failed with status:', apiResult.status);
+      return [];
+    }
+  } catch (error) {
+    console.error('An error occurred while fetching data:', error);
+    return [];
+  }
 };
diff --git a/src/components/MapLibreMap.tsx b/src/components/MapLibreMap.tsx
index 53a52dc..e7fda00 100644
--- a/src/components/MapLibreMap.tsx
+++ b/src/components/MapLibreMap.tsx
@@ -4,17 +4,24 @@ import {
     type RequestTransformFunction,
 } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { RMap, useMap } from 'maplibre-react-components';
+import { RMap, useMap, RLayer, RSource } from 'maplibre-react-components';
 import { getHoydeFromPunkt } from '../api/getHoydeFromPunkt';
 import { useEffect, useState } from 'react';
 import { Overlay } from './Overlay';
 import DrawComponent from './DrawComponent';
 import { SearchBar, type Address } from './SearchBar';
+import { getBygningAtPunkt } from '../api/getBygningAtPunkt';
+import type { GeoJSON } from 'geojson';
 
 const TRONDHEIM_COORDS: [number, number] = [10.40565401, 63.4156575];
 
 const KVP_BASE_URL = 'https://kvp.maps.norkart.no/mvt/';
 
+const polygonStyle = {
+    "fill-outline-color": "rgba(0,0,0,0.1)",
+    "fill-color": "rgba(18, 94, 45, 0.41)"
+}
+
 type NorkartBasemapVariant =
     | 'standard'
     | 'standard-without-text'
@@ -34,17 +41,22 @@ export const MapLibreMap = () => {
     );
 
     const [address, setAddress] = useState<Address | null>(null);
-
+    const [bygningsOmriss, setBygningsOmriss] = useState<GeoJSON | undefined>(undefined);
     const [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
 
-    useEffect(() => {
-        console.log(pointHoyde, clickPoint);
-    }, [clickPoint, pointHoyde]);
+    useEffect(() => { }, [clickPoint, pointHoyde]);
 
     const onMapClick = async (e: MapLayerMouseEvent) => {
         const hoyder = await getHoydeFromPunkt(e.lngLat.lng, e.lngLat.lat);
         setPointHoydeAtPunkt(hoyder[0].Z);
         setClickPoint(new LngLat(e.lngLat.lng, e.lngLat.lat));
+        const bygningResponse = await getBygningAtPunkt(e.lngLat.lng, e.lngLat.lat)
+        if (bygningResponse?.FkbData?.BygningsOmriss) {
+            const geoJsonObject = JSON.parse(bygningResponse.FkbData.BygningsOmriss);
+            setBygningsOmriss(geoJsonObject);
+        } else {
+            setBygningsOmriss(undefined);
+        }
     };
 
     return (
@@ -71,6 +83,17 @@ export const MapLibreMap = () => {
                 />
             )}
             <DrawComponent />
+            {bygningsOmriss &&
+                <>
+                    <RSource id="bygning" type="geojson" data={bygningsOmriss} />
+                    <RLayer
+                        source="bygning"
+                        id="bygning-fill"
+                        type="fill"
+                        paint={polygonStyle}
+                    />
+                </>
+            }
         </RMap>
     );
 };