Support map overlays

2 files changed, 68 insertions, 0 deletions

diff --git a/modern/src/map/overlay/MapOverlay.js b/modern/src/map/overlay/MapOverlay.js
new file mode 100644
index 00000000..ec51c7c9
--- /dev/null
+++ b/modern/src/map/overlay/MapOverlay.js
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import usePersistedState from '../../common/util/usePersistedState';
+import { map } from '../core/MapView';
+import useMapOverlays from './useMapOverlays';
+
+const MapOverlay = () => {
+  const id = 'overlay';
+
+  const mapOverlays = useMapOverlays();
+  const [selectedMapOverlay] = usePersistedState('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);
+      }
+    };
+  });
+
+  return null;
+};
+
+export default MapOverlay;
diff --git a/modern/src/map/overlay/useMapOverlays.js b/modern/src/map/overlay/useMapOverlays.js
new file mode 100644
index 00000000..ede1e5b9
--- /dev/null
+++ b/modern/src/map/overlay/useMapOverlays.js
@@ -0,0 +1,29 @@
+import { useSelector } from 'react-redux';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+
+const sourceCustom = (url) => ({
+  type: 'raster',
+  tiles: [url],
+  tileSize: 256,
+});
+
+export default () => {
+  const t = useTranslation();
+
+  const customMapOverlay = useSelector((state) => state.session.server?.overlayUrl);
+
+  return [
+    {
+      id: 'openSeaMap',
+      title: t('mapOpenSeaMap'),
+      source: sourceCustom('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'),
+      available: true,
+    },
+    {
+      id: 'custom',
+      title: t('mapOverlayCustom'),
+      source: sourceCustom(customMapOverlay),
+      available: !!customMapOverlay,
+    },
+  ];
+};