- Fixed rendering of EPSG:27700 Projection maps

- Added useCustomCRSFor27700Projection() hook and pass crs prop into MapContainer
- When map is not using a useCustomTileLayer (basically NOT mappingProvider !== MappingProvider.OPEN_STREET_MAPS && mapLayerAttributes?.layerParameters?.tileMatrixSet === ProjectionValue.ESPG_27700), L.CRS.EPSG3857 is passed in
- When map is switch between projects a full screen refresh is required
- Values of Driving Profile, Mapping Provider, Map Layer and Zoom are now saved in local storage so full app refresh can happen properly

package.json

@@ -19,15 +19,19 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
+    "@types/proj4": "2.5.5",
+    "@types/proj4leaflet": "1.0.10",
     "compression": "1.7.4",
-    "cookie-session": "^2.0.0",
+    "cookie-session": "2.0.0",
     "express": "4.18.2",
     "helmet": "7.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lodash-es": "4.17.21",
     "loglevel": "1.8.1",
     "luxon": "3.4.4",
+    "proj4": "2.10.0",
+    "proj4leaflet": "1.0.2",
     "query-string": "8.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/atoms/game-atoms.ts

@@ -1,9 +1,10 @@
 import { atom, GetCallback, GetRecoilValue, RecoilState, RecoilValueReadOnly, selector, selectorFamily } from "recoil";
-import { StoredValue } from "../util/ui-stored-values";
+import { initialValueFor, saveValueFor, StoredValue } from "../util/ui-stored-values";
 import { GAME_DEFAULTS, GameData } from "../models/game-models";
 import { Player } from "../models/player-models";
 import { defaultZoom } from "../models/route-models";
 import { LatLngTuple } from "leaflet";
