geoblacklight 5.4.0 → 6.0.0.pre.alpha.1

data/app/javascript/geoblacklight/leaflet/layer_wmts.js

@@ -1,11 +1,11 @@
-import { latLng, latLngBounds } from "leaflet";
+import { latLng, latLngBounds } from "leaflet"
 
 export const parseWmtsCapabilities = (wmtsCapabilities, layerId) => {
   const parser = new DOMParser(),
     doc = parser.parseFromString(wmtsCapabilities, "application/xml"),
     layers = doc.getElementsByTagName("Layer"),
     selectedLayer = findLayer(layers, layerId),
-    resourceElement = selectedLayer.getElementsByTagName("ResourceURL")[0];
+    resourceElement = selectedLayer.getElementsByTagName("ResourceURL")[0]
 
   // Generate URL with Leaflet.TileLayer URL template formatting
   const tileURL = resourceElement
@@ -14,20 +14,20 @@ export const parseWmtsCapabilities = (wmtsCapabilities, layerId) => {
     .replace("{TileMatrixSet}", getTileMatrixSet(selectedLayer))
     .replace("TileMatrix", "z")
     .replace("TileCol", "x")
-    .replace("TileRow", "y");
+    .replace("TileRow", "y")
 
-  return { url: tileURL, bounds: getBounds(selectedLayer) };
+  return { url: tileURL, bounds: getBounds(selectedLayer) }
 }
 
 const findLayer = (layers, layerId) => {
   if (layers.length === 1) {
-    return layers[0];
+    return layers[0]
   } else {
     for (let i = 0; i < layers.length; i++) {
-      const ids = layers[i].getElementsByTagName("ows:Identifier");
+      const ids = layers[i].getElementsByTagName("ows:Identifier")
       for (let x = 0; x < ids.length; x++) {
         if (ids[x].textContent === layerId) {
-          return layers[i];
+          return layers[i]
         }
       }
     }
@@ -35,25 +35,23 @@ const findLayer = (layers, layerId) => {
 }
 
 const getStyle = (layer) => {
-  const styleElement = layer.getElementsByTagName("Style")[0];
-  return styleElement
-    ? styleElement.getElementsByTagName("ows:Identifier")[0].textContent
-    : undefined;
+  const styleElement = layer.getElementsByTagName("Style")[0]
+  return styleElement ? styleElement.getElementsByTagName("ows:Identifier")[0].textContent : undefined
 }
 
 const getTileMatrixSet = (layer) => {
-  const tileMatrixElement = layer.getElementsByTagName("TileMatrixSet")[0];
-  return tileMatrixElement ? tileMatrixElement.textContent : undefined;
+  const tileMatrixElement = layer.getElementsByTagName("TileMatrixSet")[0]
+  return tileMatrixElement ? tileMatrixElement.textContent : undefined
 }
 
 const getBounds = (layer) => {
   const lcElement = layer.getElementsByTagName("ows:LowerCorner")[0],
-    ucElement = layer.getElementsByTagName("ows:UpperCorner")[0];
+    ucElement = layer.getElementsByTagName("ows:UpperCorner")[0]
   if (lcElement && ucElement) {
     const lc = lcElement.textContent.split(" "),
       uc = ucElement.textContent.split(" "),
       corner1 = latLng(lc[1], lc[0]),
-      corner2 = latLng(uc[1], uc[0]);
-    return latLngBounds(corner1, corner2);
+      corner2 = latLng(uc[1], uc[0])
+    return latLngBounds(corner1, corner2)
   }
 }

data/app/javascript/geoblacklight/leaflet/layers.js

@@ -2,11 +2,11 @@
  * If complex logic is needed for a certain layer type, it is broken out into its own file,
  * such as layer_wmts.js for WMTS layers and layer_index_map.js for index map layers, at the same directory level as this file.
  */
-import { tileLayer, geoJson, circleMarker } from "leaflet";
-import { dynamicMapLayer, featureLayer, tiledMapLayer } from "esri-leaflet";
-import { parseWmtsCapabilities } from "geoblacklight/leaflet/layer_wmts";
-import { availabilityStyle, updateInformation } from "geoblacklight/leaflet/layer_index_map";
-import { getTileJsonBounds } from "geoblacklight/leaflet/utils";
+import { tileLayer, geoJson, circleMarker } from "leaflet"
+import { dynamicMapLayer, featureLayer, tiledMapLayer } from "esri-leaflet"
+import { parseWmtsCapabilities } from "geoblacklight/leaflet/layer_wmts"
+import { availabilityStyle, updateInformation } from "geoblacklight/leaflet/layer_index_map"
+import { getTileJsonBounds } from "geoblacklight/leaflet/utils"
 
 // Create a leaflet tile layer for WMS
 export const wmsLayer = (url, { layerId, opacity, detectRetina }) => {
@@ -18,50 +18,48 @@ export const wmsLayer = (url, { layerId, opacity, detectRetina }) => {
     CRS: "EPSG:3857",
     opacity,
     detectRetina,
-  });
-};
+  })
+}
 
 // Fetch a WMTSCapabilities document and create a leaflet tileLayer using it
 export const wmtsLayer = async (url, { opacity, detectRetina, layerId }) => {
-  const response = await fetch(url);
-  if (!response.ok)
-    throw new Error("Unable to fetch WMTSCapabilities document", url);
+  const response = await fetch(url)
+  if (!response.ok) throw new Error("Unable to fetch WMTSCapabilities document", url)
 
-  const wmtsCapabilities = await response.text();
-  if (!wmtsCapabilities)
-    throw new Error("Unable to parse WMTSCapabilities document", url);
+  const wmtsCapabilities = await response.text()
+  if (!wmtsCapabilities) throw new Error("Unable to parse WMTSCapabilities document", url)
 
-  const tileInfo = parseWmtsCapabilities(wmtsCapabilities, layerId);
-  const options = tileInfo.bounds ? { bounds: tileInfo.bounds } : {};
+  const tileInfo = parseWmtsCapabilities(wmtsCapabilities, layerId)
+  const options = tileInfo.bounds ? { bounds: tileInfo.bounds } : {}
   return tileLayer(tileInfo.url, {
     opacity,
     detectRetina,
     ...options,
-  });
-};
+  })
+}
 
 // Create an ESRI-leaflet dynamic map layer
 export const esriDynamicMapLayer = (url, { opacity, detectRetina }) => {
   // Remove any trailing slash and get the last segment from the URL
-  url = url.replace(/\/$/, "");
-  const pathArray = url.split("/");
-  const lastSegment = pathArray[pathArray.length - 1];
+  url = url.replace(/\/$/, "")
+  const pathArray = url.split("/")
+  const lastSegment = pathArray[pathArray.length - 1]
 
   // If the last segment is an integer it's the layer ID
-  let layerId;
+  let layerId
   if (Number(lastSegment) === parseInt(lastSegment, 10)) {
-    layerId = lastSegment;
-    url = url.slice(0, -(lastSegment.length + 1));
+    layerId = lastSegment
+    url = url.slice(0, -(lastSegment.length + 1))
   }
 
-  const options = layerId ? { layers: [layerId] } : {};
+  const options = layerId ? { layers: [layerId] } : {}
   return dynamicMapLayer({
     url,
     opacity,
     detectRetina,
     ...options,
-  });
-};
+  })
+}
 
 // Create an ESRI-leaflet feature layer
 export const esriFeatureLayer = (url, { opacity, detectRetina }) => {
@@ -69,85 +67,80 @@ export const esriFeatureLayer = (url, { opacity, detectRetina }) => {
     url,
     opacity,
     detectRetina,
-  });
-};
+  })
+}
 
 // Create an ESRI tiled map layer
 export const esriTiledMapLayer = async (url, options) => {
-  const response = await fetch(url);
+  const response = await fetch(url)
 
-  if (!response.ok)
-    throw new Error("Unable to fetch EsriTiledMapLayer document", url);
+  if (!response.ok) throw new Error("Unable to fetch EsriTiledMapLayer document", url)
 
-  let layerInfo;
+  let layerInfo
   try {
-    layerInfo = await response.json();
+    layerInfo = await response.json()
   } catch (error) {
-    throw new Error("Unable to parse TiledMapLayer document", response);
+    throw new Error("Unable to parse TiledMapLayer document", response)
   }
 
   // For an example of tiledMapLayer data see nyu-test-soil-survey-map
   // We aren't sure what the json structure looks like
   // This is not rendering anything (and wasn't before we made changes) and the keys are not even present
-  // Check out this json: https://dnrmaps.wi.gov/arcgis2/rest/services/TS_AGOL_STAGING_SERVICES/EN_AGOL_STAGING_SurfaceWater_WTM/MapServer/2?f=pjson -- wrong protocol, now a feature map?? 
-  if (
-    layerInfo.singleFusedMapCache === true &&
-    layerInfo.spatialReference.wkid === 102100
-  ) {
-    return tiledMapLayer({ url, ...options });
+  // Check out this json: https://dnrmaps.wi.gov/arcgis2/rest/services/TS_AGOL_STAGING_SERVICES/EN_AGOL_STAGING_SurfaceWater_WTM/MapServer/2?f=pjson -- wrong protocol, now a feature map??
+  if (layerInfo.singleFusedMapCache === true && layerInfo.spatialReference.wkid === 102100) {
+    return tiledMapLayer({ url, ...options })
   }
-};
+}
 
