- Fixed Menu Text and Tick/Cross in MapLayerSelector

nbarrett · Jan 19, 2024 · 48749f5 · 48749f5
1 parent 6b109f0
commit 48749f5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/components/MapLayerSelector.tsx b/src/components/MapLayerSelector.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import { enumValues } from "../util/enums";
 import { MappingProvider } from "../models/route-models";
-import { TextField } from "@mui/material";
+import { Stack, TextField } from "@mui/material";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { log } from "../util/logging-config";
 import { mapLayerState, mappingProviderState } from "../atoms/os-maps-atoms";
@@ -38,8 +38,11 @@ export default function MapLayerSelector() {
                        onChange={handleChange}>
                 {enumValues(MapLayer).map((value, index) => {
                     const attribute: MapLayerAttributes = MapLayers[value];
-                    return <MenuItem key={attribute.name} value={attribute.name}>{attribute.style}
-                        <TickCrossIcon isTick={attribute.renders}/>
+                    return <MenuItem key={attribute.name} value={attribute.name}>
+                        <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                            <div>{attribute.displayName}</div>
+                            <TickCrossIcon isTick={attribute.renders}/>
+                        </Stack>
                     </MenuItem>;
                 })}
             </TextField>

diff --git a/src/components/Tick.tsx b/src/components/Tick.tsx
@@ -3,7 +3,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import ClearIcon from '@mui/icons-material/Clear';
 
 const TickCrossIcon = ({isTick}) => {
-    return isTick ? <CheckIcon sx={{ml: 2}} color="success"/> : <ClearIcon sx={{ml: 2}} color="error"/>;
+    return isTick ? <CheckIcon color="success"/> : <ClearIcon color="error"/>;
 };
 
 export default TickCrossIcon;
diff --git a/src/models/os-maps-models.ts b/src/models/os-maps-models.ts
@@ -64,7 +64,7 @@ export const MapLayers: { [key in MapLayer]: MapLayerAttributes } = {
         tileMatrixSet: "EPSG:27700",
         minZoom: 0,
         maxZoom: 13,
-        renders: true
+        renders: false
     },
     LIGHT_3857: {
         name: MapLayer.LIGHT_3857,