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");
-    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");
 }