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

index.html

@@ -46,6 +46,19 @@
             Loading published layers.
           </div>
         </section>
+
+        <section class="panel">
+          <div class="panel-heading">
+            <h2>Background</h2>
+          </div>
+          <label class="background-selector" for="background-select">
+            <span>Base map</span>
+            <select id="background-select" name="background">
+              <option value="soft">Soft minimal</option>
+              <option value="openstreetmap">OpenStreetMap</option>
+            </select>
+          </label>
+        </section>
       </aside>
 
       <main class="map-wrap">

styles.css

@@ -93,6 +93,10 @@ form.panel {
   width: 100%;
 }
 
+.background-selector {
+  margin-top: 16px;
+}
+
 label {
   display: flex;
   flex-direction: column;
@@ -105,7 +109,8 @@ label span {
   font-weight: 600;
 }
 
-input {
+input,
+select {
   width: 100%;
   padding: 12px 14px;
   border-radius: 14px;
@@ -115,7 +120,8 @@ input {
   font: inherit;
 }
 
-input:focus {
+input:focus,
+select:focus {
   outline: 2px solid rgba(31, 122, 98, 0.18);
   border-color: var(--accent);
 }