From 4ddb7fc2d8480164acbe717c6211aa1a3b056b52 Mon Sep 17 00:00:00 2001
From: Joao Figueiredo <joao.figueiredo@jfig.net>
Date: Tue, 21 Jul 2026 01:42:54 +0100
Subject: [PATCH] feat: add satellite imagery background

---
 app.js     | 28 +++++++++++++++-------------
 index.html |  1 +
 styles.css | 10 ----------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/app.js b/app.js
index e37675a..579ce54 100644
--- a/app.js
+++ b/app.js
@@ -26,6 +26,15 @@ const openStreetMapLayer = new ol.layer.Tile({
   source: new ol.source.OSM(),
 });
 
+const satelliteLayer = new ol.layer.Tile({
+  visible: false,
+  source: new ol.source.XYZ({
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attributions:
+      'Tiles © <a href="https://www.esri.com/en-us/legal/terms/full-master-agreement">Esri</a> — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community',
+  }),
+});
+
 // Use one WMS image for the viewport so GeoServer can de-conflict parcel
 // labels across the whole map, rather than placing the same label per tile.
 const wmsSource = new ol.source.ImageWMS({
@@ -56,7 +65,7 @@ const parcelSearchLayer = new ol.layer.Vector({
 
 const map = new ol.Map({
   target: "map",
-  layers: [softBasemapLayer, openStreetMapLayer, wmsLayer, parcelSearchLayer],
+  layers: [softBasemapLayer, openStreetMapLayer, satelliteLayer, wmsLayer, parcelSearchLayer],
   view: new ol.View({
     center: ol.proj.fromLonLat(DEFAULT_CENTER),
     zoom: 7,
@@ -218,19 +227,11 @@ function renderLayerList() {
       }
     });
 
-    const meta = document.createElement("div");
-    meta.className = "layer-meta";
-
     const title = document.createElement("span");
     title.className = "layer-title";
     title.textContent = layer.title;
 
-    const name = document.createElement("span");
-    name.className = "layer-name";
-    name.textContent = layer.name;
-
-    meta.append(title, name);
-    label.append(checkbox, meta);
+    label.append(checkbox, title);
     els.layerList.append(label);
   });
 }
@@ -294,7 +295,8 @@ function escapeCqlLiteral(value) {
 }
 
 function syncBackground() {
-  const useOpenStreetMap = els.backgroundSelect.value === "openstreetmap";
-  softBasemapLayer.setVisible(!useOpenStreetMap);
-  openStreetMapLayer.setVisible(useOpenStreetMap);
+  const background = els.backgroundSelect.value;
+  softBasemapLayer.setVisible(background === "soft");
+  openStreetMapLayer.setVisible(background === "openstreetmap");
+  satelliteLayer.setVisible(background === "satellite");
 }
diff --git a/index.html b/index.html
index 247f77c..b33b8ba 100644
--- a/index.html
+++ b/index.html
@@ -56,6 +56,7 @@
             <select id="background-select" name="background">
               <option value="soft">Soft minimal</option>
               <option value="openstreetmap">OpenStreetMap</option>
+              <option value="satellite">Satellite imagery</option>
             </select>
           </label>
         </section>
diff --git a/styles.css b/styles.css
index 2588a49..e2003c4 100644
--- a/styles.css
+++ b/styles.css
@@ -205,20 +205,10 @@ button:disabled {
   margin-top: 3px;
 }
 
-.layer-meta {
-  display: grid;
-  gap: 3px;
-}
-
 .layer-title {
   font-weight: 700;
 }
 
-.layer-name {
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
 .map-wrap {
   position: relative;
   overflow: hidden;