feat: add selectable map backgrounds

app.js

@@ -10,9 +10,19 @@ const els = {
   parcelSearchForm: document.getElementById("parcel-search-form"),
   parcelSearchInput: document.getElementById("parcel-search-input"),
   parcelSearchStatus: document.getElementById("parcel-search-status"),
+  backgroundSelect: document.getElementById("background-select"),
 };
 
-const osmLayer = new ol.layer.Tile({
+const softBasemapLayer = new ol.layer.Tile({
+  source: new ol.source.XYZ({
+    url: "https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
+    attributions:
+      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
+  }),
+});
+
+const openStreetMapLayer = new ol.layer.Tile({
+  visible: false,
   source: new ol.source.OSM(),
 });
 
@@ -46,7 +56,7 @@ const parcelSearchLayer = new ol.layer.Vector({
 
 const map = new ol.Map({
   target: "map",
-  layers: [osmLayer, wmsLayer, parcelSearchLayer],
+  layers: [softBasemapLayer, openStreetMapLayer, wmsLayer, parcelSearchLayer],
   view: new ol.View({
     center: ol.proj.fromLonLat(DEFAULT_CENTER),
     zoom: 7,
@@ -57,6 +67,7 @@ let availableLayers = [];
 let selectedLayers = [];
 
 els.parcelSearchForm.addEventListener("submit", searchParcela);
+els.backgroundSelect.addEventListener("change", syncBackground);
 
 loadLayers();
 
@@ -281,3 +292,9 @@ function updateParcelSearchStatus(message, tone) {
 function escapeCqlLiteral(value) {
   return value.replaceAll("'", "''");
 }
+
+function syncBackground() {
+  const useOpenStreetMap = els.backgroundSelect.value === "openstreetmap";
+  softBasemapLayer.setVisible(!useOpenStreetMap);
+  openStreetMapLayer.setVisible(useOpenStreetMap);
+}