geoblacklight 5.3.0 → 6.0.0.pre.alpha.1

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

@@ -1,17 +1,17 @@
-import { identifyFeatures } from "esri-leaflet";
-import { appendErrorMessage, appendLoadingMessage, getLayerOpacity, linkify } from "geoblacklight/leaflet/utils";
+import { identifyFeatures } from "esri-leaflet"
+import { appendErrorMessage, appendLoadingMessage, getLayerOpacity, linkify } from "geoblacklight/leaflet/utils"
 
 export const wmsInspection = (map, url, layerId, layer) => {
   // add crosshair class for map items
-  map.getContainer().classList.add('leaflet-clickable');
+  map.getContainer().classList.add("leaflet-clickable")
 
   // Inspect on click
   map.on("click", async (e) => {
-    const spinner = document.createElement("tbody");
-    spinner.className = "attribute-table-body";
+    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 wmsoptions = {
       URL: url,
@@ -22,75 +22,84 @@ export const wmsInspection = (map, url, layerId, layer) => {
       QUERY_LAYERS: layerId,
       X: Math.round(e.containerPoint.x),
       Y: Math.round(e.containerPoint.y),
-    };
+    }
 
     try {
       const response = await fetch("/wms/handle", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "X-CSRF-Token": document
-            .querySelector('meta[name="csrf-token"]')
-            .getAttribute("content"),
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
         },
         body: JSON.stringify(wmsoptions),
-      });
+      })
 
-      if (!response.ok) throw new Error("Network response was not ok.");
+      if (!response.ok) throw new Error("Network response was not ok.")
 
-      const response_data = await response.json();
+      const response_data = await response.json()
 
-      if (response_data.hasOwnProperty("error") || response_data.hasOwnProperty('exceptions') || response_data.features.length === 0) {
+      if (
+        response_data.hasOwnProperty("error") ||
+        response_data.hasOwnProperty("exceptions") ||
+        response_data.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 data = response_data.features[0];
-      if (!data.isHTML) overlayLayer(map, data, layer);
+      const data = response_data.features[0]
+      if (!data.isHTML) overlayLayer(map, data, layer)
 
-      populateAttributeTable(data);
+      populateAttributeTable(data)
     } catch (error) {
-      console.error("Fetch error: ", error);
+      console.error("Fetch error: ", error)
     }
-  });
+  })
 }
 
 export const overlayLayer = (map, data, layer) => {
-  const highlightLayerOld = Object.values(map._layers).filter(layer => layer.options.highlightLayer);
-  if (highlightLayerOld[0]) highlightLayerOld.map(layer => map.removeLayer(layer));
-  if (!data) return;
+  const highlightLayerOld = Object.values(map._layers).filter((layer) => layer.options.highlightLayer)
+  if (highlightLayerOld[0]) highlightLayerOld.map((layer) => map.removeLayer(layer))
+  if (!data) return
 
-  let overlayLayer;
+  let overlayLayer
 
-  const opacity = getLayerOpacity(layer);
-  const color = map.options.selected_color;
+  const opacity = getLayerOpacity(layer)
+  const color = map.options.selected_color
 
   if (data._latlngs) {
-    overlayLayer = L.polygon(data._latlngs, {color: color, weight: 2, layer: true, fillOpacity: opacity, addToOpacitySlider: true, highlightLayer: true });
+    overlayLayer = L.polygon(data._latlngs, {
+      color: color,
+      weight: 2,
+      layer: true,
+      fillOpacity: opacity,
+      addToOpacitySlider: true,
+      highlightLayer: true,
+    })
   } else {
     overlayLayer = L.geoJSON(data, {
       color: color,
       opacity: opacity,
       addToOpacitySlider: true,
       highlightLayer: true,
-      pointToLayer: function(feature, latlng) {
+      pointToLayer: function (feature, latlng) {
         return L.circleMarker(latlng, {
           radius: 8,
           fillColor: color,
           color: color,
           weight: 1,
           opacity: opacity,
-          fillOpacity: opacity
-        });
-      }
-    });
+          fillOpacity: opacity,
+        })
+      },
+    })
   }