+import { log } from "../util/logging-config";
 
 
 export const gameState: RecoilState<GameData> = atom({
@@ -43,5 +44,13 @@ export const mapClickPositionState: RecoilState<LatLngTuple> = atom({
 
 export const mapZoomState: RecoilState<number> = atom({
     key: StoredValue.MAP_ZOOM,
-    default: defaultZoom,
+    default: +initialValueFor(StoredValue.MAP_ZOOM, defaultZoom),
+    effects: [
+        ({onSet}) => {
+            onSet(mapZoom => {
+                log.info(StoredValue.MAP_ZOOM, "set to:", mapZoom);
+                saveValueFor(StoredValue.MAP_ZOOM, mapZoom);
+            });
+        },
+    ],
 });

src/atoms/os-maps-atoms.ts

@@ -1,10 +1,10 @@
 import { atom, RecoilState } from "recoil";
-import { StoredValue } from "../util/ui-stored-values";
+import { initialValueFor, saveValueFor, StoredValue } from "../util/ui-stored-values";
 import { log } from "../util/logging-config";
-import { refreshAccessToken, refreshAccessTokenRaw } from "../data-services/os-maps-data-services";
+import { refreshAccessTokenRaw } from "../data-services/os-maps-data-services";
 import { AccessTokenResponse, MapLayer } from "../models/os-maps-models";
 import { MappingProvider } from "../models/route-models";
-import L from "leaflet";
+import { enumForKey } from "../util/enums";
 
 export const accessTokenState: RecoilState<AccessTokenResponse> = atom({
     key: StoredValue.ACCESS_TOKEN,
@@ -22,16 +22,31 @@ export const accessTokenState: RecoilState<AccessTokenResponse> = atom({
 
 export const mapLayerState: RecoilState<MapLayer> = atom({
     key: StoredValue.MAP_LAYER,
-    default: null,
-});
-
-export const mapState: RecoilState<L.Map> = atom({
-    key: StoredValue.MAR,
-    default: null,
+    default: enumForKey(MapLayer, initialValueFor(StoredValue.MAP_LAYER)),
+    effects: [
+        ({onSet}) => {
+            onSet(mapLayer => {
+                log.info(StoredValue.MAP_LAYER, "set to:", mapLayer);
+                saveValueFor(StoredValue.MAP_LAYER, mapLayer);
+            });
+        },
+    ],
 });
 
 export const mappingProviderState: RecoilState<MappingProvider> = atom({
     key: StoredValue.MAPPING_PROVIDER,
-    default: null,
+    default: enumForKey(MappingProvider, initialValueFor(StoredValue.MAPPING_PROVIDER)),
+    effects: [
+        ({onSet}) => {
+            onSet(mappingProvider => {
+                log.info(StoredValue.MAPPING_PROVIDER, "set to:", mappingProvider);
+                saveValueFor(StoredValue.MAPPING_PROVIDER, mappingProvider);
+            });
+        },
+    ],
 });
 
+export const customTileSelectedState = atom({
+    key: StoredValue.CUSTOM_TILE_SELECTION,
+    default: true,
+});

src/atoms/route-atoms.ts

@@ -1,14 +1,15 @@
 import { atom, atomFamily, RecoilState } from "recoil";
-import { StoredValue } from "../util/ui-stored-values";
+import { initialValueFor, saveValueFor, StoredValue } from "../util/ui-stored-values";
 import { log } from "../util/logging-config";
 import { removeToJSONFrom } from "../mappings/atom-mappings";
 import { queryDirections } from "../data-services/route-data-services";
 import {
-  DirectionsResponse,
-  Profile,
-  RouteDirectionsRequest,
-  SerializableRouteDirectionsRequest
+    DirectionsResponse,
+    Profile,
+    RouteDirectionsRequest,
+    SerializableRouteDirectionsRequest
 } from "../models/route-models";
+import { enumForKey } from "../util/enums";
 
 export const routeDirectionsState: (routeDirectionsRequest: SerializableRouteDirectionsRequest) => RecoilState<DirectionsResponse> = atomFamily({
   key: StoredValue.ROUTE_DIRECTIONS,
@@ -31,7 +32,15 @@ export const routeDirectionsState: (routeDirectionsRequest: SerializableRouteDir
 
 export const profileState: RecoilState<Profile> = atom({
   key: StoredValue.DRIVING_PROFILE,
-  default: null,
+  default: enumForKey(Profile, initialValueFor(StoredValue.DRIVING_PROFILE, Profile.DRIVING_CAR)),
+  effects: [
+    ({onSet}) => {
+      onSet(mapZoom => {
+        log.info(StoredValue.DRIVING_PROFILE, "set to:", mapZoom);
+        saveValueFor(StoredValue.DRIVING_PROFILE, mapZoom);
+      });
+    },
+  ],
 });
 
 

src/components/App.tsx

@@ -19,6 +19,7 @@ import { DiceRoller } from "./DiceRoller";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 export default function App() {
+
     const theme = createTheme({
         components: {
             MuiButton: {
@@ -30,6 +31,7 @@ export default function App() {
             },
         },
     });
+
     return (
         <RecoilRoot>
             <ThemeProvider theme={theme}>

src/components/CheckBoxOption.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { customTileSelectedState } from "../atoms/os-maps-atoms";
+
+export function TileTypeSelection() {
+    const [tileType, setTileType] = useRecoilState(customTileSelectedState);
+
+    return (
+        <FormControlLabel
+            control={<Checkbox checked={tileType} onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                setTileType(event.target.checked);
+            }}/>}
+            label="Use Custom Tle Layer"
+        />
+    );
+}

src/components/DiceRoller.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Grid, Stack } from "@mui/material";
 import CasinoIcon from '@mui/icons-material/Casino';
-import { GameTurnState } from '../models/game-models';
+import { colours, GameTurnState } from '../models/game-models';
 import { Player } from "../models/player-models";
 import { useRecoilValue } from "recoil";
 import { log } from "../util/logging-config";
@@ -44,6 +44,7 @@ export function DiceRoller() {
     }
 
 
+
     return (
         <Grid pt={2} container alignItems={"center"} spacing={2} mb={2}>
             <Grid item xs={12} xl={6}>
@@ -54,10 +55,10 @@ export function DiceRoller() {
                             disabled={isRolling || gameState.gameData.gameTurnState !== GameTurnState.ROLL_DICE}
                             sx={{
                                 '&': {
-                                    backgroundColor: '#453c90',
+                                    backgroundColor: colours.osMapsPurple,
                                 },
                                 '&:hover': {
-                                    backgroundColor: '#d40058',
+                                    backgroundColor: colours.osMapsPink,
                                 },
                             }}>{isRolling ? `${playerName} Rolling...` : `${playerName} Roll Dice`}</Button>
                     <Button fullWidth variant="contained"
@@ -66,10 +67,10 @@ export function DiceRoller() {
                             disabled={gameState.gameData.gameTurnState !== GameTurnState.DICE_ROLLED}
                             sx={{
                                 '&': {
-                                    backgroundColor: '#453c90',
+                                    backgroundColor: colours.osMapsPurple,
                                 },
                                 '&:hover': {
-                                    backgroundColor: '#d40058',
+                                    backgroundColor: colours.osMapsPink,
                                 },
                             }}>{`${playerName} Turn Complete`}</Button>
                 </Stack>

src/components/MapLayerSelector.tsx

@@ -3,11 +3,10 @@ import { useEffect } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import { enumValues } from "../util/enums";
 import { MappingProvider } from "../models/route-models";
-import { Stack, TextField } from "@mui/material";
+import { TextField } from "@mui/material";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { log } from "../util/logging-config";
 import { mapLayerState, mappingProviderState } from "../atoms/os-maps-atoms";
-import TickCrossIcon from "./Tick";
 import { MapLayer, MapLayerAttributes, MapLayers } from "../models/os-maps-models";
 
 export default function MapLayerSelector() {
@@ -18,7 +17,7 @@ export default function MapLayerSelector() {
     useEffect(() => {
         if (!mapLayer) {
             log.info("ProfileSelector:mapLayer:initialised to:", mapLayer);
-            setMapLayer(MapLayer.LIGHT_3857);
+            setMapLayer(MapLayer.LEISURE_27700);
         }
     }, []);
 
@@ -38,12 +37,7 @@ export default function MapLayerSelector() {
                        onChange={handleChange}>
                 {enumValues(MapLayer).map((value, index) => {
                     const attribute: MapLayerAttributes = MapLayers[value];
-                    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>;
+                    return <MenuItem key={attribute.name} value={attribute.name}>{attribute.displayName}</MenuItem>;
                 })}
             </TextField>
     );

src/components/MapPositions.tsx

@@ -1,5 +1,5 @@
 import { Player } from "../models/player-models";
-import { SetterOrUpdater, useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilValue } from "recoil";
 import { LatLngTuple } from "leaflet";
 import { Stack } from "@mui/material";
 import { formatLatLong, toLatLngFromLatLngTuple } from "../mappings/route-mappings";