modern/src/map/overlay/useMapOverlays.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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,
    },
  ];
};