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 0603694..95fd6e2 100644
--- a/src/components/MapLibreMap.tsx
+++ b/src/components/MapLibreMap.tsx
@@ -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];
 
@@ -53,6 +54,11 @@ const MONTHS = [
   'Desember',
 ];
 
+const lineStyle = {
+    "line-color": "#1a73e8",
+    "line-width": 4,
+};
+
 type NorkartBasemapVariant =
   | 'standard'
   | 'standard-without-text'
@@ -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
@@ -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={{
@@ -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();