Add extra images for maps

web/src/cities/map/MapView.tsx

@@ -5,11 +5,13 @@ import { drawRotatedImage, getAngleFromString } from "./windAngles";
 import { WindInputs, WindSignals } from "./WindInputs";
 
 import map_1920x1080 from "../../assets/map_1920x1080.webp";
+import map_1920x1080_wind from "../../assets/map_1920x1080_wind.webp";
 import map_3840x1440 from "../../assets/map_3840x1440.webp";
+import map_3840x1440_wind from "../../assets/map_3840x1440_wind.webp";
 import arrowUrl from "../../assets/arrow.webp";
 import { cityCoords } from "../../components/cityCoords";
 
-type MapResolution = "map_1920x1080" | "map_3840x1440";
+type MapResolution = "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
 
 type ResolutionPropsValue = {
     offsetX: number;
@@ -22,8 +24,10 @@ type ResolutionPropsValue = {
 };
 
 const resolutionProps: Record<string, ResolutionPropsValue> = {
-    "map_1920x1080": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080 },
+    "map_1920x1080":        { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: false, map: map_1920x1080 },
+    "map_1920x1080_wind":   { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080_wind },
     "map_3840x1440":        { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: false, map: map_3840x1440 },
+    "map_3840x1440_wind":   { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: true, map: map_3840x1440_wind },
 }
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
@@ -88,7 +92,12 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
     return (
         <>
             <WindInputs signals={windSignals} />
-            <canvas ref={setCanvas} width={props.width+"px"} height={props.height+"px"} />
+            <canvas
+                ref={setCanvas}
+                width={props.width+"px"}
+                height={props.height+"px"}
+                style={{"max-width": "1000px"}}
+            />
         </>
     );
 }

web/src/cities/result/ResultView.tsx

@@ -11,7 +11,7 @@ export const ResultView: Component<{
     result: Resource<QueryResult>
 }> = ({ result: resultResource }) => {
     const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
-    type ResultView = "grid" | "list" | "map_1920x1080" | "map_3840x1440";
+    type ResultView = "grid" | "list" | "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
     const [getResultView, setResultView] = createSignal<ResultView>("grid");
 
     const cityData = () =>
@@ -45,12 +45,26 @@ export const ResultView: Component<{
                         onClick={() => setResultView("map_1920x1080")}
                     />
                     &nbsp; | &nbsp;
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="map 1920x1080 wind"
+                        onClick={() => setResultView("map_1920x1080_wind")}
+                    />
+                    &nbsp; | &nbsp;
                     <input
                         type="button"
                         class="secondary"
                         value="map 3840x1440"
                         onClick={() => setResultView("map_3840x1440")}
                     />
+                    &nbsp; | &nbsp;
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="map 3840x1440 wind"
+                        onClick={() => setResultView("map_3840x1440_wind")}
+                    />
                 </span>
                 <span style={{ visibility: ["grid", "list"].includes(getResultView()) ? "visible" : "hidden" }}>
                     <SelectOrder getter={getOrderKey} setter={setOrderKey} />
@@ -80,9 +94,15 @@ export const ResultView: Component<{
                 <Show when={getResultView() === "map_1920x1080"}>
                     <MapView type="map_1920x1080" data={cityData} />
                 </Show>
+                <Show when={getResultView() === "map_1920x1080_wind"}>
+                    <MapView type="map_1920x1080_wind" data={cityData} />
+                </Show>
                 <Show when={getResultView() === "map_3840x1440"}>
                     <MapView type="map_3840x1440" data={cityData} />
                 </Show>
+                <Show when={getResultView() === "map_3840x1440_wind"}>
+                    <MapView type="map_3840x1440_wind" data={cityData} />
+                </Show>
             </div>
         </div>
     );