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, zipCode: number | null,
name: string | null, name: string | null,
center: Coordinate | null, center: Coordinate | null,
boundary: Sqaure | null, boundary: Square | null,
) { ) {
element.innerHTML = element.innerHTML =
zipCode === null zipCode === null
@ -85,18 +85,14 @@ function displayZipCode(
// Draw boundary // Draw boundary
if (!boundary) return; if (!boundary) return;
const topleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize); const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize);
const bottomright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize); const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize);
console.log(rect); const boundaryElem = document.getElementById("boundary")!;
boundaryElem.style.left = bottomleft.x + rect.left + "px";
const boundaryElem = document.getElementById("boundary"); boundaryElem.style.top = topright.y + rect.top + document.documentElement.scrollTop + "px";
boundaryElem.style.left = topleft.x + rect.left + "px"; boundaryElem.style.width = topright.x - bottomleft.x + "px";
boundaryElem.style.top = topleft.y + rect.top + "px"; boundaryElem.style.height = bottomleft.y - topright.y + document.documentElement.scrollTop + "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( function setupMap(

10
frontend/style.css
View File

@ -182,14 +182,16 @@ code {
} }
#dot { #dot {
width: 15px; width: 16px;
height: 15px; height: 16px;
border-radius: 50%; border-radius: 50%;
border: 2px solid black; border: 2px solid black;
background-color: var(--brand); background-color: var(--brand);
filter: drop-shadow(1px 1px 2px black); filter: drop-shadow(1px 1px 2px black);
transform: translate(-8px, -8px);
position: absolute; position: absolute;
display: none; display: none;
z-index: 2;
} }
#tooltip { #tooltip {
@ -205,9 +207,9 @@ code {
#boundary { #boundary {
position: absolute; position: absolute;
opacity: 0.5;
background-color: var(--brand); 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; pointer-events: none;
} }