feat: add height on map

src/components/MapLibreMap.tsx

@@ -1,10 +1,10 @@
 import {
-    LngLat,
-    type MapLayerMouseEvent,
-    type RequestTransformFunction,
+  LngLat,
+  type MapLayerMouseEvent,
+  type RequestTransformFunction,
 } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { RMap, useMap } from 'maplibre-react-components';
+import { RMap, RPopup, useMap } from 'maplibre-react-components';
 import { getHoydeFromPunkt } from '../api/getHoydeFromPunkt';
 import { useEffect, useState } from 'react';
 import { Overlay } from './Overlay';
@@ -16,81 +16,90 @@ const TRONDHEIM_COORDS: [number, number] = [10.40565401, 63.4156575];
 const KVP_BASE_URL = 'https://kvp.maps.norkart.no/mvt/';
 
 type NorkartBasemapVariant =
-    | 'standard'
-    | 'standard-without-text'
-    | 'greyscale'
-    | 'greyscale-without-text'
-    | 'darkmode'
-    | 'transparent'
-    | 'hybrid'
-    | 'ortofoto';
+  | 'standard'
+  | 'standard-without-text'
+  | 'greyscale'
+  | 'greyscale-without-text'
+  | 'darkmode'
+  | 'transparent'
+  | 'hybrid'
+  | 'ortofoto';
 const NORKART_BASEMAP_VARIANT: NorkartBasemapVariant = 'standard';
 
 const NORKART_BASEMAP_STYLE = `${KVP_BASE_URL}norkart-basemap/${NORKART_BASEMAP_VARIANT}/style.json`;
 
 export const MapLibreMap = () => {
-    const [pointHoyde, setPointHoydeAtPunkt] = useState<number | undefined>(
-        undefined
-    );
+  const [pointHoyde, setPointHoydeAtPunkt] = useState<number | undefined>(
+    undefined
+  );
 
-    const [address, setAddress] = useState<Address | null>(null);
+  const [address, setAddress] = useState<Address | null>(null);
 
-    const [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
+  const [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
 
-    useEffect(() => {
-        console.log(pointHoyde, clickPoint);
-    }, [clickPoint, pointHoyde]);
+  useEffect(() => {
+    console.log(pointHoyde, clickPoint);
+  }, [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));
+  };
 
-    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 />
-        </RMap>
-    );
+  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 && (
+        <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>
+      )}
+    </RMap>
+  );
 };
 
 function MapFlyTo({ lng, lat }: { lng: number; lat: number }) {
-    const map = useMap();
+  const map = useMap();
 
-    useEffect(() => {
-        map.flyTo({ center: [lng, lat], zoom: 20, speed: 10 });
-    }, [lng, lat, map]);
+  useEffect(() => {
+    map.flyTo({ center: [lng, lat], zoom: 20, speed: 10 });
+  }, [lng, lat, map]);
 
-    return null;
+  return null;
 }
 
 const transformRequest: RequestTransformFunction = (url) => {
-    if (!url.startsWith(KVP_BASE_URL)) {
-        return { url };
-    }
+  if (!url.startsWith(KVP_BASE_URL)) {
+    return { url };
+  }
 
-    const apiKey = import.meta.env.VITE_API_KEY;
-    const separator = url.includes('?') ? '&' : '?';
-    return { url: `${url}${separator}api_key=${encodeURIComponent(apiKey)}` };
+  const apiKey = import.meta.env.VITE_API_KEY;
+  const separator = url.includes('?') ? '&' : '?';
+  return { url: `${url}${separator}api_key=${encodeURIComponent(apiKey)}` };
 };