From 68decb613c4744354c9c449bca274a64a72cf553 Mon Sep 17 00:00:00 2001
From: Guntis Smaukstelis <gsmaukstelis@evolution.com>
Date: Mon, 22 Jan 2024 23:54:33 +0200
Subject: [PATCH] Use same city coords for station and city view

---
 web/src/cities/map/MapView.tsx                | 23 ++++++++----
 web/src/cities/map/cityCoords.ts              | 35 -------------------
 web/src/{station => components}/cityCoords.ts |  0
 web/src/station/MapResult.tsx                 |  2 +-
 4 files changed, 18 insertions(+), 42 deletions(-)
 delete mode 100644 web/src/cities/map/cityCoords.ts
 rename web/src/{station => components}/cityCoords.ts (100%)

diff --git a/web/src/cities/map/MapView.tsx b/web/src/cities/map/MapView.tsx
index eaf48c0..92acd80 100644
--- a/web/src/cities/map/MapView.tsx
+++ b/web/src/cities/map/MapView.tsx
@@ -1,12 +1,12 @@
 import { Component, createEffect, createSignal, onMount } from "solid-js";
 
 import { ResultKeyVal } from "../../consts";
-import { cityCoords } from "./cityCoords";
 import { drawRotatedImage, getAngleFromString } from "./windAngles";
 import { WindInputs, WindSignals } from "./WindInputs";
 
 import mapUrl from "../../assets/map_1920x1080.webp";
 import arrowUrl from "../../assets/arrow.webp";
+import { cityCoords } from "../../components/cityCoords";
 
 export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
@@ -78,7 +78,10 @@ function drawOnMap(
     coords: [string, {x: number, y: number }, number][],
     windData: [string, string, string, boolean],
 ): void {
-    const size = 80;
+    const boxSize = 80;
+    const offsetX = 90;
+    const offsetY = 120;
+    const scale = 1.35;
 
     const [windDirection, windSpeed, windGusts, roundValues] = windData;
     const [bgImg, arrowImg] = imgArr;
@@ -89,7 +92,13 @@ function drawOnMap(
     // city boxes
     ctx.fillStyle = "#FFFFFF";
     coords.forEach(([, {x, y}, value]) => {
-        ctx.rect(x, y, size, size);
+        const localX = offsetX + x * scale;
+        const localY = offsetY + y * scale;
+
+        ctx.beginPath();
+        ctx.fillStyle = "#FFFFFF";
+        ctx.rect(localX-boxSize/2, localY-boxSize/2, boxSize, boxSize);
+        ctx.fill();
     });
     ctx.fill();
 
@@ -97,12 +106,14 @@ function drawOnMap(
     ctx.font = "bold 30px Rubik";
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.fillStyle = "#000000";
     coords.forEach(([, {x, y}, value]) => {
-        ctx.rect(x, y, size, size);
+        const localX = offsetX + x * scale;
+        const localY = offsetY + y * scale;
+
+        ctx.fillStyle = "#000000";
         const numericValue = roundValues ? Math.round(value) : value;
         const stringValue = numericValue.toString().replace(".", ",");
-        ctx.fillText(stringValue, x + size/2, y + size/2);
+        ctx.fillText(stringValue, localX, localY);
     });
 
     // wind values
diff --git a/web/src/cities/map/cityCoords.ts b/web/src/cities/map/cityCoords.ts
deleted file mode 100644
index 449eb18..0000000
--- a/web/src/cities/map/cityCoords.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export const cityCoords = {
-    "Ainaži": { x: 685, y: 146 },
-    "Alūksne": { x: 1176, y: 294 },
-    "Bauska": { x: 721, y: 608 },
-    "Dagda": { x: 1280, y: 680 },
-    "Daugavgrīva": { x: 640, y: 410 },
-    "Daugavpils": { x: 1140, y: 739 },
-    "Dobele": { x: 550, y: 580 },
-    "Gulbene": { x: 1100, y: 370 },
-    "Jelgava": { x: 620, y: 570 },
-    "Kalnciems": { x: 600, y: 500 },
-    "Kolka": { x: 380, y: 200 },
-    "Kuldīga": { x: 300, y: 470 },
-    "Lielpēči": { x: 780, y: 490 },
-    "Liepāja": { x: 124, y: 638 },
-    "Madona": { x: 1004, y: 432 },
-    "Mērsrags": { x: 480, y: 300 },
-    "Pāvilosta": { x: 160, y: 450 },
-    "Piedruja": { x: 1290, y: 770 },
-    "Priekuļi": { x: 900, y: 320 },
-    "Rēzekne": { x: 1229, y: 544 },
-    "Rīga": { x: 689, y: 430 },
-    "Rucava": { x: 140, y: 710 },
-    "Rūjiena": { x: 870, y: 140 },
-    "Saldus": { x: 383, y: 561 },
-    "Sigulda": { x: 810, y: 380 },
-    "Sīļi": { x: 1050, y: 640 },
-    "Skrīveri": { x: 880, y: 530 },
-    "Skulte": { x: 710, y: 320 },
-    "Stende": { x: 402, y: 400 },
-    "Ventspils": { x: 210, y: 329 },
-    "Vičaki": { x: 270, y: 260},
-    "Zīlāni": { x: 983, y: 581 },
-    "Zosēni": { x: 970, y: 370 },
-};
\ No newline at end of file
diff --git a/web/src/station/cityCoords.ts b/web/src/components/cityCoords.ts
similarity index 100%
rename from web/src/station/cityCoords.ts
rename to web/src/components/cityCoords.ts
diff --git a/web/src/station/MapResult.tsx b/web/src/station/MapResult.tsx
index ff14b08..427eb6d 100644
--- a/web/src/station/MapResult.tsx
+++ b/web/src/station/MapResult.tsx
@@ -1,11 +1,11 @@
 import { Accessor, Component, Setter, createEffect, createResource, createSignal, onMount } from "solid-js";
 
 import { coordToCity } from "./coordToCity";
-import { cityCoords } from "./cityCoords";
 import mapUrl from "../assets/map_1000x570.webp";
 import moment from "moment";
 import { FETCH_DELAY_MS, apiHost, cityList } from "../consts";
 import { LoadingSpinner } from "../components/LoadingSpinner";
+import { cityCoords } from "../components/cityCoords";
 
 export const MapResult: Component<{
     setCity: Setter<string | undefined>,