-// Create a leaflet tile layer 
+// Create a leaflet tile layer
 export const tileJsonLayer = async (url, options) => {
-  const response = await fetch(url);
+  const response = await fetch(url)
 
   if (!response.ok) {
-    throw new Error("Unable to fetch TiledJson document", url);
+    throw new Error("Unable to fetch TiledJson document", url)
   }
 
-  const layerInfo = await response.json();
+  const layerInfo = await response.json()
 
-  const bounds = getTileJsonBounds(layerInfo);
-  if (bounds) options.bounds = bounds;
-  const tileUrl = layerInfo.tiles[0];
-  return tileLayer(tileUrl, options);
-};
+  const bounds = getTileJsonBounds(layerInfo)
+  if (bounds) options.bounds = bounds
+  const tileUrl = layerInfo.tiles[0]
+  return tileLayer(tileUrl, options)
+}
 
 // Fetch an indexMapLayer document and create a leaflet geoJSON layer
 export const indexMapLayer = async (url, leafletOptions) => {
-  let prevLayer = null;
+  let prevLayer = null
 
-  const response = await fetch(url);
+  const response = await fetch(url)
 
   if (!response.ok) {
-    throw new Error("Unable to fetch indexMapLayer document", url);
+    throw new Error("Unable to fetch indexMapLayer document", url)
   }
 
-  const data = await response.json();
+  const data = await response.json()
 
   // name the const geoJSONLayer; we access it self-referentially within the method
   const geoJSONLayer = geoJson(data, {
-    style: (feature) =>
-      availabilityStyle(feature.properties.available, leafletOptions),
+    style: (feature) => availabilityStyle(feature.properties.available, leafletOptions),
     onEachFeature: (feature, layer) => {
       if (feature.properties.label !== null) {
-        layer.bindTooltip(feature.properties.label);
+        layer.bindTooltip(feature.properties.label)
       }
       if (feature.properties.available !== null) {
         layer.on("click", (e) => {
-          layer.setStyle(leafletOptions.LAYERS.INDEX.SELECTED);
+          layer.setStyle(leafletOptions.layers.index.SELECTED)
           if (prevLayer !== null) {
-            leafletOptions.opacity = layer.options.fillOpacity;
-            geoJSONLayer.resetStyle(prevLayer);
+            leafletOptions.opacity = layer.options.fillOpacity
+            geoJSONLayer.resetStyle(prevLayer)
           }
-          prevLayer = layer;
-          updateInformation(feature.properties);
-        });
+          prevLayer = layer
+          updateInformation(feature.properties)
+        })
       }
     },
     pointToLayer: (feature, latlng) => circleMarker(latlng),
-  });
+  })
 
