geoblacklight 4.4.1 → 5.0.0.pre.alpha.11

data/app/javascript/geoblacklight/leaflet/controls/layer_opacity.js

@@ -0,0 +1,120 @@
+import { DomUtil, DomEvent, Control } from "leaflet";
+import { getLayerOpacity } from "geoblacklight/leaflet/utils";
+
+export default class LayerOpacityControl extends Control {
+  constructor(layer, options = {}) {
+    super(options);
+    this.options.position = "topleft";
+    var layers = [layer]
+    // Check if layer is actually a layer group
+    if (typeof layer.getLayers !== "undefined") {
+      layers = layer.getLayers();
+      layers = layers && layers[0] instanceof L.Layer ? layers : [layer];
+    } else {
+      this.layersOnLoad = Object.keys(layer).includes('_layers');
+    }
+    this.options.layer = layers[0];
+    this.options.layers = this.layersOnLoad ? [] : layers;
+  }
+
+  onAdd(map) {
+    const container = DomUtil.create("div", "opacity-control unselectable");
+    const controlArea = DomUtil.create("div", "opacity-area", container);
+    const handle = DomUtil.create("div", "opacity-handle", container);
+    const handleArrowUp = DomUtil.create("div", "opacity-arrow-up", handle);
+    const handleText = DomUtil.create("div", "opacity-text", handle);
+    const handleArrowDown = DomUtil.create("div", "opacity-arrow-down", handle);
+    const bottom = DomUtil.create("div", "opacity-bottom", container);
+
+    DomEvent.stopPropagation(container);
+    DomEvent.disableClickPropagation(container);
+    this.setListeners(handle, bottom, handleText, map);
+
+    handle.setAttribute("tabindex", "0");
+    let opacity =  getLayerOpacity(this.options.layer);
+    const opacityPercentage = parseInt(opacity * 100);
+    handle.style.zIndex = 4;
+    handle.style.top = `calc(100% - ${opacityPercentage}% - 12px)`;
+    handleText.innerHTML = `${opacityPercentage}%`;
+    return container;
+  }
+
+  updateMapOpacity(opacity) {
+    this.options.layers.forEach((layer) => this.layerOpacity(layer, opacity))
+  }
+
+  layerOpacity(layer, opacity) {
+    try {
+      layer.setStyle({"fillOpacity": opacity, "opacity": opacity})
+    } catch {
+      try {
+        layer.setOpacity(opacity);
+      } catch {
+        console.log(layer)
+      }
+    }
+  }
+
+  setListeners(handle, bottom, handleText, map) {
+    let start = false;
+    let startTop;
+
+    DomEvent.on(document, "mousemove", (e) => {
+      if (!start) return;
+      const percentInverse =
+        Math.max(0, Math.min(200, startTop + parseInt(e.clientY, 10) - start)) /
+        2;
+      handle.style.top = `${percentInverse * 2 - 13}px`;
+      handleText.innerHTML = `${Math.round((1 - percentInverse / 100) * 100)}%`;
+      bottom.style.height = `${Math.max(0, (100 - percentInverse) * 2 - 13)}px`;
+      bottom.style.top = `${Math.min(200, percentInverse * 2 + 13)}px`;
+      this.updateMapOpacity(1 - percentInverse / 100);
+    });
+
+    DomEvent.on(handle, "mousedown", (e) => {
+      start = parseInt(e.clientY, 10);
+      startTop = handle.offsetTop - 12;
+      return false;
+    });
+
+    DomEvent.on(document, "mouseup", () => {
+      start = null;
+    });
+
+    let _this = this;
+    DomEvent.on(map, 'layeradd', function(e) {
+      if (e.layer.options.addToOpacitySlider || (_this.layersOnLoad && e.layer instanceof L.Layer)){
+        _this.options.layers.push(e.layer);
+      }
+    });
+
+    DomEvent.on(map, 'layerremove', function(e) {
+      if (e.layer.options.addToOpacitySlider){
+        const index = _this.options.layers.indexOf(e.layer);
+        if (index) { _this.options.layers.splice(index, 1)};
+      }
+    });
+
+
+    DomEvent.on(handle, 'keydown', function(e) {
+      const opacity = _this.geoJSON ? _this.options.layer.style.fillOpacity : _this.options.layer.options.opacity;
+      const step = 1;
+      var newOpacity;
+      if (e.key == 'ArrowDown'){
+        newOpacity = opacity * 100 - step;
+      } else if (e.key == 'ArrowUp') {
+        newOpacity = opacity * 100 + step;
+      } else {
+        return;
+      }
+      e.preventDefault();
+      if (newOpacity > 100 || newOpacity < 0) { return; }
+      newOpacity = Math.round(newOpacity)
+      handle.style.top = `calc(100% - ${newOpacity}% - 12px)`;
+      handleText.innerHTML = newOpacity + "%";
+      bottom.style.height = newOpacity + "%";
+      bottom.style.top = `calc(100% - ${newOpacity}%)`;
+      _this.updateMapOpacity(newOpacity / 100)
+    });
+  }
+}

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

