oppgave 3 ferdig

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 [];
+  }
 };

src/components/MapLibreMap.tsx

@@ -4,17 +4,24 @@ import {
   type RequestTransformFunction,
 } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { RMap, RPopup, useMap } from 'maplibre-react-components';
+import { RMap, RPopup, 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'
@@ -33,45 +40,49 @@ export const MapLibreMap = () => {
     undefined
   );
 
-  const [address, setAddress] = useState<Address | null>(null);
-
-  const [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
+    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 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 (
-    <RMap
-      minZoom={6}
-      initialCenter={TRONDHEIM_COORDS}
-      initialZoom={12}
-      mapStyle={NORKART_BASEMAP_STYLE}
-      initialTransformRequest={transformRequest}
-      style={{
-        height: `calc(100dvh - var(--header-height))`,
-      }}
-      onClick={onMapClick}
-    >
-      <Overlay>
-        <h2>Dette er et overlay</h2>
-        <p>Legg til funksjonalitet knyttet til kartet.</p>
-        <SearchBar setAddress={setAddress} />
-      </Overlay>
-      {address && (
-        <MapFlyTo
-          lng={address.PayLoad.Posisjon.X}
-          lat={address.PayLoad.Posisjon.Y}
-        />
-      )}
-      <DrawComponent />
-      {clickPoint && pointHoyde !== undefined && (
+    return (
+        <RMap
+            minZoom={6}
+            initialCenter={TRONDHEIM_COORDS}
+            initialZoom={12}
+            mapStyle={NORKART_BASEMAP_STYLE}
+            initialTransformRequest={transformRequest}
+            style={{
+                height: `calc(100dvh - var(--header-height))`,
+            }}
+            onClick={onMapClick}
+        >
+            <Overlay>
+                <h2>Dette er et overlay</h2>
+                <p>Legg til funksjonalitet knyttet til kartet.</p>
+                <SearchBar setAddress={setAddress} />
+            </Overlay>
+            {address && (
+                <MapFlyTo
+                    lng={address.PayLoad.Posisjon.X}
+                    lat={address.PayLoad.Posisjon.Y}
+                />
+            )}
+          {clickPoint && pointHoyde !== undefined && (
         <RPopup longitude={clickPoint.lng} latitude={clickPoint.lat}>
           <div>
             <p>Latitude: {clickPoint.lat.toFixed(6)}</p>
@@ -80,8 +91,20 @@ export const MapLibreMap = () => {
           </div>
         </RPopup>
       )}
-    </RMap>
-  );
+            <DrawComponent />
+            {bygningsOmriss &&
+                <>
+                    <RSource id="bygning" type="geojson" data={bygningsOmriss} />
+                    <RLayer
+                        source="bygning"
+                        id="bygning-fill"
+                        type="fill"
+                        paint={polygonStyle}
+                    />
+                </>
+            }
+        </RMap>
+    );
 };
 
 function MapFlyTo({ lng, lat }: { lng: number; lat: number }) {