Merge branch 'feature/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: 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,
         );
 
     });

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