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 00ffdf1..9b62b9c 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, 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
(null); - - const [clickPoint, setClickPoint] = useState(undefined); + const [address, setAddress] = useState
(null); + const [bygningsOmriss, setBygningsOmriss] = useState(undefined); + const [clickPoint, setClickPoint] = useState(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 ( - - -

Dette er et overlay

-

Legg til funksjonalitet knyttet til kartet.

- -
- {address && ( - - )} - - {clickPoint && pointHoyde !== undefined && ( + return ( + + +

Dette er et overlay

+

Legg til funksjonalitet knyttet til kartet.

+ +
+ {address && ( + + )} + {clickPoint && pointHoyde !== undefined && (

Latitude: {clickPoint.lat.toFixed(6)}

@@ -80,8 +91,20 @@ export const MapLibreMap = () => {
)} -
- ); + + {bygningsOmriss && + <> + + + + } +
+ ); }; function MapFlyTo({ lng, lat }: { lng: number; lat: number }) {