geoblacklight 4.4.2 → 5.0.0

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/controls/sleep.js

@@ -0,0 +1,100 @@
+import { DomUtil, DomEvent, Handler } from "leaflet";
+
+export default class Sleep extends Handler {
+  addHooks() {
+    const container = DomUtil.create("div", "wake-overlay w-100 h-100 position-absolute align-items-center justify-content-center", this._map._container);
+    const button = DomUtil.create("button", "btn btn-primary wake-button", container)
+
+    button.innerHTML = this._map.options.MESSAGE;
+    button.setAttribute("tabindex", "0");
+    button.style.zIndex = 2000;
+    container.style.zIndex = 1999;
+    const background = String(this._map.options.BACKGROUND);
+    container.style.background = background;
+    this.container = container;
+    if (this._map.options.MARGIN_DISTANCE) {
+      this.updateBasedOnSize()
+    } else {
+      this.sleepMap();
+    }
+    this.setListeners()
+  }
+
+  sleepMap() {
+    this._map.dragging.disable();
+    this._map.touchZoom.disable();
+    this._map.scrollWheelZoom.disable();
+    this._map.doubleClickZoom.disable();
+    this._map.boxZoom.disable();
+    this._map.keyboard.disable();  
+    this.container.classList.add('d-flex');
+    this.container.classList.remove('d-none');
+  }
+
+  wakeMap() {
+    this._map.dragging.enable();
+    this._map.touchZoom.enable();
+    this._map.scrollWheelZoom.enable();
+    this._map.doubleClickZoom.enable();
+    this._map.boxZoom.enable();
+    this._map.keyboard.enable();
+    this.container.classList.remove('d-flex');
+    this.container.classList.add('d-none');
+  }
+
+  updateBasedOnSize() {
+    const rect = this._map._container.getBoundingClientRect();
+    // sometimes the left/right side has larger margin, so we take an average
+    const calculation = ((window.innerWidth - rect.right) + rect.left) / 2;
+    if (calculation < this._map.options.MARGIN_DISTANCE) {
+      this.sleepMap();
+    } else {
+      this.wakeMap();
+    }
+  }
+
+  setListeners() {
+    const _this = this;
+    let timer;
+    let sleeptimer;
+
+    if (_this._map.options.MARGIN_DISTANCE){
+      window.addEventListener("resize", (event) => {
+        console.log(event)
+        _this.updateBasedOnSize();
+      })
+    }
+
+    DomEvent.on(_this.container, "click", (e) => {
+      _this.wakeMap()
+    });
+
+    DomEvent.on(_this.container, "focus", (e) => {
+      _this.wakeMap()
+    });
+
+    if (this._map.options.HOVERTOWAKE) {
+      DomEvent.on(this._map._container, "mouseenter", (e) => {
+        clearTimeout(sleeptimer);
+
+        timer = setTimeout(function() {
+          _this.wakeMap()
+        }, _this._map.options.WAKETIME);
+      
+      });
+
+      DomEvent.on(this._map._container, "mouseleave", (e) => {
+        clearTimeout(timer);
+      
+        sleeptimer = setTimeout(function() {
+          _this.sleepMap()
+        }, _this._map.options.SLEEPTIME);
+      });
+    }
+
+    DomEvent.on(this.container, "touchstart", (e) => {
+      _this.wakeMap()
+    });
+  }
+}
+

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