From c44dac48a1ac21e54cd7a45d710a2eaa0337e4ae Mon Sep 17 00:00:00 2001 From: ReiMerc Date: Thu, 9 Feb 2023 10:03:36 +0100 Subject: [PATCH 1/2] Attempt adding boundaries --- frontend/index.html | 1 + frontend/src/main.ts | 29 +++++++++++++++++++++++++++++ frontend/style.css | 8 ++++++++ 3 files changed, 38 insertions(+) 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%; From 30c3adea1747ff71bdd1329a3f9c316a538fa6be Mon Sep 17 00:00:00 2001 From: ReiMerc Date: Thu, 9 Feb 2023 11:05:56 +0100 Subject: [PATCH 2/2] Add boundary box --- frontend/src/main.ts | 20 ++++++++------------ frontend/style.css | 10 ++++++---- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 7cc86fd..7e61020 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -53,7 +53,7 @@ function displayZipCode( zipCode: number | null, name: string | null, center: Coordinate | null, - boundary: Sqaure | null, + boundary: Square | null, ) { element.innerHTML = zipCode === null @@ -85,18 +85,14 @@ function displayZipCode( // 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); + const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize); + const topright = 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"; + 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( diff --git a/frontend/style.css b/frontend/style.css index 7cf10bd..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 { @@ -205,9 +207,9 @@ code { #boundary { position: absolute; - opacity: 0.5; background-color: var(--brand); - border: 1px dashed var(--brand-700); + background-color: rgba(146, 38, 85, 0.3); + border: 1px dashed var(--brand); pointer-events: none; }