diff options
Diffstat (limited to 'modern/src/map/overlay')
-rw-r--r-- | modern/src/map/overlay/MapOverlay.js | 39 | ||||
-rw-r--r-- | modern/src/map/overlay/useMapOverlays.js | 29 |
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, + }, + ]; +}; |