Added map quality option and selector in map select screen

src/components/map/MapInteraction.js

@@ -32,9 +32,8 @@ function MapInteraction({
 }) {
   let mapSourceMap = map;
   if (map && map.type === "file") {
-    // if no file loaded but we have other resolutions
-    if (map.resolutions.length > 0 && !map.file) {
-      mapSourceMap = map.resolutions[map.resolutions.length - 1];
+    if (map.resolutions && map.quality !== "original") {
+      mapSourceMap = map.resolutions[map.quality];
     }
   }
 

src/components/map/MapSettings.js

@@ -15,6 +15,14 @@ import { isEmpty } from "../../helpers/shared";
 
 import Divider from "../Divider";
 
+const qualitySettings = [
+  { id: "low", name: "Low" },
+  { id: "medium", name: "Medium" },
+  { id: "high", name: "High" },
+  { id: "ultra", name: "Ultra High" },
+  { id: "original", name: "Original" },
+];
+
 function MapSettings({
   map,
   mapState,
@@ -102,6 +110,26 @@ function MapSettings({
               Show Grid
             </Label>
           </Flex>
+          <Flex my={2} sx={{ alignItems: "center" }}>
+            <Box sx={{ width: "50%" }}>
+              <Label>Map Quality</Label>
+              <Select
+                my={1}
+                value={!mapEmpty && map.quality}
+                disabled={mapEmpty || map.type === "default"}
+                onChange={(e) => onSettingsChange("quality", e.target.value)}
+              >
+                {qualitySettings.map((quality) => (
+                  <option key={quality.id} value={quality.id}>
+                    {quality.name}
+                  </option>
+                ))}
+              </Select>
+            </Box>
+            <Label sx={{ width: "50%" }} ml={2}>
+              Size: XX
+            </Label>
+          </Flex>
           <Divider fill />
           <Box my={2} sx={{ flexGrow: 1 }}>
             <Label>Allow Others to Edit</Label>

src/components/map/MapTile.js

@@ -21,7 +21,7 @@ function MapTile({
   const isDefault = map.type === "default";
 
   const mapSource = useDataSource(
-    isDefault ? map : map.resolutions.length > 0 ? map.resolutions[0] : map,
+    isDefault ? map : map.resolutions.low ? map.resolutions.low : map,
     defaultMapSources,
     unknownSource
   );