Skip to content

oppgave5 ferdig #5

Merged
merged 2 commits into from
Oct 7, 2026
+116 −52
Merged

oppgave5 ferdig #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebe3a29
oppgave5 ferdig
Oct 7, 2026
1a5cb97
Merge branch 'main' into oppgave5
sofushl Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/api/getRuteMellomPunkter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
144 changes: 92 additions & 52 deletions src/components/MapLibreMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,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];

Expand All @@ -53,6 +54,11 @@ const MONTHS = [
'Desember',
];

const lineStyle = {
"line-color": "#1a73e8",
"line-width": 4,
};

type NorkartBasemapVariant =
| 'standard'
| 'standard-without-text'
Expand All @@ -70,7 +76,9 @@ export const MapLibreMap = () => {
const [pointHoyde, setPointHoydeAtPunkt] = useState<number | undefined>(
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
Expand All @@ -95,44 +103,86 @@ export const MapLibreMap = () => {
const takflateData = await getTakflateDataForPunkt(
e.lngLat.lng,
e.lngLat.lat
);

);
setSolData(takflateData);
};

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>
<p>Longitude: {clickPoint.lng.toFixed(6)}</p>
<p>Height: {pointHoyde.toFixed(1)} m</p>
</div>
</RPopup>
)}
{solData.length > 0 && (
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 (
<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>
<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>
)}
<DrawComponent />
{bygningsOmriss &&
<>
<RSource id="bygning" type="geojson" data={bygningsOmriss} />
<RLayer
source="bygning"
id="bygning-fill"
type="fill"
paint={polygonStyle}
/>
</>
}
{rute &&
<>
<RSource id="rute" type="geojson" data={rute} />
<RLayer
source="rute"
id="rute-line"
type="line"
paint={lineStyle}
/>
</>
}
{solData.length > 0 && (
<TableContainer
component={Paper}
sx={{
Expand Down Expand Up @@ -162,21 +212,11 @@ export const MapLibreMap = () => {
</Table>
</TableContainer>
)}
<DrawComponent />
{bygningsOmriss && (
<>
<RSource id="bygning" type="geojson" data={bygningsOmriss} />
<RLayer
source="bygning"
id="bygning-fill"
type="fill"
paint={polygonStyle}
/>
</>
)}
</RMap>
);
};
</RMap>
);

};


function MapFlyTo({ lng, lat }: { lng: number; lat: number }) {
const map = useMap();
Expand Down