@@ -0,0 +1,195 @@
+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');
+
+  // Inspect on click
+  map.on("click", async (e) => {
+    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);
+
+    const wmsoptions = {
+      URL: url,
+      LAYERS: layerId,
+      BBOX: map.getBounds().toBBoxString(),
+      WIDTH: Math.round(document.getElementById("leaflet-viewer").clientWidth),
+      HEIGHT: Math.round(document.getElementById("leaflet-viewer").clientHeight),
+      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"),
+        },
+        body: JSON.stringify(wmsoptions),
+      });
+
+      if (!response.ok) throw new Error("Network response was not ok.");
+
+      const response_data = await response.json();
+
+      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;
+      }
+      const data = response_data.features[0];
+      if (!data.isHTML) overlayLayer(map, data, layer);
+
+      populateAttributeTable(data);
+    } catch (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;
+
+  let overlayLayer;
+
+  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 });
+  } else {
+    overlayLayer = L.geoJSON(data, {
+      color: color,
+      opacity: opacity,
+      addToOpacitySlider: true,
+      highlightLayer: true,
+      pointToLayer: function(feature, latlng) {
+        return L.circleMarker(latlng, {
+          radius: 8,
+          fillColor: color,
+          color: color,
+          weight: 1,
+          opacity: opacity,
+          fillOpacity: opacity
+        });
+      }
+    });
+  }
+  L.layerGroup([overlayLayer]).addTo(map);
+}
+
+export const tiledMapLayerInspection = (map, layer) => {
+  this.map.on("click", (e) => {
+    this.appendLoadingMessage();
+
+    // Query layer at click location
+    identifyFeatures({
+      url: layer.options.url,
+      useCors: true,
+    })
+      .tolerance(0)
+      .returnGeometry(true)
+      .on(map)
+      .at(e.latlng)
+      .run((error, featureCollection) => {
+        if (error) {
+          this.appendErrorMessage();
+        } else {
+          this.populateAttributeTable(featureCollection.features[0]);
+        }
+      });
+  });
+}
+
+export const dynamicMapLayerInspection = (map, layer, layerId) => {
+  // add crosshair class for map items
+  map.getContainer().classList.add('leaflet-clickable');
+
+  // Inspect on click
+  map.on("click", (e) => {
+    appendLoadingMessage();
+
+    // Query layer at click location
+    const identify = identifyFeatures({
+      url: layer.options.url,
+      useCors: true,
+    })
+      .tolerance(2)
+      .returnGeometry(true)
+      .on(map)
+      .at(e.latlng);
+
+    // Query specific layer if dynamicLayerId is set
+    if (layerId) {
+      identify.layers("all: " + layerId);
+    }
+
+    identify.run((error, featureCollection, response) => {
+      if (error || response.results < 1) {
+        appendErrorMessage();
+      } else {
+        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;
+      if (overlay) {
+        overlay.classList.add('leaflet-clickable');
+      }
+    });
+  });
+
+  // Inspect on click
+  layer.on("click", (e) => {
+    const distance = 3000 / (1 + map.getZoom());
+
+    appendLoadingMessage();
+
+    // Query layer at click location
+    layer
+      .query()
+      .returnGeometry(true)
+      .nearby(e.latlng, distance)
+      .run((error, featureCollection) => {
+        if (error || !featureCollection.features.length) {
+          appendErrorMessage();
+        } else {
+          overlayLayer(map, featureCollection.features[0], layer);
+          populateAttributeTable(featureCollection.features[0]);
+        }
+      });
+  });
+}
+
+const populateAttributeTable = (feature) => {
+  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>";
+
+  const tableBody = document.querySelector(".attribute-table-body");
+  if (tableBody) {
+    tableBody.outerHTML = html; // Replace existing table body with new content
+  }
+}

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

@@ -0,0 +1,120 @@
+const indexMapInfoTemplate = (data) => `
+  <div class="index-map-info">
+    ${data.title
+        ? `
+      <div class="col-sm-12">
+        <h3>${data.title}</h3>
+      </div>`
+        : ""
+    }
+    <div class="col-sm-12">
+      ${data.thumbnailUrl
+        ? `
+        ${data.websiteUrl
+            ? `
+          <a href="${data.websiteUrl}">
+            <img src="${data.thumbnailUrl}" class="img-responsive">
+          </a>`
+            : `
+          <img src="${data.thumbnailUrl}">`
+        }`
+        : ""
+    }
+      <dl class="row dl-invert document-metadata">
+        ${data.websiteUrl
+        ? `
+          <dt class="col-sm-3">Website:</dt>
+          <dd class="col-sm-9"><a href="${data.websiteUrl}">${data.websiteUrl}</a></dd>`
+        : ""
+    }
+        ${data.downloadUrl
+        ? `
+          <dt class="col-sm-3">Download:</dt>
+          <dd class="col-sm-9"><a href="${data.downloadUrl}">${data.downloadUrl}</a></dd>`
+        : ""
+    }
+        ${data.recordIdentifier
+        ? `
+          <dt class="col-sm-3">Record Identifier:</dt>
+          <dd class="col-sm-9">${data.recordIdentifier}</dd>`
+        : ""
+    }
+        ${data.label
+        ? `
+          <dt class="col-sm-3">Label:</dt>
+          <dd class="col-sm-9">${data.label}</dd>`
+        : ""
+    }
+        ${data.note
+        ? `
+          <dt class="col-sm-3">Note:</dt>
+          <dd class="col-sm-9">${data.note}</dd>`
+        : ""
+    }
+      </dl>
+    </div>
+  </div>`;
+  
+const indexMapDownloadTemplate = (data) =>
+    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
+        }">
+            ${data.label ? data.label : "Download"}
+          </a>
+        </div>
+      </li>
+    </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
+        }
+    });
+};
+
+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
+}
+
+export const updateInformation = (properties) => {
+    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");
+
+        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

@@ -0,0 +1,59 @@
+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];
+
+  // Generate URL with Leaflet.TileLayer URL template formatting
+  const tileURL = resourceElement
+    .getAttribute("template")
+    .replace("{Style}", getStyle(selectedLayer))
+    .replace("{TileMatrixSet}", getTileMatrixSet(selectedLayer))
+    .replace("TileMatrix", "z")
+    .replace("TileCol", "x")
+    .replace("TileRow", "y");
+
+  return { url: tileURL, bounds: getBounds(selectedLayer) };
+}
+
+const findLayer = (layers, layerId) => {
+  if (layers.length === 1) {
+    return layers[0];
+  } else {
+    for (let i = 0; i < layers.length; i++) {
+      const ids = layers[i].getElementsByTagName("ows:Identifier");
+      for (let x = 0; x < ids.length; x++) {
+        if (ids[x].textContent === layerId) {
+          return layers[i];
+        }
+      }
+    }
+  }
+}
+
+const getStyle = (layer) => {
+  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 getBounds = (layer) => {
+  const lcElement = layer.getElementsByTagName("ows:LowerCorner")[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);
+  }
+}

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

