Attempt adding boundaries

frontend/index.html

@@ -29,6 +29,7 @@
             </form>
             <img src="assets/map.jpg" id="map">
             <div id="dot"></div>
+            <div id="boundary"></div>
             <div id="info">
                 <p id="zip-code">Postnummer ikke fundet</p>
                 <p id="mouse-position"></p>

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,
         );
 
     });

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%;