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..7e61020 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: Square | null, ) { element.innerHTML = zipCode === null @@ -66,11 +75,24 @@ 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 bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize); + const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize); + + const boundaryElem = document.getElementById("boundary")!; + boundaryElem.style.left = bottomleft.x + rect.left + "px"; + boundaryElem.style.top = topright.y + rect.top + document.documentElement.scrollTop + "px"; + boundaryElem.style.width = topright.x - bottomleft.x + "px"; + boundaryElem.style.height = bottomleft.y - topright.y + document.documentElement.scrollTop + "px"; } function setupMap( @@ -97,6 +119,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 +140,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 +182,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..f90ba39 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -182,14 +182,16 @@ code { } #dot { - width: 15px; - height: 15px; + width: 16px; + height: 16px; border-radius: 50%; border: 2px solid black; background-color: var(--brand); filter: drop-shadow(1px 1px 2px black); + transform: translate(-8px, -8px); position: absolute; display: none; + z-index: 2; } #tooltip { @@ -203,6 +205,14 @@ code { transition: opacity 0.2s; } +#boundary { + position: absolute; + background-color: var(--brand); + background-color: rgba(146, 38, 85, 0.3); + border: 1px dashed var(--brand); + pointer-events: none; +} + @media screen and (max-width: 1000px) { main { width: 100%;