Feature/basemaps

src/components/map/base-map.js

@@ -0,0 +1,17 @@
+import { React, Fragment } from "react";
+import { TileLayer } from 'react-leaflet';
+import {
+    useLayers,
+  } from '@context';
+
+export const BaseMap = () => {
+    //const { darkMode } = useSettings();
+    const { baseMap } = useLayers();
+
+    return(
+        <Fragment>
+           {baseMap && <TileLayer url={baseMap.url}
+                      attribution={baseMap.attribution} />}
+        </Fragment>
+    );
+};

src/components/map/map.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { MapContainer, TileLayer } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import { DefaultLayers } from './default-layers';
+import { BaseMap } from './base-map';
 import {
   useLayers,
-  useSettings,
 } from '@context';
 import 'leaflet/dist/leaflet.css';
 
-const DEFAULT_CENTER = [30.0, -73.0];
+const DEFAULT_CENTER = [30.0, -90.0];
 
 export const Map = () => {
-    const { darkMode } = useSettings();
+    //const { darkMode } = useSettings();
     const {
       setMap
     } = useLayers();
@@ -23,10 +23,7 @@ export const Map = () => {
         scrollWheelZoom={true}
         ref={setMap}
         style={{ height: '100vh', width:'100wh' }}>
-          { darkMode.enabled
-            ? <TileLayer url={ `https://api.mapbox.com/styles/v1/mvvatson/clvu3inqs05v901qlabcfhxsr/tiles/256/{z}/{x}/{y}@2x?access_token=${ process.env.REACT_APP_MAPBOX_TOKEN }` } />
-            : <TileLayer url={ `https://api.mapbox.com/styles/v1/mvvatson/clvu2u7iu061901ph15n55v2e/tiles/256/{z}/{x}/{y}@2x?access_token=${ process.env.REACT_APP_MAPBOX_TOKEN }` } />
-          }
+          <BaseMap />
           <DefaultLayers/>
       </MapContainer>
     );

src/components/trays/settings/basemap.js

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Popover } from '@mui/material';
+import { 
+    Box,
+    FormLabel,
+    IconButton,
+    Radio,
+    radioClasses,
+    RadioGroup,
+    Sheet,
+    Stack,
+    Typography } from '@mui/joy';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import { Map } from '@mui/icons-material';
+import { useLayers } from '@context';
+import { BasemapList } from '@utils/map-utils';
+import { useLocalStorage } from '@hooks';
+
+export function BaseMaps() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const { baseMap, setBaseMap } = useLayers();
+  const [storedValue, setStoredValue] = useLocalStorage('basemap', '');
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const changeBaseMap = (event) => {
+    const basemapTitle = event.target.value;
+    const selectedBasemap = BasemapList.filter((map) => map.title === basemapTitle);
+    if (selectedBasemap.length === 1) {
+      setBaseMap(selectedBasemap[0]);
+      setStoredValue(selectedBasemap[0].title);
+    }
+  };
+
+  React.useEffect(() => {
+    if (storedValue) {
+      const valueList = BasemapList.filter((map) => map.title === storedValue);
+      if (valueList.length > 0) {}
+        setBaseMap(valueList[0]);
+    }
+    else {
+      setBaseMap(BasemapList[0]);
+    }
+  }, []);
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      gap={ 2 }
+    >
+      <IconButton aria-describedby={id} variant="outlined"  size="lg" onClick={handleClick}>
+        <Map />
+      </IconButton>
+      <Typography level="title-md">
+          Basemaps
+        </Typography>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+      >
+        { baseMap && <RadioGroup
+            aria-label="platform"
+            overlay
+            name="platform"
+            value = {baseMap.title}
+            sx={{
+                flexDirection: 'row',
+                gap: 2,
+                margin: '20px',
+                [`& .${radioClasses.checked}`]: {
+                [`& .${radioClasses.action}`]: {
+                    inset: -1,
+                    border: '3px solid',
+                    borderColor: 'primary.500',
+                },
+                },
+                [`& .${radioClasses.radio}`]: {
+                display: 'contents',
+                '& > svg': {
+                    zIndex: 2,
+                    position: 'absolute',
+                    top: '-8px',
+                    right: '-8px',
+                    bgcolor: 'background.surface',
+                    borderRadius: '50%',
+                },
+                },
+            }}
+            >
+            {BasemapList.map((basemap) => (
+                <Sheet
+                key={basemap.title}
+                variant="outlined"
+                sx={{
+                    borderRadius: 'md',
+                    boxShadow: 'sm',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 1,
+                    p: 1,
+                    minWidth: 100,
+                }}
+                >
+                <Radio id={basemap.title} value={basemap.title} onChange={changeBaseMap} checkedIcon={<CheckCircleRoundedIcon />} 
+                    sx={{padding: '0px'}}/>
+                <Box
+                    component="img"
+                    sx={{maxWidth: 120, alignSelf: 'center'}}
+                    alt={basemap.title}
+                    src={basemap.thumbnail}
+                />
+                 <FormLabel htmlFor={basemap.title}>{basemap.title}</FormLabel>
+                </Sheet>
+            ))}
+            </RadioGroup>}
+        </Popover>
+    </Stack>
+  );
+}