-  return geoJSONLayer;
-};
+  return geoJSONLayer
+}

data/app/javascript/geoblacklight/leaflet/utils.js

@@ -1,83 +1,77 @@
-import { latLngBounds, Util, geoJSON, latLng  } from "leaflet";
+import { latLngBounds, Util, geoJSON, latLng } from "leaflet"
 
 export const bboxToBounds = (bbox) => {
-  bbox = bbox.split(" ");
+  bbox = bbox.split(" ")
   if (bbox.length === 4) {
     return latLngBounds([
       [parseFloat(bbox[1]), parseFloat(bbox[0])],
       [parseFloat(bbox[3]), parseFloat(bbox[2])],
-    ]);
+    ])
   } else {
-    throw new Error("Invalid bounding box string");
+    throw new Error("Invalid bounding box string")
   }
-};
+}
 
 export const boundsToBbox = (bounds) => {
   let sw = bounds.getSouthWest(),
-    ne = bounds.getNorthEast();
+    ne = bounds.getNorthEast()
 
   if (ne.lng - sw.lng >= 360) {
-    sw.lng = -180;
-    ne.lng = 180;
+    sw.lng = -180
+    ne.lng = 180
   }
-  sw = sw.wrap();
-  ne = ne.wrap();
-  return [
-    Util.formatNum(sw.lng, 6),
-    Util.formatNum(sw.lat, 6),
-    Util.formatNum(ne.lng, 6),
-    Util.formatNum(ne.lat, 6),
-  ];
-};
+  sw = sw.wrap()
+  ne = ne.wrap()
+  return [Util.formatNum(sw.lng, 6), Util.formatNum(sw.lat, 6), Util.formatNum(ne.lng, 6), Util.formatNum(ne.lat, 6)]
+}
 
 export const geoJSONToBounds = (geojson) => {
-  const layer = geoJSON(geojson);
-  return layer.getBounds();
-};
+  const layer = geoJSON(geojson)
+  return layer.getBounds()
+}
 
 export const debounce = (fn, delay) => {
-  let timeout = null;
+  let timeout = null
   return function (...args) {
-    clearTimeout(timeout);
+    clearTimeout(timeout)
     timeout = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-};
+      fn.apply(this, args)
+    }, delay)
+  }
+}
 
 export const getTileJsonBounds = (doc) => {
-  const bounds = doc.bounds;
+  const bounds = doc.bounds
   if (bounds) {
     const corner1 = latLng(bounds[1], bounds[0]),
-      corner2 = latLng(bounds[3], bounds[2]);
-    return latLngBounds(corner1, corner2);
+      corner2 = latLng(bounds[3], bounds[2])
+    return latLngBounds(corner1, corner2)
   }
-};
+}
 
 export const appendLoadingMessage = () => {
   const spinner = `<tbody class="attribute-table-body"><tr><td colspan="2">
     <span id="attribute-table">
     <div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div>
     </span>
-    </td></tr></tbody>`;
+    </td></tr></tbody>`
 
-  document.querySelector(".attribute-table-body").innerHTML = spinner;
-};
+  document.querySelector(".attribute-table-body").innerHTML = spinner
+}
 
 export const appendErrorMessage = () => {
-  document.querySelector(
-    ".attribute-table-body"
-  ).innerHTML = `<tbody class="attribute-table-body">
-    <tr><td colspan="2">Could not find that feature</td></tr></tbody>`;
-};
+  document.querySelector(".attribute-table-body").innerHTML = `<tbody class="attribute-table-body">
+    <tr><td colspan="2">Could not find that feature</td></tr></tbody>`
+}
 
 // Looks for strings that could be URLs and wraps them in <a> tags
 export const linkify = (str) => {
-  if (!str) return '';
-  const urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
-  return str.toString().replace(urlRegEx, '<a href=\'$1\'>$1</a>');
+  if (!str) return ""
+  const urlRegEx =
+    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g
+  return str.toString().replace(urlRegEx, "<a href='$1'>$1</a>")
 }
 
 export const getLayerOpacity = (layer) => {
-  return layer.options.fillOpacity ? layer.options.fillOpacity : layer.options.opacity;
-}
+  return layer.options.fillOpacity ? layer.options.fillOpacity : layer.options.opacity
+}

data/app/javascript/geoblacklight/openlayers/basemaps.js

@@ -1,27 +1,55 @@
 export default {
   darkMatter: {
-    url:'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
-    maxZoom: 18
+    url: "https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
   },
   positron: {
-    url: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
-    maxZoom: 18
+    url: "https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
   },
   positronLite: {
-    url: 'https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
-    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
-    maxZoom: 18
+    url: "https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
+  },
+  worldAntique: {
+    url: "https://cartocdn_{a-d}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
+  },
+  worldEco: {
+    url: "https://cartocdn_{a-d}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
+  },
+  flatBlue: {
+    url: "https://cartocdn_{a-d}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
+  },
+  midnightCommander: {
+    url: "https://cartocdn_{a-d}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18,
   },
   openstreetmapHot: {
-    url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
-    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>', 
-    maxZoom: 19
+    url: "https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+    attributions:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',
+    maxZoom: 19,
   },
   openstreetmapStandard: {
-    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
     attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-    maxZoom: 19
-  }
+    maxZoom: 19,
+  },
 }

data/app/javascript/geoblacklight/openlayers/inspection.js

@@ -1,44 +1,44 @@
-import { linkify } from "geoblacklight/leaflet/utils";
+import { linkify } from "geoblacklight/leaflet/utils"
 
 export const pmTilesInspection = (map) => {
   // add crosshair class for map items
-  map.on('pointermove', function(e){
-    var pixel = map.getEventPixel(e.originalEvent);
-    var hit = map.hasFeatureAtPixel(pixel);
-    map.getViewport().style.cursor = hit ? 'crosshair' : '';
-  });
+  map.on("pointermove", function (e) {
+    var pixel = map.getEventPixel(e.originalEvent)
+    var hit = map.hasFeatureAtPixel(pixel)
+    map.getViewport().style.cursor = hit ? "crosshair" : ""
+  })
 
-  map.on('click', (event) => {
-    const spinner = document.createElement("tbody");
-    spinner.className = "attribute-table-body";
+  map.on("click", (event) => {
+    const spinner = document.createElement("tbody")
+    spinner.className = "attribute-table-body"
     spinner.innerHTML =
-      '<tr><td colspan="2"><div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div></td></tr>';
-    document.querySelector(".attribute-table-body").replaceWith(spinner);
+      '<tr><td colspan="2"><div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div></td></tr>'
+    document.querySelector(".attribute-table-body").replaceWith(spinner)
 
-    const features = map.getFeaturesAtPixel(event.pixel);
+    const features = map.getFeaturesAtPixel(event.pixel)
     if (features.length == 0) {
       document.querySelector(".attribute-table-body").innerHTML =
-        '<tr><td colspan="2">Could not find that feature</td></tr>';
-      return;
+        '<tr><td colspan="2">Could not find that feature</td></tr>'
+      return
     }
 
-    const properties = features[0].getProperties();
-    populateAttributeTable(properties);
-  });
+    const properties = features[0].getProperties()
+    populateAttributeTable(properties)
+  })
 }
 
 const populateAttributeTable = (properties) => {
-  let html = '<tbody class="attribute-table-body">';
+  let html = '<tbody class="attribute-table-body">'
 
   // Step through properties and append to table
   Object.keys(properties).forEach((property) => {
     html += `<tr><td>${property}</td>
-               <td>${linkify(properties[property])}</td></tr>`;
-  });
-  html += "</tbody>";
+               <td>${linkify(properties[property])}</td></tr>`
+  })
+  html += "</tbody>"
 
