1 files changed, 39 insertions, 0 deletions
diff --git a/src/map/overlay/MapOverlay.js b/src/map/overlay/MapOverlay.js
new file mode 100644
index 00000000..e436ea8d
--- /dev/null
+++ b/src/map/overlay/MapOverlay.js
@@ -0,0 +1,39 @@
+import { useId, 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);
+
+  useEffect(() => {
+    if (activeOverlay) {
+      map.addSource(id, activeOverlay.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);
+      }
+    };
+  }, [id, activeOverlay]);
+
+  return null;
+};
+
+export default MapOverlay;