h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add boundary box

Browse Source
This commit is contained in:
ReiMerc 2023-02-09 11:05:56 +01:00
parent c44dac48a1
commit 30c3adea17
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/main.ts
View File

@ -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(

10
frontend/style.css
View File

@ -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;
}