Add dropdown to select map style

frontend/src/components/MapView/Map/index.tsx

@@ -23,7 +23,7 @@ import {
   getLayerMapId,
   isLayerOnView,
 } from 'utils/map-utils';
-import { mapSelector } from 'context/mapStateSlice/selectors';
+import { mapSelector, mapStyleSelector } from 'context/mapStateSlice/selectors';
 import {
   AdminLevelDataLayer,
   AnticipatoryActionLayer,
@@ -40,7 +40,6 @@ import { MapSourceDataEvent, Map as MaplibreMap } from 'maplibre-gl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Panel, leftPanelTabValueSelector } from 'context/leftPanelStateSlice';
-import { mapStyle } from './utils';
 
 interface MapComponentProps {
   setIsAlertFormOpen: Dispatch<SetStateAction<boolean>>;
@@ -52,6 +51,12 @@ type LayerComponentsMap<U extends LayerType> = {
   };
 };
 
+// eslint-disable-next-line react-refresh/only-export-components
+export const fallbackMapStyle = new URL(
+  process.env.REACT_APP_DEFAULT_STYLE ||
+    'https://api.maptiler.com/maps/0ad52f6b-ccf2-4a36-a9b8-7ebd8365e56f/style.json?key=y2DTSu9yWiu755WByJr3',
+);
+
 const componentTypes: LayerComponentsMap<LayerType> = {
   boundary: { component: BoundaryLayer },
   wms: { component: WMSLayer },
@@ -78,11 +83,12 @@ const MapComponent = memo(({ setIsAlertFormOpen }: MapComponentProps) => {
 
   const selectedMap = useSelector(mapSelector);
   const tabValue = useSelector(leftPanelTabValueSelector);
+  const mapStyle = useSelector(mapStyleSelector);
 
   const panelHidden = tabValue === Panel.None;
 
   const [firstSymbolId, setFirstSymbolId] = useState<string | undefined>(
-    'label_airport',
+    undefined,
   );
 
   const fitBoundsOptions = useMemo(
@@ -227,7 +233,7 @@ const MapComponent = memo(({ setIsAlertFormOpen }: MapComponentProps) => {
         bounds: boundingBox,
         fitBoundsOptions: { padding: fitBoundsOptions.padding },
       }}
-      mapStyle={mapStyle.toString()}
+      mapStyle={mapStyle?.url || fallbackMapStyle.toString()}
       onLoad={onMapLoad}
       onClick={mapOnClick}
       maxBounds={maxBounds}

frontend/src/components/MapView/index.tsx

@@ -13,6 +13,7 @@ import {
   loadAvailableDates,
 } from 'context/serverStateSlice';
 import { loadLayerData } from 'context/layers/layer-data';
+import { mapStyleSelector } from 'context/mapStateSlice/selectors';
 import LeftPanel from './LeftPanel';
 import MapComponent from './Map';
 import OtherFeatures from './OtherFeatures';
@@ -28,6 +29,7 @@ const MapView = memo(({ setIsAlertFormOpen }: MapViewProps) => {
   const classes = useStyles();
   // Selectors
   const datesLoading = useSelector(areDatesLoading);
+  const mapStyle = useSelector(mapStyleSelector);
 
   const dispatch = useDispatch();
 
@@ -50,7 +52,10 @@ const MapView = memo(({ setIsAlertFormOpen }: MapViewProps) => {
           <CircularProgress size={100} />
         </div>
       )}
-      <MapComponent setIsAlertFormOpen={setIsAlertFormOpen} />
+      <MapComponent
+        key={mapStyle?.id || '42'}
+        setIsAlertFormOpen={setIsAlertFormOpen}
+      />
     </Box>
   );
 });

frontend/src/components/NavBar/MapStyleSelector/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Button,
+  createStyles,
+  makeStyles,
+  Menu,
+  MenuItem,
+  Typography,
+} from '@material-ui/core';
+import { useSafeTranslation } from 'i18n';
+import { appConfig } from 'config';
+import { get } from 'lodash';
+import { ArrowDropDown, Public } from '@material-ui/icons';
+import { useDispatch, useSelector } from 'react-redux';
+import { mapStyleSelector } from 'context/mapStateSlice/selectors';
+import { MapStyle, setMapStyle } from 'context/mapStateSlice';
+
+const mapStyles: MapStyle[] = get(appConfig.map, 'styles', []);
+
+function MapStyleSelector() {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const { t } = useSafeTranslation();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const mapStyle = useSelector(mapStyleSelector);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleChange = (style: MapStyle): void => {
+    dispatch(setMapStyle(style));
+    handleClose();
+  };
+
+  if (mapStyles.length <= 1) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        aria-label="map-style-select-dropdown-button"
+        style={{ paddingLeft: 0 }}
+        onClick={handleClick}
+        endIcon={<ArrowDropDown fontSize="small" />}
+      >
+        <Public style={{ paddingRight: '0.5rem' }} />
+        <Typography color="secondary" style={{ textTransform: 'none' }}>
+          {t(mapStyle?.label || '')}
+        </Typography>
+      </Button>
+      <Menu
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        className={classes.block}
+        anchorEl={anchorEl}
+      >
+        {mapStyles?.map(x => (
+          <MenuItem key={x.id} onClick={() => handleChange(x)}>
+            <Typography>{t(x.label)}</Typography>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    block: {
+      paddingLeft: '10px',
+      paddingTop: '4px',
+    },
+  }),
+);
+
+export default MapStyleSelector;