geoblacklight 5.2.0 → 6.0.0.pre.alpha.1

data/app/javascript/geoblacklight/controllers/downloads_controller.js

@@ -2,55 +2,63 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   download(ev) {
-    ev.preventDefault();
+    ev.preventDefault()
     if (this.downloading) {
-      return;
+      return
     }
-    this.downloading = true;
-    ev.target.classList.add('download-in-progress');
-    const url = ev.target.dataset.downloadPath;
-    ev.target.removeAttribute('href');
-    ev.target.innerHTML = '<div class="spinner-border spinner-border-sm float-end"></div> Preparing download...';
+    this.downloading = true
+    ev.target.classList.add("download-in-progress")
+    const url = ev.target.dataset.downloadPath
+    ev.target.removeAttribute("href")
+    ev.target.innerHTML = '<div class="spinner-border spinner-border-sm float-end"></div> Preparing download...'
 
     fetch(url)
       .then((response) => {
         if (!response.ok) {
           return response.json().then((errorData) => {
-            const exception = new Error("Network response was not ok");
-            exception.data = errorData; // Attach the parsed JSON data to the error object
-            throw exception;
-          });
+            const exception = new Error("Network response was not ok")
+            exception.data = errorData // Attach the parsed JSON data to the error object
+            throw exception
+          })
         }
-        return response.json();
+        return response.json()
       })
       .then((data) => this.complete(data, ev.target))