src/components/trays/settings/index.js

@@ -3,6 +3,7 @@ import { Stack } from '@mui/joy';
 import { Tune as SettingsIcon } from '@mui/icons-material';
 
 import { DarkModeToggle } from './dark-mode';
+import { BaseMaps } from './basemap';
 
 export const icon = <SettingsIcon />;
 
@@ -11,5 +12,6 @@ export const title = 'Settings';
 export const trayContents = () => (
   <Stack gap={ 2 } p={ 2 }>
     <DarkModeToggle />
+    <BaseMaps />
   </Stack>
-);
+);

src/context/map-context.js

@@ -7,6 +7,7 @@ import {
   Air as WindVelocityIcon,
   Water as WaterLevelIcon,
   BlurOn as WaterSurfaceIcon,
+  //SettingsTwoTone,
   Flood as FloodIcon,
 } from '@mui/icons-material';
 
@@ -111,6 +112,8 @@ export const LayersProvider = ({ children }) => {
     setDefaultModelLayers([...newLayers]);
   };
 
+  const [baseMap, setBaseMap] = React.useState();
+
 
   return (
     <LayersContext.Provider
@@ -127,6 +130,8 @@ export const LayersProvider = ({ children }) => {
         swapLayers,
         removeLayer,
         layerTypes,
+        baseMap,
+        setBaseMap,
         makeAllRasterLayersInvisible,
         setLayerOpacity,
       }}

src/utils/map-utils.js

@@ -1,12 +1,9 @@
-//import { useLayers } from '@context';
 import locationIcon from '@images/location_searching_FILL0_wght400_GRAD0_opsz24.png';
 
-/* const {
-  defaultModelLayers,
-  setDefaultModelLayers,
-  filteredModelLayers,
-  setFilteredModelLayers
-  } = useLayers(); */
+// import basemap thumbnails
+import USGSTopo from '@images/basemaps/USGS-US-Topo.png';
+import USGSImagery from '@images/basemaps/USGS-US-Imagery.png';
+import CartoDBPositron from '@images/basemaps/CartoDB-Positron.png';
 
 
 // function to add a location marker where ever and obs mod layer
@@ -41,4 +38,24 @@ export const markUnclicked = (map, id) => {
       }
     }
   });
-};
+};
+
+// add any new basemaps here
+// TODO: need to figure out how to deal with Dark Mode
+export const BasemapList = [
+  {url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}',
+   attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>',
+   title: 'USGS Topo',
+   thumbnail: USGSTopo
+  },
+  {url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
+    attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>',
+    title: 'USGS Imagery Topo',
+    thumbnail: USGSImagery
+  },
+  {url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+    title: 'CartoDB-Positron',
+    thumbnail: CartoDBPositron
+  }
+];