From 075eccde9fd9b230fff70a32516ce68f0e947610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Fri, 22 Nov 2024 17:55:29 -0300
Subject: [PATCH] components: Map: Add openseamap layers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
---
 src/components/widgets/Map.vue | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index 8a277df99..8e243cc1b 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -161,17 +161,38 @@ const esri = L.tileLayer(
   { maxZoom: 19, attribution: '© Esri World Imagery' }
 )
 
+// Overlays
+const seamarks = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+  maxZoom: 18,
+  attribution: '© OpenSeaMap contributors',
+})
+
+const marineProfile = L.tileLayer.wms('https://geoserver.openseamap.org/geoserver/gwc/service/wms', {
+  layers: 'gebco2021:gebco_2021',
+  format: 'image/png',
+  transparent: true,
+  version: '1.1.1',
+  attribution: '© GEBCO, OpenSeaMap',
+  tileSize: 256,
+  maxZoom: 19,
+})
+
 const baseMaps = {
   'OpenStreetMap': osm,
   'Esri World Imagery': esri,
 }
 
+const overlays = {
+  'Seamarks': seamarks,
+  'Marine Profile': marineProfile,
+}
+
 // Show buttons when the mouse is over the widget
 const mapBase = ref<HTMLElement>()
 const isMouseOver = useElementHover(mapBase)
 
 const zoomControl = L.control.zoom({ position: 'bottomright' })
-const layerControl = L.control.layers(baseMaps)
+const layerControl = L.control.layers(baseMaps, overlays)
 
 watch(showButtons, () => {
   if (map.value === undefined) return
@@ -190,10 +211,10 @@ watch(isMouseOver, () => {
 
 onMounted(async () => {
   // Bind leaflet instance to map element
-  map.value = L.map(mapId.value, { layers: [osm, esri], attributionControl: false }).setView(
-    mapCenter.value as LatLngTuple,
-    zoom.value
-  ) as Map
+  map.value = L.map(mapId.value, {
+    layers: [osm, esri, seamarks, marineProfile],
+    attributionControl: false,
+  }).setView(mapCenter.value as LatLngTuple, zoom.value) as Map
 
   // Remove default zoom control
   map.value.removeControl(map.value.zoomControl)