@@ -0,0 +1,153 @@
+/** This file contains methods for creating the various types of leaflet and esri-leaflet layers required in leaflet_viewer_controller.
+ * 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";
+
+// Create a leaflet tile layer for WMS
+export const wmsLayer = (url, { layerId, opacity, detectRetina }) => {
+  return tileLayer.wms(url, {
+    layers: layerId,
+    format: "image/png",
+    transparent: true,
+    tiled: true,
+    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 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 } : {};
+  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];
+
+  // If the last segment is an integer it's the layer ID
+  let layerId;
+  if (Number(lastSegment) === parseInt(lastSegment, 10)) {
+    layerId = lastSegment;
+    url = url.slice(0, -(lastSegment.length + 1));
+  }
+
+  const options = layerId ? { layers: [layerId] } : {};
+  return dynamicMapLayer({
+    url,
+    opacity,
+    detectRetina,
+    ...options,
+  });
+};
+
+// Create an ESRI-leaflet feature layer
+export const esriFeatureLayer = (url, { opacity, detectRetina }) => {
+  return featureLayer({
+    url,
+    opacity,
+    detectRetina,
+  });
+};
+
+// Create an ESRI tiled map layer
+export const esriTiledMapLayer = async (url, options) => {
+  const response = await fetch(url);
+
+  if (!response.ok)
+    throw new Error("Unable to fetch EsriTiledMapLayer document", url);
+
+  let layerInfo;
+  try {
+    layerInfo = await response.json();
+  } catch (error) {
+    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 });
+  }
+};
+
+// Create a leaflet tile layer 
+export const tileJsonLayer = async (url, options) => {
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error("Unable to fetch TiledJson document", url);
+  }
+
+  const layerInfo = await response.json();
+
+  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;
+
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error("Unable to fetch indexMapLayer document", url);
+  }
+
+  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),
+    onEachFeature: (feature, layer) => {
+      if (feature.properties.label !== null) {
+        layer.bindTooltip(feature.properties.label);
+      }
+      if (feature.properties.available !== null) {
+        layer.on("click", (e) => {
+          layer.setStyle(leafletOptions.LAYERS.INDEX.SELECTED);
+          if (prevLayer !== null) {
+            leafletOptions.opacity = layer.options.fillOpacity;
+            geoJSONLayer.resetStyle(prevLayer);
+          }
+          prevLayer = layer;
+          updateInformation(feature.properties);
+        });
+      }
+    },
+    pointToLayer: (feature, latlng) => circleMarker(latlng),
+  });
+
+  return geoJSONLayer;
+};