feat(map): satellite layer toggle (#24)

* feat(map): add satellite layer toggle (Esri World Imagery)

* feat(map): use OSM.de tiles for German labels + add labeled satellite layer

---------

Co-authored-by: haex <mail@haex.space>

Author: haexhub

components/AuctionDetailMap.client.vue

@@ -32,10 +32,29 @@ onMounted(async () => {
   await nextTick()
   if (!mapEl.value) return
   map = L.map(mapEl.value, { scrollWheelZoom: false }).setView([props.lat, props.lng], 14)
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    maxZoom: 19,
+  const streets = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Deutschland',
+    maxZoom: 18,
   }).addTo(map)
+  const esriImagery = L.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    {
+      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, Maxar, Earthstar Geographics',
+      maxZoom: 19,
+    },
+  )
+  const deLabels = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
+    maxZoom: 18,
+    opacity: 0.55,
+  })
+  const satelliteLabeled = L.layerGroup([esriImagery, deLabels])
+  L.control
+    .layers(
+      { Straße: streets, 'Satellit + Beschriftung': satelliteLabeled, 'Satellit (nur Bild)': esriImagery },
+      undefined,
+      { position: 'topright' },
+    )
+    .addTo(map)
   const marker = L.marker([props.lat, props.lng], { icon: markerIcon })
   if (props.label) marker.bindTooltip(props.label)
   marker.addTo(map)

components/AuctionMap.client.vue

@@ -114,10 +114,29 @@ function refreshMarkers(): void {
 onMounted(() => {
   if (!mapEl.value) return
   map = L.map(mapEl.value, { scrollWheelZoom: true }).setView(GERMANY_CENTER, 6)
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    maxZoom: 19,
+  const streets = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Deutschland',
+    maxZoom: 18,
   }).addTo(map)
+  const esriImagery = L.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    {
+      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, Maxar, Earthstar Geographics',
+      maxZoom: 19,
+    },
+  )
+  const deLabels = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
+    maxZoom: 18,
+    opacity: 0.55,
+  })
+  const satelliteLabeled = L.layerGroup([esriImagery, deLabels])
+  L.control
+    .layers(
+      { Straße: streets, 'Satellit + Beschriftung': satelliteLabeled, 'Satellit (nur Bild)': esriImagery },
+      undefined,
+      { position: 'topright' },
+    )
+    .addTo(map)
   markersLayer = L.layerGroup().addTo(map)
   refreshMarkers()
 })