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 © Esri — 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 @@
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;