geoblacklight 5.4.0 → 6.0.0.pre.alpha.1

data/app/helpers/geoblacklight_helper.rb

@@ -9,7 +9,6 @@ module GeoblacklightHelper
   # Blacklight catalog controller helper method to truncate field value to 150 chars
   # @param [SolrDocument] args
   # @return [String]
-  # @deprecated
   def snippit(args)
     truncate(Array(args[:value]).flatten.join(" "), length: 150)
   end
@@ -19,7 +18,6 @@ module GeoblacklightHelper
   # @return [SVG or HTML tag]
   def geoblacklight_icon(name, **args)
     icon_name = name ? name.to_s.parameterize : "none"
-    icon_name = Settings.ICON_MAPPING && Settings.ICON_MAPPING[icon_name] || icon_name
     camel_icon = icon_name.tr("-", "_").camelize.delete(" ")
     begin
       render "Blacklight::Icons::#{camel_icon}Component".constantize.new(name: icon_name, **args)
@@ -41,7 +39,6 @@ module GeoblacklightHelper
   # div. Arguments come from Blacklight::DocumentPresenter's
   # get_field_values method
   # @param [Hash] args from get_field_values
-  # @deprecated
   def render_value_as_truncate_abstract(args)
     tag.div class: "truncate-abstract" do
       Array(args[:value]).flatten.join(" ")
@@ -51,25 +48,15 @@ module GeoblacklightHelper
   ##
   # Selects the basemap used for map displays
   # @return [String]
-  # @deprecated
   def geoblacklight_basemap
     blacklight_config.basemap_provider || "positron"
   end
 
-  ##
-  # Returns a hash of the leaflet plugin settings to pass to the viewer.
-  # @return[Hash]
-  # @deprecated
-  def leaflet_options
-    Settings.LEAFLET
-  end
-
   ##
   # Renders the transformed metadata
   # (Renders a partial when the metadata isn't available)
   # @param [Geoblacklight::Metadata::Base] metadata the metadata object
   # @return [String]
-  # @deprecated
   def render_transformed_metadata(metadata)
     render partial: "catalog/metadata/content", locals: {content: metadata.transform.html_safe}
   rescue Geoblacklight::MetadataTransformer::TransformError => transform_err
@@ -85,7 +72,6 @@ module GeoblacklightHelper
   # @param [SolrDocument] document the Solr Document for the item
   # @param [Geoblacklight::Metadata::Base] metadata the object for the metadata resource
   # @return [Boolean]
-  # @deprecated
   def first_metadata?(document, metadata)
     document.references.shown_metadata.first.type == metadata.type
   end
@@ -101,25 +87,6 @@ module GeoblacklightHelper
     )
   end
 
-  ## Returns the icon used based off a Settings strategy
-  # @deprecated
-  def relations_icon(document, icon)
-    # If configured to use geometry type for relations icon
-    if Settings.USE_GEOM_FOR_RELATIONS_ICON
-      Geoblacklight.deprecation.warn("USE_GEOM_FOR_RELATIONS_ICON is deprecated and will be removed in GeoBlacklight 6")
-      icon_html = render Geoblacklight::HeaderIconsComponent.new(
-        document: document,
-        fields: [Settings.FIELDS.GEOM_TYPE]
-      )
-
-      # Use geometry-based icon if it's valid (not missing)
-      return icon_html unless icon_html.include?("icon-missing")
-    end
-
-    # Fall back to the default icon
-    geoblacklight_icon(icon)
-  end
-
   ## Returns the data-page attribute value used as the JS map selector
   def results_js_map_selector(controller_name)
     case controller_name
@@ -129,14 +96,4 @@ module GeoblacklightHelper
       "index"
     end
   end
-
-  Geoblacklight.deprecation.deprecate_methods(GeoblacklightHelper,
-    snippit: "GeoBlacklight 6 removes it; its catalog_controller template no longer configures a " \
-      "truncated description index field",
-    render_value_as_truncate_abstract: "use Geoblacklight::MetadataDescriptionMarkdownComponent instead",
-    geoblacklight_basemap: "GeoBlacklight 6 reads the basemap from the viewer components themselves",
-    leaflet_options: "GeoBlacklight 6 reads the Leaflet options from the viewer components themselves",
-    render_transformed_metadata: "use Geoblacklight::MetadataComponent instead",
-    first_metadata?: "use Geoblacklight::MetadataComponent instead",
-    relations_icon: "use Geoblacklight::Relations::RelationComponent instead")
 end

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

@@ -1,11 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-    static targets = ["alert"];
+  static targets = ["alert"]
 
-    async copyToClipboard(event) {  
-        let text = event.params.value;
-        await navigator.clipboard.writeText(text)
-        this.alertTarget.classList.remove('d-none');
-    }
+  async copyToClipboard(event) {
+    let text = event.params.value
+    await navigator.clipboard.writeText(text)
+    this.alertTarget.classList.remove("d-none")
+  }
 }

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 { 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,
+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,10 +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";
-import sidebarControl from "geoblacklight/leaflet/controls/sidebar";
+} 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 = {
@@ -37,213 +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 definition = this.basemapDefinition();
-    return tileLayer(definition.url, {
-      ...definition,
-      detectRetina: this.optionsValue.LAYERS.DETECT_RETINA || false,
-    });
-  }
-
-  // The basemap to draw, with any BASEMAPS values from settings.yml merged over
-  // the shipped definition. This lets an application change a basemap's URL --
-  // to add a CARTO API key, for example -- without restating the rest of the
-  // definition, and lets it define basemaps of its own. Falls back to positron
-  // for a name that resolves to nothing rather than drawing no basemap.
-  basemapDefinition() {
-    const name = this.basemapValue || "positron";
-    const definition = { ...basemaps[name], ...this.basemapOverrides()[name] };
-    return definition.url ? definition : basemaps.positron;
-  }
-
-  basemapOverrides() {
-    return this.optionsValue.BASEMAPS || {};
+    const basemapName = this.basemapValue || "positron"
+    return tileLayer(basemaps[basemapName].url, {
+      ...basemaps[basemapName],
+      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 FullScreen({ position: "bottomleft", ...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 sidebar = document.querySelector("[data-sidebar]")
+    if (!sidebar || sidebar.dataset.sidebar != "true") return
     const control = new sidebarControl({
-      position: 'topright',
-      sidebar
-    });
-    this.map.addControl(control);
+      position: "topright",
+      sidebar,
+    })
+    this.map.addControl(control)
   }
 
   addInspection() {
-    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);
+    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)
+      })
   }
 }