oppgave2 ferdig

src/components/MapLibreMap.tsx

@@ -1,85 +1,96 @@
 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 { getHoydeFromPunkt } from '../api/getHoydeFromPunkt';
 import { useEffect, useState } from 'react';
 import { Overlay } from './Overlay';
 import DrawComponent from './DrawComponent';
+import { SearchBar, type Address } from './SearchBar';
 
 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 [clickPoint, setClickPoint] = useState<LngLat | undefined>(undefined);
+    const [pointHoyde, setPointHoydeAtPunkt] = useState<number | undefined>(
+        undefined
+    );
 
-  useEffect(() => {
-    console.log(pointHoyde, clickPoint);
-  }, [clickPoint, pointHoyde]);
+    const [address, setAddress] = useState<Address | null>(null);
 
-  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 [clickPoint, setClickPoint] = useState<LngLat | undefined>(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>
-      </Overlay>
-      <DrawComponent />
-    </RMap>
-  );
+    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));
+    };
+
+    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>
+    );
 };
 
 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)}` };
 };

src/components/SearchBar.tsx

@@ -1,88 +1,89 @@
 import { Autocomplete, CircularProgress, TextField } from '@mui/material';
 import { useEffect, useState } from 'react';
+import { getAdresserFromSearchText } from '../api/getAdresserFromSearchText';
 
 export type Address = {
-  PayLoad: {
-    Posisjon: {
-      X: number;
-      Y: number;
+    PayLoad: {
+        Posisjon: {
+            X: number;
+            Y: number;
+        };
+        Text: string;
     };
-    Text: string;
-  };
 };
 
 export const SearchBar = ({
-  setAddress,
+    setAddress,
 }: {
-  setAddress: React.Dispatch<React.SetStateAction<Address | null>>;
+    setAddress: React.Dispatch<React.SetStateAction<Address | null>>;
 }) => {
-  const [open, setOpen] = useState(false);
-  const [options, setOptions] = useState<Address[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searchText, setSearchText] = useState('');
+    const [open, setOpen] = useState(false);
+    const [options, setOptions] = useState<Address[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState('');
 
-  useEffect(() => {
-    if (!searchText) {
-      setOptions([]);
-      setOpen(false);
-      return;
-    }
+    useEffect(() => {
+        if (!searchText) {
+            setOptions([]);
+            setOpen(false);
+            return;
+        }
 
-    const identifier = setTimeout(async () => {
-      setLoading(true);
-      const adresser: Address[] = []; // Kanskje getAdresserFromSearchText kan brukes her..??
-      setOptions(adresser);
-      setLoading(false);
-      setOpen(true);
-    }, 500);
+        const identifier = setTimeout(async () => {
+            setLoading(true);
+            const adresser: Address[] = await getAdresserFromSearchText(searchText); // Kanskje getAdresserFromSearchText kan brukes her..??
+            setOptions(adresser);
+            setLoading(false);
+            setOpen(true);
+        }, 500);
 
-    return () => {
-      clearTimeout(identifier);
-    };
-  }, [searchText]);
+        return () => {
+            clearTimeout(identifier);
+        };
+    }, [searchText]);
 
-  const handleClose = () => {
-    setOpen(false);
-    setOptions([]);
-  };
+    const handleClose = () => {
+        setOpen(false);
+        setOptions([]);
+    };
 
-  return (
-    <Autocomplete
-      sx={{ width: 300, py: 2 }}
-      open={open}
-      onClose={handleClose}
-      getOptionLabel={(option) => option.PayLoad.Text}
-      options={options}
-      loading={loading}
-      inputValue={searchText}
-      onInputChange={(_, newInputValue) => {
-        setSearchText(newInputValue);
-      }}
-      onChange={(_, selectedOption) => {
-        if (selectedOption) {
-          setAddress(selectedOption);
-          setOpen(false);
-        }
-      }}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Adressesøk"
-          slotProps={{
-            input: {
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {loading ? (
-                    <CircularProgress color="inherit" size={20} />
-                  ) : null}
-                  {params.InputProps.endAdornment}
-                </>
-              ),
-            },
-          }}
+    return (
+        <Autocomplete
+            sx={{ width: 300, py: 2 }}
+            open={open}
+            onClose={handleClose}
+            getOptionLabel={(option) => option.PayLoad.Text}
+            options={options}
+            loading={loading}
+            inputValue={searchText}
+            onInputChange={(_, newInputValue) => {
+                setSearchText(newInputValue);
+            }}
+            onChange={(_, selectedOption) => {
+                if (selectedOption) {
+                    setAddress(selectedOption);
+                    setOpen(false);
+                }
+            }}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    label="Adressesøk"
+                    slotProps={{
+                        input: {
+                            ...params.InputProps,
+                            endAdornment: (
+                                <>
+                                    {loading ? (
+                                        <CircularProgress color="inherit" size={20} />
+                                    ) : null}
+                                    {params.InputProps.endAdornment}
+                                </>
+                            ),
+                        },
+                    }}
+                />
+            )}
         />
-      )}
-    />
-  );
+    );
 };