diff --git a/src/map/overlay/MapOverlay.js b/src/map/overlay/MapOverlay.js
index e436ea8d17..e5756d8872 100644
--- a/src/map/overlay/MapOverlay.js
+++ b/src/map/overlay/MapOverlay.js
@@ -1,37 +1,41 @@
-import { useId, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAttributePreference } from '../../common/util/preferences';
 import { map } from '../core/MapView';
 import useMapOverlays from './useMapOverlays';
 
 const MapOverlay = () => {
-  const id = useId();
-
   const mapOverlays = useMapOverlays();
-  const selectedMapOverlay = useAttributePreference('selectedMapOverlay');
-
-  const activeOverlay = mapOverlays.filter((overlay) => overlay.available).find((overlay) => overlay.id === selectedMapOverlay);
+  const activeMapOverlays = useAttributePreference('activeMapOverlays');
+  const availableActiveMapOverlays = mapOverlays.filter((overlay) => overlay.available && activeMapOverlays.includes(overlay.id));
 
   useEffect(() => {
-    if (activeOverlay) {
-      map.addSource(id, activeOverlay.source);
-      map.addLayer({
-        id,
-        type: 'raster',
-        source: id,
-        layout: {
-          visibility: 'visible',
-        },
+    if (availableActiveMapOverlays) {
+      availableActiveMapOverlays.forEach((mapOverlay) => {
+        const { id } = mapOverlay;
+        map.addSource(id, mapOverlay.source);
+        map.addLayer({
+          id,
+          type: 'raster',
+          source: id,
+          layout: {
+            visibility: 'visible',
+          },
+        });
       });
     }
     return () => {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
+      if (availableActiveMapOverlays) {
+        availableActiveMapOverlays.forEach((mapOverlay) => {
+          if (map.getLayer(mapOverlay.id)) {
+            map.removeLayer(mapOverlay.id);
+          }
+          if (map.getSource(mapOverlay.id)) {
+            map.removeSource(mapOverlay.id);
+          }
+        });
       }
     };
-  }, [id, activeOverlay]);
+  }, [id, availableActiveMapOverlays]);
 
   return null;
 };
diff --git a/src/settings/PreferencesPage.jsx b/src/settings/PreferencesPage.jsx
index a40f6a55d1..0e3545ab4e 100644
--- a/src/settings/PreferencesPage.jsx
+++ b/src/settings/PreferencesPage.jsx
@@ -125,16 +125,17 @@ const PreferencesPage = () => {
                   <InputLabel>{t('mapOverlay')}</InputLabel>
                   <Select
                     label={t('mapOverlay')}
-                    value={attributes.selectedMapOverlay || ''}
-                    onChange={(e) => {
-                      const clicked = mapOverlays.find((o) => o.id === e.target.value);
-                      if (!clicked || clicked.available) {
-                        setAttributes({ ...attributes, selectedMapOverlay: e.target.value });
+                    value={attributes.activeMapOverlays?.split(',') || []}
+                    onChange={(e, child) => {
+                      const clicked = mapOverlays.find((o) => o.id === child.props.value);
+                      if (clicked.available) {
+                        setAttributes({ ...attributes, activeMapOverlays: e.target.value.join(',') });
                       } else if (clicked.id !== 'custom') {
                         const query = new URLSearchParams({ attribute: clicked.attribute });
                         navigate(`/settings/user/${user.id}?${query.toString()}`);
                       }
                     }}
+                    multiple
                   >
                     <MenuItem value="">{'\u00a0'}</MenuItem>
                     {mapOverlays.map((overlay) => (