feat: add satellite imagery background

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");
+    label.append(checkbox, title);
-    name.className = "layer-name";
-    name.textContent = layer.name;
-
-    meta.append(title, name);
-    label.append(checkbox, meta);
     els.layerList.append(label);
   });
 }
@@ -294,7 +295,8 @@ function escapeCqlLiteral(value) {
 }
 
 function syncBackground() {
-  const useOpenStreetMap = els.backgroundSelect.value === "openstreetmap";
+  const background = els.backgroundSelect.value;
-  softBasemapLayer.setVisible(!useOpenStreetMap);
+  softBasemapLayer.setVisible(background === "soft");
-  openStreetMapLayer.setVisible(useOpenStreetMap);
+  openStreetMapLayer.setVisible(background === "openstreetmap");
+  satelliteLayer.setVisible(background === "satellite");
 }

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>

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;