diff --git a/frontend/index.html b/frontend/index.html index 03bd293..67c4207 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -29,6 +29,7 @@
+Postnummer ikke fundet
diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 43070ff..7cc86fd 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -6,10 +6,18 @@ import { Tooltip } from "./Tooltip"; const tooltip = new Tooltip(document.getElementById("tooltip")!); +type Square = { + x1: number, + y1: number, + x2: number, + y2: number, +}; + type ZipCodeReverseResponse = { nr: number | null; navn: string; visueltcenter: number[]; + bbox: number[]; }; async function fetchZipCode({ @@ -45,6 +53,7 @@ function displayZipCode( zipCode: number | null, name: string | null, center: Coordinate | null, + boundary: Sqaure | null, ) { element.innerHTML = zipCode === null @@ -66,11 +75,28 @@ function displayZipCode( height: mapImg.clientHeight, }; + // Draw dot const position = convertCoordinateToPixels(center, mapSize); const rect = document.getElementById("map")!.getBoundingClientRect(); dot.style.display = "block"; dot.style.left = position.x + rect.left + "px"; dot.style.top = position.y + rect.top + document.documentElement.scrollTop + "px"; + + // Draw boundary + if (!boundary) return; + + const topleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize); + const bottomright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize); + + console.log(rect); + + const boundaryElem = document.getElementById("boundary"); + boundaryElem.style.left = topleft.x + rect.left + "px"; + boundaryElem.style.top = topleft.y + rect.top + "px"; + //boundaryElem.style.width = bottomright.x - rect.x + "px"; + //boundaryElem.style.height = bottomright.y - rect.y + "px"; + boundaryElem.style.right = bottomright.x + (innerWidth - rect.right) + "px"; + boundaryElem.style.bottom = bottomright.y + (innerHeight - rect.bottom) + "px"; } function setupMap( @@ -97,6 +123,7 @@ function setupMap( response.nr, response.navn, response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null, + response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null, ); }); }; @@ -117,6 +144,7 @@ function setupMap( response.nr, response.navn, response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null, + response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null, ); }); @@ -158,6 +186,7 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) { data.length ? parseInt(data[0]["nr"]) : null, data.length ? data[0]["navn"] : null, data.length ? { longitude: data[0]["visueltcenter"][0], latitude: data[0]["visueltcenter"][1] } : null, + data.length ? { x1: data[0]["bbox"][0], y1: data[0]["bbox"][1], x2: data[0]["bbox"][2], y2: data[0]["bbox"][3] } : null, ); }); diff --git a/frontend/style.css b/frontend/style.css index fc82d9a..7cf10bd 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -203,6 +203,14 @@ code { transition: opacity 0.2s; } +#boundary { + position: absolute; + opacity: 0.5; + background-color: var(--brand); + border: 1px dashed var(--brand-700); + pointer-events: none; +} + @media screen and (max-width: 1000px) { main { width: 100%;