-  const tableBody = document.querySelector(".attribute-table-body");
+  const tableBody = document.querySelector(".attribute-table-body")
   if (tableBody) {
-    tableBody.outerHTML = html; // Replace existing table body with new content
+    tableBody.outerHTML = html // Replace existing table body with new content
   }
 }

data/app/javascript/geoblacklight/openlayers/layers.js

@@ -1,13 +1,13 @@
-import VectorTile from "ol/layer/VectorTile";
-import { Style, Stroke, Fill, Circle } from "ol/style";
-import { PMTilesVectorSource } from "ol-pmtiles";
-import { useGeographic } from "ol/proj";
-import GeoTIFF from "ol/source/GeoTIFF";
-import WebGLTileLayer from "ol/layer/WebGLTile";
+import VectorTile from "ol/layer/VectorTile"
+import { Style, Stroke, Fill, Circle } from "ol/style"
+import { PMTilesVectorSource } from "ol-pmtiles"
+import { useGeographic } from "ol/proj"
+import GeoTIFF from "ol/source/GeoTIFF"
+import WebGLTileLayer from "ol/layer/WebGLTile"
 
 // Create a new PMTiles layer
 export const pmTilesLayer = (url) => {
-  useGeographic();
+  useGeographic()
   return new VectorTile({
     declutter: true,
     source: new PMTilesVectorSource({ url }),
@@ -30,15 +30,15 @@ export const pmTilesLayer = (url) => {
         }),
       }),
     }),
