Add map 3840x1440

web/src/cities/result/Result.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, Resource } from "solid-js";
+import { Component, createSignal, Resource, Show } from "solid-js";
 
 import "../../css/Result.css"
 import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
@@ -11,7 +11,7 @@ export const Result: Component<{
     result: Resource<QueryResult>
 }> = ({ result: resultResource }) => {
     const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
-    type ResultView = "text" | "map";
+    type ResultView = "text" | "map_1920x1080" | "map_3840x1440";
     const [getResultView, setResultView] = createSignal<ResultView>("text");
 
     const cityData = () =>
@@ -34,8 +34,15 @@ export const Result: Component<{
                     <input
                         type="button"
                         class="secondary"
-                        value="map"
-                        onClick={() => setResultView("map")}
+                        value="map 1920x1080"
+                        onClick={() => setResultView("map_1920x1080")}
+                    />
+                    &nbsp; | &nbsp;
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="map 3840x1440"
+                        onClick={() => setResultView("map_3840x1440")}
                     />
                 </span>
                 <span style={{ visibility: getResultView() === "text" ? "visible" : "hidden" }}>
@@ -43,15 +50,20 @@ export const Result: Component<{
                 </span>
             </div>
             <div class={getResultView() === "text" ? "result-container" : ""}>
-                { getResultView() === "text"
-                    ? cityData().map(([city, data]) =>
-                        <CityResult
-                            city={city}
-                            query={resultResource()!.query}
-                            result={data}
-                        />)
-                    : <MapView data={cityData} />
-                }
+                <Show when={getResultView() === "text"}>
+                    {cityData().map(([city, data]) =>
+                    <CityResult
+                        city={city}
+                        query={resultResource()!.query}
+                        result={data}
+                    />)}
+                </Show>
+                <Show when={getResultView() === "map_1920x1080"}>
+                    <MapView type="map_1920x1080" data={cityData} />
+                </Show>
+                <Show when={getResultView() === "map_3840x1440"}>
+                    <MapView type="map_3840x1440" data={cityData} />
+                </Show>
             </div>
         </div>
     );