-      .catch((error) => this.error(error, ev.target));
+      .catch((error) => this.error(error, ev.target))
   }
 
   complete(data, target) {
-    this.downloading = false;
-    target.classList.remove('download-in-progress');
-    target.classList.add('download-complete');
-    target.innerHTML = `Download ready (${target.dataset.downloadType})`;
-    target.href = data[1];
-    this.renderMessage(data[0]);
+    this.downloading = false
+    target.classList.remove("download-in-progress")
+    target.classList.add("download-complete")
+    target.innerHTML = `Download ready (${target.dataset.downloadType})`
+    target.href = data[1]
+    this.renderMessage(data[0])
     //target.click();
   }
 
   error(exception, target) {
-    this.downloading = false;
-    target.classList.remove('download-in-progress');
-    target.classList.add('download-complete');
-    target.innerHTML = `Download failed (${target.dataset.downloadType})`;
-    this.renderMessage(exception.data[0]);
+    this.downloading = false
+    target.classList.remove("download-in-progress")
+    target.classList.add("download-complete")
+    target.innerHTML = `Download failed (${target.dataset.downloadType})`
+    console.log(exception)
+
+    this.renderMessage(exception.data[0])
   }
 
   renderMessage(message) {
+    let flashContainer = document.querySelector("div.flash_messages")
+    if (!flashContainer) {
+      flashContainer = document.createElement("div")
+      flashContainer.className = "flash_messages"
+      document.getElementById("document").prepend(flashContainer)
+    }
     Object.entries(message).forEach(([idx, msg]) => {
-      const flash = document.createElement("div");
-      flash.className = `alert alert-${msg[0]} alert-dismissible fade show`;
-      flash.innerHTML = `${msg[1]}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
-      document.querySelector("div.flash_messages").appendChild(flash);
-    });
+      const flash = document.createElement("div")
+      flash.className = `alert alert-${msg[0]} alert-dismissible fade show`
+      flash.innerHTML = `${msg[1]}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`
+      flashContainer.appendChild(flash)
+    })
   }
 }

data/app/javascript/geoblacklight/controllers/leaflet_viewer_controller.js

@@ -1,17 +1,18 @@
-import { Icon, Control } from "leaflet";
-import "leaflet-fullscreen";
-import { layerGroup, polygon, map, tileLayer } from "leaflet";
-import { imageMapLayer } from "esri-leaflet";
-import { Controller } from "@hotwired/stimulus";
-import basemaps from "geoblacklight/leaflet/basemaps";
-import LayerOpacityControl from "geoblacklight/leaflet/controls/layer_opacity";
-import GeoSearchControl from "geoblacklight/leaflet/controls/geosearch";
-import Sleep from "geoblacklight/leaflet/controls/sleep";
-import { wmsInspection,
+import { Icon, Control } from "leaflet"
+import { FullScreen } from "leaflet.fullscreen"
+import { layerGroup, polygon, map, tileLayer } from "leaflet"
+import { imageMapLayer } from "esri-leaflet"
+import { Controller } from "@hotwired/stimulus"
+import basemaps from "geoblacklight/leaflet/basemaps"
+import LayerOpacityControl from "geoblacklight/leaflet/controls/layer_opacity"
+import GeoSearchControl from "geoblacklight/leaflet/controls/geosearch"
+import Sleep from "geoblacklight/leaflet/controls/sleep"
+import {
+  wmsInspection,
   tiledMapLayerInspection,
   featureLayerInspection,
-  dynamicMapLayerInspection
-} from "geoblacklight/leaflet/inspection";
+  dynamicMapLayerInspection,
+} from "geoblacklight/leaflet/inspection"
 import {
   esriDynamicMapLayer,
   esriFeatureLayer,
@@ -20,9 +21,10 @@ import {
   wmsLayer,
   wmtsLayer,
   indexMapLayer,
-} from "geoblacklight/leaflet/layers";
-import { geoJSONToBounds } from "geoblacklight/leaflet/utils";
-import { DEFAULT_BOUNDS, DEFAULT_OPACITY, DEFAULT_GEOM_OVERLAY_OPTIONS } from "geoblacklight/leaflet/constants";
+} from "geoblacklight/leaflet/layers"
+import { geoJSONToBounds } from "geoblacklight/leaflet/utils"
+import { DEFAULT_BOUNDS, DEFAULT_OPACITY, DEFAULT_GEOM_OVERLAY_OPTIONS } from "geoblacklight/leaflet/constants"
+import sidebarControl from "geoblacklight/leaflet/controls/sidebar"
 
 export default class LeafletViewerController extends Controller {
   static values = {
@@ -36,185 +38,188 @@ export default class LeafletViewerController extends Controller {
     page: String,
     layerId: String,
     drawInitialBounds: Boolean,
-  };
+  }
 
   connect() {
     // Use leaflet icon images from CDN
-    Icon.Default.imagePath = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/";
+    Icon.Default.imagePath = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/"
 
     // Set up layers
-    this.basemap = this.getBasemap();
-    this.overlay = layerGroup();
+    this.basemap = this.getBasemap()
+    this.overlay = layerGroup()
 
     // Calculate bounds
-    this.bounds = DEFAULT_BOUNDS;
-    if (this.hasMapGeomValue) this.bounds = geoJSONToBounds(this.mapGeomValue);
+    this.bounds = DEFAULT_BOUNDS
+    if (this.hasMapGeomValue) this.bounds = geoJSONToBounds(this.mapGeomValue)
 
     // Load the map
-    this.loadMap();
-  }
-
-  get config() {
-
-    if (!this.optionsValue.VIEWERS || !this.hasProtocolValue) return {};
-    return this.optionsValue.VIEWERS[this.protocolValue.toUpperCase()];
+    this.loadMap()
   }
 
   // Create the map, add layers, fit the bounds
   async loadMap() {
-    if (this.map) return;
+    if (this.map) return
 
     // Set up the map and fit to bounds
-    const sleepSettings = this.optionsValue.SLEEP || { 'SLEEP' : false }
-    this.map = map(this.element, sleepSettings);
-    if (sleepSettings.SLEEP) this.map.addHandler('SLEEP', Sleep);
+    const sleepSettings = this.optionsValue.sleep || { sleep: false }
+    this.map = map(this.element, sleepSettings)
+    if (sleepSettings.sleep) this.map.addHandler("SLEEP", Sleep)
 
-    this.map.addLayer(this.basemap);
-    this.map.addLayer(this.overlay);
-    this.fitBounds(this.bounds);
-    this.map.options.selected_color = this.optionsValue.SELECTED_COLOR || 'blue';
+    this.map.addLayer(this.basemap)
+    this.map.addLayer(this.overlay)
+    this.fitBounds(this.bounds)
+    this.map.options.selected_color = this.optionsValue.selected_color || "blue"
 
     // If the data is available, add the preview and set up inspection
     // Otherwise just draw the bounds, if configured to do so
     if (this.availableValue && this.protocolValue) {
-      await this.addPreviewOverlay();
-      this.addInspection();
+      await this.addPreviewOverlay()
+      this.addInspection()
     } else if (this.drawInitialBoundsValue && this.bounds) {
-      this.addBoundsOverlay(this.bounds);
+      this.addBoundsOverlay(this.bounds)
     }
 
     // Add configured controls
-    this.addControls();
+    this.addControls()
 
-    if (this.protocolValue == "IndexMap"){
+    if (this.protocolValue == "IndexMap") {
       this.fitBounds(this.previewOverlay.getBounds())
     }
 
     // Enable geosearch handler, if available
-    if (this.map.geosearch) this.map.geosearch.enable();
+    if (this.map.geosearch) this.map.geosearch.enable()
 
     // Emit an event for other controllers to listen to
-    this.dispatch("loaded");
+    this.dispatch("loaded")
   }
 
   // Set the bounds of the map to an L.LatLngBounds object
   fitBounds(bounds) {
     // prevent map from moving when setting bounds, if relevant
-    if (this.map.geosearch) this.map.geosearch.disable();
-    this.map.fitBounds(bounds, { animate: false, noMoveStart: true });
-    this.bounds = bounds;
-    if (this.map.geosearch) this.map.geosearch.enable();
-    this.element.dataset.bounds = this.bounds.toBBoxString();
+    if (this.map.geosearch) this.map.geosearch.disable()
+    this.map.fitBounds(bounds, { animate: false, noMoveStart: true })
+    this.bounds = bounds
+    if (this.map.geosearch) this.map.geosearch.enable()
+    this.element.dataset.bounds = this.bounds.toBBoxString()
   }
 
   // Select the configured basemap to use
   getBasemap() {
-    const basemapName = this.basemapValue || "positron";
+    const basemapName = this.basemapValue || "positron"
     return tileLayer(basemaps[basemapName].url, {
       ...basemaps[basemapName],
-      detectRetina: this.optionsValue.LAYERS.DETECT_RETINA || false,
-    });
+      detectRetina: this.optionsValue.layers.detect_retina || false,
+    })
   }
 
   // Add the configured controls to the map
   addControls() {
     // Add any top-level controls (e.g. geosearch) first
-    const globalControls = this.optionsValue.CONTROLS || {};
+    const globalControls = this.optionsValue.controls || {}
     Object.entries(globalControls).forEach(([controlName, controlOptions]) => {
-      const control = this.getControl(controlName, controlOptions);
-      if (control) this.addControl(control);
-    });
+      const control = this.getControl(controlName, controlOptions)
+      if (control) this.addControl(control)
+    })
 
     // Add opacity and fullscreen controls for all layers
     if (this.hasProtocolValue) {
-      if (this.availableValue){
-        const opacityControl = this.getControl("Opacity");
-        this.addControl(opacityControl);
+      if (this.availableValue) {
+        const opacityControl = this.getControl("Opacity")
+        this.addControl(opacityControl)
       }
-      const fullscreenControl = this.getControl("Fullscreen");
-      this.addControl(fullscreenControl);
+      const fullscreenControl = this.getControl("Fullscreen")
+      this.addControl(fullscreenControl)
     }
   }
 
   // Add a pre-configured L.Control instance to the map
   addControl(control) {
-    this.map.addControl(control);
+    this.map.addControl(control)
   }
 
   // Look up the control name and return the corresponding L.Control instance
   getControl(controlName, controlOptions) {
-    if (controlName == "Opacity")
-      return new LayerOpacityControl(this.previewOverlay);
-    if (controlName == "Fullscreen")
-      return new Control.Fullscreen({ position: "topright", ...controlOptions });
+    if (controlName == "Opacity") return new LayerOpacityControl(this.previewOverlay)
+    if (controlName == "Fullscreen") return new FullScreen({ position: "bottomleft", ...controlOptions })
     if (controlName == "Geosearch")
-      return new GeoSearchControl({ baseUrl: this.catalogBaseUrlValue, ...controlOptions });
-    console.error(`Unsupported control name: "${controlName}"`);
+      return new GeoSearchControl({
+        baseUrl: this.catalogBaseUrlValue,
+        ...controlOptions,
+      })
+    console.error(`Unsupported control name: "${controlName}"`)
   }
 
   // Add the bounding box to the map
   addBoundsOverlay(bounds) {
-    const hasMapGeomValue = Object.keys(this.mapGeomValue).length > 0 && !this.map.geosearch;
-    var defaultOptions = hasMapGeomValue ? DEFAULT_GEOM_OVERLAY_OPTIONS : {};
-    const overlayOptions = this.optionsValue.BOUNDSOVERLAY || {};
-    const options = {...defaultOptions, ...overlayOptions[this.pageValue]}
-    const boundsOverlay = polygon([
-      bounds.getSouthWest(),
-      bounds.getSouthEast(),
-      bounds.getNorthEast(),
-      bounds.getNorthWest(),
-    ], options
-    );
-    
+    const hasMapGeomValue = Object.keys(this.mapGeomValue).length > 0 && !this.map.geosearch
+    var defaultOptions = hasMapGeomValue ? DEFAULT_GEOM_OVERLAY_OPTIONS : {}
+    const overlayOptions = this.optionsValue.bounds_overlay || {}
+    const options = { ...defaultOptions, ...overlayOptions[this.pageValue] }
+    const boundsOverlay = polygon(
+      [bounds.getSouthWest(), bounds.getSouthEast(), bounds.getNorthEast(), bounds.getNorthWest()],
+      options,
+    )
+
     // Render geometry layer if available
-    if (hasMapGeomValue) this.map.addLayer(L.geoJSON(this.mapGeomValue, overlayOptions[this.pageValue]));
+    if (hasMapGeomValue) this.map.addLayer(L.geoJSON(this.mapGeomValue, overlayOptions[this.pageValue]))
 
     // Render the bounds overlay
-    this.boundsOverlay = boundsOverlay;
-    this.overlay.addLayer(boundsOverlay);
+    this.boundsOverlay = boundsOverlay
+    this.overlay.addLayer(boundsOverlay)
   }
 
   // Remove the bounding box overlay
   removeBoundsOverlay() {
-    if (this.boundsOverlay) this.overlay.removeLayer(this.boundsOverlay);
+    if (this.boundsOverlay) this.overlay.removeLayer(this.boundsOverlay)
+  }
+
+  setUpSidebar() {
+    const sidebar = document.querySelector("[data-sidebar]")
+    if (!sidebar || sidebar.dataset.sidebar != "true") return
+    const control = new sidebarControl({
+      position: "topright",
+      sidebar,
+    })
+    this.map.addControl(control)
   }
 
   addInspection() {
-    if (this.protocolValue == "Wms") return wmsInspection(this.map, this.urlValue, this.layerIdValue, this.previewOverlay);
-    if (this.protocolValue == "FeatureLayer") return featureLayerInspection(this.map, this.previewOverlay);
-    if (this.protocolValue  == "DynamicMapLayer") return dynamicMapLayerInspection(this.map, this.previewOverlay, this.layerIdValue)
+    const inspectionProtocols = ["Wms", "FeatureLayer", "DynamicMapLayer", "IndexMap"]
+    if (!inspectionProtocols.includes(this.protocolValue)) return
+    this.setUpSidebar()
+    if (this.protocolValue == "Wms")
+      return wmsInspection(this.map, this.urlValue, this.layerIdValue, this.previewOverlay)
+    if (this.protocolValue == "FeatureLayer") return featureLayerInspection(this.map, this.previewOverlay)
+    if (this.protocolValue == "DynamicMapLayer")
+      return dynamicMapLayerInspection(this.map, this.previewOverlay, this.layerIdValue)
     // TODO: TiledMapLayer is converted but seems busted -- see layers.js. Don't know what to test it with, need a fixture.
     // if (this.protocolValue == "TiledMapLayer") return tiledMapLayerInspection(this.map, this.previewOverlay);
   }
 
   // Add the actual data to the map as a layer
   async addPreviewOverlay() {
-    this.previewOverlay = await this.getPreviewOverlay(
-      this.protocolValue,
-      this.urlValue,
-      {
-        layerId: this.layerIdValue,
-        opacity: this.optionsValue.opacity || DEFAULT_OPACITY,
-        detectRetina: this.optionsValue.LAYERS.DETECT_RETINA || false,
-      }
-    );
-    if (this.previewOverlay) this.overlay.addLayer(this.previewOverlay);
+    this.previewOverlay = await this.getPreviewOverlay(this.protocolValue, this.urlValue, {
+      layerId: this.layerIdValue,
+      opacity: this.optionsValue.opacity || DEFAULT_OPACITY,
+      detectRetina: this.optionsValue.layers.detect_retina || false,
+    })
+    if (this.previewOverlay) this.overlay.addLayer(this.previewOverlay)
   }
 
   // Generate a layer based on the protocol
   async getPreviewOverlay(protocol, url, options) {
-    if (protocol == "DynamicMapLayer") return esriDynamicMapLayer(url, options);
-    if (protocol == "FeatureLayer") return esriFeatureLayer(url, options);
+    if (protocol == "DynamicMapLayer") return esriDynamicMapLayer(url, options)
+    if (protocol == "FeatureLayer") return esriFeatureLayer(url, options)
     // imageMapLayer is a built-in method from esri-leaflet
-    if (protocol == "ImageMapLayer") return imageMapLayer({url, ...options});
-    if (protocol == "IndexMap") return await indexMapLayer(url, this.optionsValue);
-    if (protocol == "TiledMapLayer") return await esriTiledMapLayer(url, options);
-    if (protocol == "Tilejson") return await tileJsonLayer(url, options);
+    if (protocol == "ImageMapLayer") return imageMapLayer({ url, ...options })
+    if (protocol == "IndexMap") return await indexMapLayer(url, this.optionsValue)
+    if (protocol == "TiledMapLayer") return await esriTiledMapLayer(url, options)
+    if (protocol == "Tilejson") return await tileJsonLayer(url, options)
     // tileLayer is a built-in method from leaflet
-    if (protocol == "Tms") return tileLayer(url, { tms: true, ...options });
-    if (protocol == "Wms") return wmsLayer(url, options);
-    if (protocol == "Wmts") return await wmtsLayer(url, options);
-    if (protocol == "Xyz") return tileLayer(url, options);
-    console.error(`Unsupported protocol name: "${protocol}"`);
+    if (protocol == "Tms") return tileLayer(url, { tms: true, ...options })
+    if (protocol == "Wms") return wmsLayer(url, options)
+    if (protocol == "Wmts") return await wmtsLayer(url, options)
+    if (protocol == "Xyz") return tileLayer(url, options)
+    console.error(`Unsupported protocol name: "${protocol}"`)
   }
 }

data/app/javascript/geoblacklight/controllers/oembed_viewer_controller.js

@@ -1,18 +1,18 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
 
 export default class OembedViewerController extends Controller {
   static values = {
     url: String,
-  };
+  }
 
   connect() {
     fetch(this.urlValue)
       .then((response) => response.json())
       .then((data) => {
-        if (data) this.element.innerHTML = data.html;
+        if (data) this.element.innerHTML = data.html
       })
       .catch((error) => {
-        console.error("Error loading oEmbed data:", error);
-      });
+        console.error("Error loading oEmbed data:", error)
+      })
   }
 }

data/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js

@@ -1,12 +1,12 @@
-import { Map } from "ol";
-import TileLayer from "ol/layer/Tile";
-import XYZ from "ol/source/XYZ";
-import GeoJSON from "ol/format/GeoJSON";
-import { FullScreen, defaults as defaultControls } from "ol/control";
-import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers";
-import basemaps from "geoblacklight/openlayers/basemaps";
-import { Controller } from "@hotwired/stimulus";
-import { pmTilesInspection } from "geoblacklight/openlayers/inspection";
+import { Map } from "ol"
+import TileLayer from "ol/layer/Tile"
+import XYZ from "ol/source/XYZ"
+import GeoJSON from "ol/format/GeoJSON"
+import { FullScreen, defaults as defaultControls } from "ol/control"
+import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers"
+import basemaps from "geoblacklight/openlayers/basemaps"
+import { Controller } from "@hotwired/stimulus"
+import { pmTilesInspection } from "geoblacklight/openlayers/inspection"
 
 export default class OpenlayersViewerController extends Controller {
   static values = {
@@ -14,16 +14,16 @@ export default class OpenlayersViewerController extends Controller {
     protocol: String,
     basemap: String,
     mapGeom: String,
-  };
+  }
 
   async connect() {
     // Set up layers
-    this.basemap = this.getBasemap();
-    this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue);
+    this.basemap = this.getBasemap()
+    this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue)
 
-    await this.getBounds();
+    await this.getBounds()
     // Load the map
-    this.loadMap();
+    this.loadMap()
   }
 
   // Create the map, add layers, and fit the bounds
@@ -32,38 +32,35 @@ export default class OpenlayersViewerController extends Controller {
       target: this.element,
       controls: defaultControls().extend([new FullScreen()]),
       layers: [this.basemap, this.overlay],
-    });
-    this.map.getView().fit(this.extent, this.map.getSize());
+    })
+    this.map.getView().fit(this.extent, this.map.getSize())
     this.addInspection()
   }
 
   addInspection() {
-    if (this.protocolValue == "Pmtiles") return pmTilesInspection(this.map);
+    if (this.protocolValue == "Pmtiles") return pmTilesInspection(this.map)
   }
 
   async getBounds() {
-    if (this.protocolValue == 'Cog') {
-      const view = await this.overlay.getSource().getView();
-      this.extent = view.extent;
+    if (this.protocolValue == "Cog") {
+      const view = await this.overlay.getSource().getView()
+      this.extent = view.extent
     } else {
-      this.extent = new GeoJSON()
-      .readFeatures(this.mapGeomValue)[0]
-      .getGeometry()
-      .getExtent();
+      this.extent = new GeoJSON().readFeatures(this.mapGeomValue)[0].getGeometry().getExtent()
     }
   }
 
   // Select the configured basemap to use
   getBasemap() {
-    const basemap = basemaps[this.basemapValue || "positron"];
-    const layer = new TileLayer({ source: new XYZ(basemap) });
-    return layer;
+    const basemap = basemaps[this.basemapValue || "positron"]
+    const layer = new TileLayer({ source: new XYZ(basemap) })
+    return layer
   }
 
   // Generate a layer based on the protocol
   getPreviewOverlay(protocol, url) {
-    if (protocol === "Pmtiles") return pmTilesLayer(url);
-    if (protocol === "Cog") return cogLayer(url);
-    console.error(`Unsupported protocol name: "${protocol}"`);
+    if (protocol === "Pmtiles") return pmTilesLayer(url)
+    if (protocol === "Cog") return cogLayer(url)
+    console.error(`Unsupported protocol name: "${protocol}"`)
   }
 }

data/app/javascript/geoblacklight/controllers/search_results_controller.js

@@ -1,50 +1,50 @@
-import { Controller } from "@hotwired/stimulus";
-import { geoJSONToBounds } from "geoblacklight/leaflet/utils";
-import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants";
+import { Controller } from "@hotwired/stimulus"
+import { geoJSONToBounds } from "geoblacklight/leaflet/utils"
+import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants"
 
 export default class SearchResultsController extends Controller {
-  static targets = ["result"];
-  static outlets = ["leaflet-viewer"];
+  static targets = ["result"]
+  static outlets = ["leaflet-viewer"]
 
   // Fit the map to the combined bounding box of all search results
   // If a bounding box query is already active, do not override it
   fitResultBounds() {
-    if (new URL(window.location).searchParams.get("bbox")) return;
-    this.leafletViewerOutlet.fitBounds(this.getMaximalBounds());
+    if (new URL(window.location).searchParams.get("bbox")) return
+    this.leafletViewerOutlet.fitBounds(this.getMaximalBounds())
   }
 
   // Get the bounding box of a search result from its data attributes
   getResultBounds(resultElement) {
-    const geomElement = resultElement.querySelector("[data-geom]");
+    const geomElement = resultElement.querySelector("[data-geom]")
     if (geomElement && geomElement.dataset.geom) {
-      return geoJSONToBounds(JSON.parse(geomElement.dataset.geom));
+      return geoJSONToBounds(JSON.parse(geomElement.dataset.geom))
     }
   }
 
   // Find the combined bounding box of all search results
   getMaximalBounds() {
-    const bounds = this.resultTargets.map(this.getResultBounds);
-    const nonNullBounds = bounds.filter((b) => b);
+    const bounds = this.resultTargets.map(this.getResultBounds)
+    const nonNullBounds = bounds.filter((b) => b)
 
     if (nonNullBounds.length > 0) {
-      return nonNullBounds.reduce((max, b) => max.extend(b));
+      return nonNullBounds.reduce((max, b) => max.extend(b))
     }
 
-    return DEFAULT_BOUNDS;
+    return DEFAULT_BOUNDS
   }
 
   // Preview the selected search result's bounding box on the map
   previewResultOnMap(event) {
-    const geomElement = event.target.querySelector("[data-geom]");
+    const geomElement = event.target.querySelector("[data-geom]")
     if (geomElement && geomElement.dataset.geom !== "") {
-      const geom = JSON.parse(geomElement.dataset.geom);
-      const bbox = geoJSONToBounds(geom);
-      this.leafletViewerOutlet.addBoundsOverlay(bbox);
+      const geom = JSON.parse(geomElement.dataset.geom)
+      const bbox = geoJSONToBounds(geom)
+      this.leafletViewerOutlet.addBoundsOverlay(bbox)
     }
   }
 
   // Remove the previewed bounding box
   clearPreview() {
-    this.leafletViewerOutlet.removeBoundsOverlay();
+    this.leafletViewerOutlet.removeBoundsOverlay()
   }
 }