-  });
-};
+  })
+}
 
 // Create a new cloud-optimized GeoTIFF (COG) layer
 export const cogLayer = (url) => {
   return new WebGLTileLayer({
     source: new GeoTIFF({
       sources: [{ url }],
-      convertToRGB: "auto",
+      convertToRGB: true,
     }),
-  });
-};
+  })
+}

data/app/models/concerns/geoblacklight/bbox_filter_query.rb

@@ -2,23 +2,21 @@
 
 module Geoblacklight
   class BboxFilterQuery
-    def self.call(_search_builder, filter, solr_params)
-      bbox_filter_query = Geoblacklight::BboxFilterQuery.new(filter, solr_params)
-
-      [bbox_filter_query.intersects_filter, bbox_filter_query.relevancy_boost]
+    def call(filter, solr_params)
+      @filter = filter
+      [intersects_filter, relevancy_boost(solr_params)]
     end
 
-    def initialize(filter, solr_params)
-      @filter = filter
-      @solr_params = solr_params
+    def initialize(blacklight_config:)
+      @blacklight_config = blacklight_config
     end
 
     def intersects_filter
       "#{@filter.key}:\"Intersects(#{envelope_bounds})\""
     end
 
-    def relevancy_boost
-      boosted_params = @solr_params.slice(:bq, :bf)
+    def relevancy_boost(solr_params)
+      boosted_params = solr_params.slice(:bq, :bf)
 
       boosted_params[:bq] ||= []
       boosted_params[:bq] << "#{@filter.key}:\"IsWithin(#{envelope_bounds})\"#{boost}"