diff --git a/src/components/map/base-map.js b/src/components/map/base-map.js new file mode 100644 index 00000000..6bb640ce --- /dev/null +++ b/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( + + {baseMap && } + + ); +}; \ No newline at end of file diff --git a/src/components/map/map.js b/src/components/map/map.js index 340e52e1..941a979f 100644 --- a/src/components/map/map.js +++ b/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 - ? - : - } + ); diff --git a/src/components/trays/settings/basemap.js b/src/components/trays/settings/basemap.js new file mode 100644 index 00000000..cf03b8ed --- /dev/null +++ b/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 ( + + + + + + Basemaps + + + { baseMap && svg': { + zIndex: 2, + position: 'absolute', + top: '-8px', + right: '-8px', + bgcolor: 'background.surface', + borderRadius: '50%', + }, + }, + }} + > + {BasemapList.map((basemap) => ( + + } + sx={{padding: '0px'}}/> + + {basemap.title} + + ))} + } + + + ); +} \ No newline at end of file diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js index 1cb45672..7d56494f 100644 --- a/src/components/trays/settings/index.js +++ b/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 = ; @@ -11,5 +12,6 @@ export const title = 'Settings'; export const trayContents = () => ( + -); +); \ No newline at end of file diff --git a/src/context/map-context.js b/src/context/map-context.js index 229ec426..ddd2b354 100644 --- a/src/context/map-context.js +++ b/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 ( { swapLayers, removeLayer, layerTypes, + baseMap, + setBaseMap, makeAllRasterLayersInvisible, setLayerOpacity, }} diff --git a/src/images/basemaps/CartoDB-Positron.png b/src/images/basemaps/CartoDB-Positron.png new file mode 100644 index 00000000..9755aa49 Binary files /dev/null and b/src/images/basemaps/CartoDB-Positron.png differ diff --git a/src/images/basemaps/USGS-US-Imagery.png b/src/images/basemaps/USGS-US-Imagery.png new file mode 100644 index 00000000..ec2e62c0 Binary files /dev/null and b/src/images/basemaps/USGS-US-Imagery.png differ diff --git a/src/images/basemaps/USGS-US-Topo.png b/src/images/basemaps/USGS-US-Topo.png new file mode 100644 index 00000000..a8cd0310 Binary files /dev/null and b/src/images/basemaps/USGS-US-Topo.png differ diff --git a/src/utils/map-utils.js b/src/utils/map-utils.js index 6ad857d3..2d29f156 100644 --- a/src/utils/map-utils.js +++ b/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) => { } } }); -}; \ No newline at end of file +}; + +// 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 U.S. Geological Survey', + title: 'USGS Topo', + thumbnail: USGSTopo + }, + {url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}', + attribution: 'Tiles courtesy of the U.S. Geological Survey', + title: 'USGS Imagery Topo', + thumbnail: USGSImagery + }, + {url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', + attribution: '© OpenStreetMap contributors © CARTO', + title: 'CartoDB-Positron', + thumbnail: CartoDBPositron + } +]; \ No newline at end of file