-  L.layerGroup([overlayLayer]).addTo(map);
+  L.layerGroup([overlayLayer]).addTo(map)
 }
 
 export const tiledMapLayerInspection = (map, layer) => {
   this.map.on("click", (e) => {
-    this.appendLoadingMessage();
+    this.appendLoadingMessage()
 
     // Query layer at click location
     identifyFeatures({
@@ -103,21 +112,21 @@ export const tiledMapLayerInspection = (map, layer) => {
       .at(e.latlng)
       .run((error, featureCollection) => {
         if (error) {
-          this.appendErrorMessage();
+          this.appendErrorMessage()
         } else {
-          this.populateAttributeTable(featureCollection.features[0]);
+          this.populateAttributeTable(featureCollection.features[0])
         }
-      });
-  });
+      })
+  })
 }
 
 export const dynamicMapLayerInspection = (map, layer, layerId) => {
   // add crosshair class for map items
-  map.getContainer().classList.add('leaflet-clickable');
+  map.getContainer().classList.add("leaflet-clickable")
 
   // Inspect on click
   map.on("click", (e) => {
-    appendLoadingMessage();
+    appendLoadingMessage()
 
     // Query layer at click location
     const identify = identifyFeatures({
@@ -127,40 +136,40 @@ export const dynamicMapLayerInspection = (map, layer, layerId) => {
       .tolerance(2)
       .returnGeometry(true)
       .on(map)
-      .at(e.latlng);
+      .at(e.latlng)
 
     // Query specific layer if dynamicLayerId is set
     if (layerId) {
-      identify.layers("all: " + layerId);
+      identify.layers("all: " + layerId)
     }
 
     identify.run((error, featureCollection, response) => {
       if (error || response.results < 1) {
-        appendErrorMessage();
+        appendErrorMessage()
       } else {
-        overlayLayer(map, featureCollection.features[0], layer);
-        populateAttributeTable(featureCollection.features[0]);
+        overlayLayer(map, featureCollection.features[0], layer)
+        populateAttributeTable(featureCollection.features[0])
       }
-    });
-  });
+    })
+  })
 }
 
 export const featureLayerInspection = (map, layer) => {
   // add crosshair class for map items
-  layer.on('load', function() {
-    this.eachFeature(function(layer) {
-      var overlay = layer._path ? layer._path : layer._icon;
+  layer.on("load", function () {
+    this.eachFeature(function (layer) {
+      var overlay = layer._path ? layer._path : layer._icon
       if (overlay) {
-        overlay.classList.add('leaflet-clickable');
+        overlay.classList.add("leaflet-clickable")
       }
-    });
-  });
+    })
+  })
 
   // Inspect on click
   layer.on("click", (e) => {
-    const distance = 3000 / (1 + map.getZoom());
+    const distance = 3000 / (1 + map.getZoom())
 
-    appendLoadingMessage();
+    appendLoadingMessage()
 
     // Query layer at click location
     layer
@@ -169,27 +178,27 @@ export const featureLayerInspection = (map, layer) => {
       .nearby(e.latlng, distance)
       .run((error, featureCollection) => {
         if (error || !featureCollection.features.length) {
-          appendErrorMessage();
+          appendErrorMessage()
         } else {
-          overlayLayer(map, featureCollection.features[0], layer);
-          populateAttributeTable(featureCollection.features[0]);
+          overlayLayer(map, featureCollection.features[0], layer)
+          populateAttributeTable(featureCollection.features[0])
         }
-      });
-  });
+      })
+  })
 }
 
 const populateAttributeTable = (feature) => {
-  let html = '<tbody class="attribute-table-body">';
+  let html = '<tbody class="attribute-table-body">'
 
   // Step through properties and append to table
   Object.keys(feature.properties).forEach((property) => {
     html += `<tr><td>${property}</td>
-               <td>${linkify(feature.properties[property])}</td></tr>`;
-  });
-  html += "</tbody>";
+               <td>${linkify(feature.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/leaflet/layer_index_map.js

@@ -1,6 +1,7 @@
 const indexMapInfoTemplate = (data) => `
   <div class="index-map-info">
-    ${data.title
+    ${
+      data.title
         ? `
       <div class="col-sm-12">
         <h3>${data.title}</h3>
@@ -8,9 +9,11 @@ const indexMapInfoTemplate = (data) => `
         : ""
     }
     <div class="col-sm-12">
-      ${data.thumbnailUrl
-        ? `
-        ${data.websiteUrl
+      ${
+        data.thumbnailUrl
+          ? `
+        ${
+          data.websiteUrl
             ? `
           <a href="${data.websiteUrl}">
             <img src="${data.thumbnailUrl}" class="img-responsive">
@@ -18,53 +21,57 @@ const indexMapInfoTemplate = (data) => `
             : `
           <img src="${data.thumbnailUrl}">`
         }`
-        : ""
-    }
+          : ""
+      }
       <dl class="row dl-invert document-metadata">
-        ${data.websiteUrl
-        ? `
+        ${
+          data.websiteUrl
+            ? `
           <dt class="col-sm-3">Website:</dt>
           <dd class="col-sm-9"><a href="${data.websiteUrl}">${data.websiteUrl}</a></dd>`
-        : ""
-    }
-        ${data.downloadUrl
-        ? `
+            : ""
+        }
+        ${
+          data.downloadUrl
+            ? `
           <dt class="col-sm-3">Download:</dt>
           <dd class="col-sm-9"><a href="${data.downloadUrl}">${data.downloadUrl}</a></dd>`
-        : ""
-    }
-        ${data.recordIdentifier
-        ? `
+            : ""
+        }
+        ${
+          data.recordIdentifier
+            ? `
           <dt class="col-sm-3">Record Identifier:</dt>
           <dd class="col-sm-9">${data.recordIdentifier}</dd>`
-        : ""
-    }
-        ${data.label
-        ? `
+            : ""
+        }
+        ${
+          data.label
+            ? `
           <dt class="col-sm-3">Label:</dt>
           <dd class="col-sm-9">${data.label}</dd>`
-        : ""
-    }
-        ${data.note
-        ? `
+            : ""
+        }
+        ${
+          data.note
+            ? `
           <dt class="col-sm-3">Note:</dt>
           <dd class="col-sm-9">${data.note}</dd>`
-        : ""
-    }
+            : ""
+        }
       </dl>
     </div>
-  </div>`;
-  
+  </div>`
+
 const indexMapDownloadTemplate = (data) =>
-    data.downloadUrl
-        ? `
+  data.downloadUrl
+    ? `
   <li class="list-group-item download js-index-map-feature">
     <h3 class="card-subtitle">Selected feature</h3>
     <ul class="list-group list-group-flush list-group-nested">
       <li class="list-group-item download">
         <div class="download-link-container">
-          <a class="btn btn-default download download-original" href="${data.downloadUrl
-        }">
+          <a class="btn btn-default download download-original" href="${data.downloadUrl}">
             ${data.label ? data.label : "Download"}
           </a>
         </div>
@@ -72,49 +79,47 @@ const indexMapDownloadTemplate = (data) =>
     </ul>
   </li>
 `
-        : "";
+    : ""
 
 const indexMapTemplate = (data) => {
-    return new Promise((resolve) => {
-        if (data.iiifUrl && !data.thumbnailUrl) {
-            fetch(data.iiifUrl)
-                .then((response) => response.json())
-                .then((manifestResponse) => {
-                    if (manifestResponse.thumbnail["@id"] !== null) {
-                        data.thumbnailUrl = manifestResponse.thumbnail["@id"];
-                    }
-                    resolve(data); // Resolve the modified data
-                })
-                .catch(() => resolve(data)); // In case of error, resolve with original data
-        } else {
-            resolve(data); // Immediately resolve if no iiifUrl
-        }
-    });
-};
+  return new Promise((resolve) => {
+    if (data.iiifUrl && !data.thumbnailUrl) {
+      fetch(data.iiifUrl)
+        .then((response) => response.json())
+        .then((manifestResponse) => {
+          if (manifestResponse.thumbnail["@id"] !== null) {
+            data.thumbnailUrl = manifestResponse.thumbnail["@id"]
+          }
+          resolve(data) // Resolve the modified data
+        })
+        .catch(() => resolve(data)) // In case of error, resolve with original data
+    } else {
+      resolve(data) // Immediately resolve if no iiifUrl
+    }
+  })
+}
 
 export const availabilityStyle = (availability, leafletOptions) => {
-    var style = availability || typeof availability === "undefined"
-        ? leafletOptions.LAYERS.INDEX.DEFAULT
-        : leafletOptions.LAYERS.INDEX.UNAVAILABLE;
-    style['fillOpacity'] = leafletOptions.opacity || .65;
-    style['opacity'] = leafletOptions.opacity || .65;
-    return style
+  var style =
+    availability || typeof availability === "undefined"
+      ? leafletOptions.layers.index.DEFAULT
+      : leafletOptions.layers.index.UNAVAILABLE
+  style["fillOpacity"] = leafletOptions.opacity || 0.65
+  style["opacity"] = leafletOptions.opacity || 0.65
+  return style
 }
 
 export const updateInformation = (properties) => {
-    indexMapTemplate(properties).then((updatedProperties) => {
-        const indexMapHtml = indexMapInfoTemplate(updatedProperties);
-        document.querySelector(".viewer-information").innerHTML = indexMapHtml;
+  indexMapTemplate(properties).then((updatedProperties) => {
+    const indexMapHtml = indexMapInfoTemplate(updatedProperties)
+    document.querySelector(".viewer-information").innerHTML = indexMapHtml
 
-        const indexMapDownloadHtml =
-            indexMapDownloadTemplate(updatedProperties);
-        const downloadElement = document.querySelector(".js-download-list");
+    const indexMapDownloadHtml = indexMapDownloadTemplate(updatedProperties)
+    const downloadElement = document.querySelector(".js-download-list")
 
-        if (Boolean(downloadElement)) {
-            downloadElement.innerHTML += indexMapDownloadHtml; // Appends new download template
-            downloadElement
-                .querySelectorAll(".js-index-map-feature")
-                .forEach((elem) => elem.remove());
-        }
-    });
-};
+    if (Boolean(downloadElement)) {
+      downloadElement.innerHTML += indexMapDownloadHtml // Appends new download template
+      downloadElement.querySelectorAll(".js-index-map-feature").forEach((elem) => elem.remove())
+    }
+  })
+}

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