- <%= t('geoblacklight.references.wms_abv')%> <%= t('geoblacklight.references.wms_label')%> + diff --git a/app/controllers/download_controller.rb b/app/controllers/download_controller.rb index 59775aaa8..ae9648071 100644 --- a/app/controllers/download_controller.rb +++ b/app/controllers/download_controller.rb @@ -14,31 +14,31 @@ class DownloadController < ApplicationController download_type: "generated-#{params[:type]}" }) respond_to do |format| - format.json { render json: flash, response: response } - format.html { render json: flash, response: response } + format.json { render json: [flash, ""], response: response, status: 500 } + format.html { render json: [flash, ""], response: response, status: 500 } end end def show - @response, @document = search_service.fetch params[:id] + @document = search_service.fetch params[:id] restricted_should_authenticate response = check_type validate response respond_to do |format| - format.json { render json: flash, response: response } - format.html { render json: flash, response: response } + format.json { render json: [flash, download_file_path(response)], response: response } + format.html { render json: [flash, download_file_path(response)], response: response } end end def file # Grab the solr document to check if it should be public or not - @response, @document = search_service.fetch(file_name_to_id(params[:id])) + @document = search_service.fetch(file_name_to_id(params[:id])) restricted_should_authenticate send_file download_file_path_and_name, x_sendfile: true end def hgl - @response, @document = search_service.fetch params[:id] + @document = search_service.fetch params[:id] if params[:email] response = Geoblacklight::HglDownload.new(@document, params[:email]).get if response.nil? diff --git a/app/helpers/blacklight_helper.rb b/app/helpers/blacklight_helper.rb index 836d7ef34..61d51ec71 100644 --- a/app/helpers/blacklight_helper.rb +++ b/app/helpers/blacklight_helper.rb @@ -2,7 +2,6 @@ module BlacklightHelper include Blacklight::BlacklightHelperBehavior - include Geoblacklight::GeoblacklightHelperBehavior include Blacklight::CatalogHelperBehavior def render_document_sidebar_partial(document = @document) diff --git a/app/helpers/geoblacklight/geoblacklight_helper_behavior.rb b/app/helpers/geoblacklight/geoblacklight_helper_behavior.rb deleted file mode 100644 index 624f5f5ac..000000000 --- a/app/helpers/geoblacklight/geoblacklight_helper_behavior.rb +++ /dev/null @@ -1,18 +0,0 @@ -# frozen_string_literal: true - -## -# Adds helper behavior logic for GeoBlacklight, to used alongside -# BlacklightHelperBehavior -module Geoblacklight - module GeoblacklightHelperBehavior - include Blacklight::BlacklightHelperBehavior - - ## - # Calls the presenter on the requested method - # @param [Symbol, String] presenting_method - # @return [String] - def geoblacklight_present(presenting_method, document = @document) - document_presenter(document).try(presenting_method.to_sym) || "" - end - end -end diff --git a/app/helpers/geoblacklight_helper.rb b/app/helpers/geoblacklight_helper.rb index 339ea9811..426f18e0a 100644 --- a/app/helpers/geoblacklight_helper.rb +++ b/app/helpers/geoblacklight_helper.rb @@ -5,66 +5,10 @@ def document_available?(document = @document) document.public? || (document.same_institution? && user_signed_in?) end - def document_downloadable? - document_available? && @document.downloadable? - end - def iiif_jpg_url @document.references.iiif.endpoint.sub! "info.json", "full/full/0/default.jpg" end - def download_link_file(label, id, url) - link_to( - label, - url, - "contentUrl" => url, - :data => { - download: "trigger", - download_type: "direct", - download_id: id - } - ) - end - - def download_link_hgl(text, document) - link_to( - text, - download_hgl_path(id: document), - data: { - blacklight_modal: "trigger", - download: "trigger", - download_type: "harvard-hgl", - download_id: document.id - } - ) - end - - # Generates the link markup for the IIIF JPEG download - # @return [String] - def download_link_iiif - link_to( - download_text("JPG"), - iiif_jpg_url, - "contentUrl" => iiif_jpg_url, - :data => { - download: "trigger" - } - ) - end - - def download_link_generated(download_type, document) - link_to( - t("geoblacklight.download.export_link", download_format: export_format_label(download_type)), - "", - data: { - download_path: download_path(document.id, type: download_type), - download: "trigger", - download_type: download_type, - download_id: document.id - } - ) - end - ## # Blacklight catalog controller helper method to truncate field value to 150 chars # @param [SolrDocument] args @@ -76,10 +20,9 @@ def snippit(args) ## # Returns an SVG icon or empty HTML span element # @return [SVG or HTML tag] - # standard:disable Style/ArgumentsForwarding - # TODO: Remove linter disable after lowest supported Ruby version >= 3.2 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) @@ -87,19 +30,6 @@ def geoblacklight_icon(name, **args) tag.span class: "icon-missing geoblacklight-none" end end - # standard:enable Style/ArgumentsForwarding - - ## - # Looks up properly formatted names for formats - # - def proper_case_format(format) - t("geoblacklight.formats.#{format.to_s.parameterize(separator: "_")}") - end - - # Format labels are customized for exports - look up the appropriate key. - def export_format_label(format) - t("geoblacklight.download.export_#{format.to_s.parameterize(separator: "_")}_link") - end ## # Looks up formatted names for references @@ -109,15 +39,6 @@ def formatted_name_reference(reference) t "geoblacklight.references.#{reference}" end - ## - # Wraps download text with proper_case_format - # - def download_text(format) - download_format = proper_case_format(format) - value = t("geoblacklight.download.download_link", download_format: download_format) - value.html_safe - end - ## # Deteremines if a feature should include help text popover # @return [Boolean] @@ -132,7 +53,7 @@ def render_help_text_entry(feature, key) if I18n.exists?("geoblacklight.help_text.#{feature}.#{key}", locale) help_text = I18n.t("geoblacklight.help_text.#{feature}.#{key}") tag.h2 class: "help-text viewer_protocol h6" do - tag.a data: {toggle: "popover", title: help_text[:title], content: help_text[:content]} do + tag.a data: {"bs-toggle": "popover", title: help_text[:title], content: help_text[:content]} do help_text[:title] end end @@ -141,20 +62,6 @@ def render_help_text_entry(feature, key) end end - ## - # Determines if item view should render the sidebar static map - # @return [Boolean] - def render_sidebar_map?(document) - Settings.SIDEBAR_STATIC_MAP&.any? { |vp| document.viewer_protocol == vp } - end - - ## - # Deteremines if item view should include attribute table - # @return [Boolean] - def show_attribute_table? - document_available? && @document.inspectable? - end - ## # Render value for a document's field as a truncate abstract # div. Arguments come from Blacklight::DocumentPresenter's @@ -222,7 +129,7 @@ def relations_icon(document, icon) geoblacklight_icon(icon, **{}) end - ## Returns the data-map attribute value used as the JS map selector + ## Returns the data-page attribute value used as the JS map selector def results_js_map_selector(controller_name) case controller_name when "bookmarks" @@ -231,14 +138,4 @@ def results_js_map_selector(controller_name) "index" end end - - def openlayers_container? - return false unless @document - @document.item_viewer.pmtiles || @document.item_viewer.cog - end - - def iiif_manifest_container? - return false unless @document - @document&.item_viewer&.viewer_preference&.key?(:iiif_manifest) - end end diff --git a/app/javascript/clover/clover_initializer.js b/app/javascript/clover/clover_initializer.js deleted file mode 100644 index 0d663750b..000000000 --- a/app/javascript/clover/clover_initializer.js +++ /dev/null @@ -1,29 +0,0 @@ -import { createElement } from 'react' -import { createRoot } from 'react-dom/client' -import Viewer from '@samvera/clover-iiif/viewer' - -export default class CloverInitializer { - constructor () { - this.element = document.getElementById('clover-viewer') - if (this.element) { - this.iiif_content = this.element.attributes['iiif_content'].value - } - } - - run () { - if (!this.iiif_content) return false - const root = createRoot(document.getElementById('clover-viewer')) - root.render(createElement(Viewer, { id: this.iiif_content, options: this.config })) - } - - get config () { - return { - showTitle: false, - showIIIFBadge: false, - informationPanel: { - renderToggle: false, - renderAbout: false - } - } - } -} diff --git a/app/javascript/geoblacklight/controllers/clipboard_controller.js b/app/javascript/geoblacklight/controllers/clipboard_controller.js new file mode 100644 index 000000000..9be546621 --- /dev/null +++ b/app/javascript/geoblacklight/controllers/clipboard_controller.js @@ -0,0 +1,11 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ["alert"]; + + async copyToClipboard(event) { + let text = event.target.dataset.clipboardValue; + await navigator.clipboard.writeText(text) + this.alertTarget.classList.remove('d-none'); + } +} diff --git a/app/javascript/geoblacklight/controllers/clover_viewer_controller.js b/app/javascript/geoblacklight/controllers/clover_viewer_controller.js new file mode 100644 index 000000000..6e1fe382c --- /dev/null +++ b/app/javascript/geoblacklight/controllers/clover_viewer_controller.js @@ -0,0 +1,47 @@ +import { createElement } from "react"; +import { createRoot } from "react-dom/client"; +import Viewer from "@samvera/clover-iiif/viewer"; +import Image from "@samvera/clover-iiif/image"; +import { Controller } from "@hotwired/stimulus"; + +const viewerOptions = { + showTitle: false, + showIIIFBadge: false, + informationPanel: { + renderToggle: false, + renderAbout: false, + }, +}; + +export default class CloverViewerController extends Controller { + static values = { + url: String, + protocol: String, + }; + + connect() { + const root = createRoot(this.element); + root.render(this.getViewer(this.protocolValue, this.urlValue)); + } + + getViewer(protocol, url) { + if (protocol == "Iiif") { + // Create a wrapper div with inline style, as recommended in the docs: + // https://samvera-labs.github.io/clover-iiif/docs/image#react + return createElement( + "div", + { style: { height: 400 } }, + createElement(Image, { + src: url.replace(/\/info\.json$/, ""), + isTiledImage: true, + }) + ); + } + if (protocol == "IiifManifest") + return createElement(Viewer, { + iiifContent: url, + options: viewerOptions, + }); + console.error(`Unsupported protocol name: "${protocol}"`); + } +} diff --git a/app/javascript/geoblacklight/controllers/downloads_controller.js b/app/javascript/geoblacklight/controllers/downloads_controller.js new file mode 100644 index 000000000..ce6797793 --- /dev/null +++ b/app/javascript/geoblacklight/controllers/downloads_controller.js @@ -0,0 +1,56 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + download(ev) { + ev.preventDefault(); + if (this.downloading) { + return; + } + this.downloading = true; + ev.target.classList.add('download-in-progress'); + const url = ev.target.dataset.downloadPath; + ev.target.removeAttribute('href'); + ev.target.innerHTML = ' 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; + }); + } + return response.json(); + }) + .then((data) => this.complete(data, 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]); + //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]); + } + + renderMessage(message) { + Object.entries(message).forEach(([idx, msg]) => { + const flash = document.createElement("div"); + flash.className = `alert alert-${msg[0]}`; + flash.innerHTML = `×${msg[1]}`; + document.querySelector("div.flash_messages").appendChild(flash); + }); + } +} diff --git a/app/javascript/geoblacklight/controllers/leaflet_viewer_controller.js b/app/javascript/geoblacklight/controllers/leaflet_viewer_controller.js new file mode 100644 index 000000000..568c6a7d0 --- /dev/null +++ b/app/javascript/geoblacklight/controllers/leaflet_viewer_controller.js @@ -0,0 +1,216 @@ +import { Icon, Control } from "leaflet"; +import "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.js"; +import LayerOpacityControl from "geoblacklight/leaflet/controls/layer_opacity.js"; +import GeoSearchControl from "geoblacklight/leaflet/controls/geosearch.js"; +import { wmsInspection, + tiledMapLayerInspection, + featureLayerInspection, + dynamicMapLayerInspection +} from "geoblacklight/leaflet/inspection.js"; +import { + esriDynamicMapLayer, + esriFeatureLayer, + esriTiledMapLayer, + tileJsonLayer, + wmsLayer, + wmtsLayer, + indexMapLayer, +} from "geoblacklight/leaflet/layers.js"; +import { geoJSONToBounds } from "geoblacklight/leaflet/utils.js"; +import { DEFAULT_BOUNDS, DEFAULT_OPACITY, DEFAULT_GEOM_OVERLAY_OPTIONS } from "geoblacklight/leaflet/constants.js"; + +export default class LeafletViewerController extends Controller { + static values = { + url: String, + catalogBaseUrl: String, + protocol: String, + available: Boolean, + options: Object, + basemap: String, + mapGeom: Object, + page: String, + layerId: String, + drawInitialBounds: Boolean, + }; + + connect() { + // Sets leaflet icon paths to ex. /assets/marker-icon-2x-rails-fingerprint + // TODO: figure out why vite @leaftlet_images alias is not working. + Icon.Default.imagePath = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/"; + + // Set up layers + this.basemap = this.getBasemap(); + this.overlay = layerGroup(); + + // Calculate bounds + 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()]; + } + + // Create the map, add layers, fit the bounds + async loadMap() { + if (this.map) return; + + // Set up the map and fit to bounds + this.map = map(this.element); + 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(); + } else if (this.drawInitialBoundsValue && this.bounds) { + this.addBoundsOverlay(this.bounds); + } + + // Add configured controls + this.addControls(); + + if (this.protocolValue == "IndexMap"){ + this.fitBounds(this.previewOverlay.getBounds()) + } + + // Enable geosearch handler, if available + if (this.map.geosearch) this.map.geosearch.enable(); + + // Emit an event for other controllers to listen to + 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(); + } + + // Select the configured basemap to use + getBasemap() { + 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 || {}; + Object.entries(globalControls).forEach(([controlName, controlOptions]) => { + 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); + } + const fullscreenControl = this.getControl("Fullscreen"); + this.addControl(fullscreenControl); + } + } + + // Add a pre-configured L.Control instance to the 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 Control.Fullscreen({ position: "topright", ...controlOptions }); + if (controlName == "Geosearch") + 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; + var defaultOptions = hasMapGeomValue ? DEFAULT_GEOM_OVERLAY_OPTIONS : {}; + const options = {...defaultOptions, ...this.optionsValue.BOUNDSOVERLAY[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)); + + // Render the bounds overlay + this.boundsOverlay = boundsOverlay; + this.overlay.addLayer(boundsOverlay); + } + + // Remove the bounding box overlay + removeBoundsOverlay() { + if (this.boundsOverlay) this.overlay.removeLayer(this.boundsOverlay); + } + + addInspection() { + 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); + } + + // 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); + // 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); + // 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}"`); + } +} diff --git a/app/javascript/geoblacklight/controllers/oembed_viewer_controller.js b/app/javascript/geoblacklight/controllers/oembed_viewer_controller.js new file mode 100644 index 000000000..38524d25b --- /dev/null +++ b/app/javascript/geoblacklight/controllers/oembed_viewer_controller.js @@ -0,0 +1,18 @@ +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; + }) + .catch((error) => { + console.error("Error loading oEmbed data:", error); + }); + } +} diff --git a/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js b/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js new file mode 100644 index 000000000..ac83de9b3 --- /dev/null +++ b/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js @@ -0,0 +1,63 @@ +import { Map } from "ol"; +import TileLayer from "ol/layer/Tile"; +import XYZ from "ol/source/XYZ"; +import GeoJSON from "ol/format/GeoJSON"; +import { FullScreen, defaults as defaultControls } from "ol/control"; +import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers"; +import basemaps from "geoblacklight/openlayers/basemaps"; +import { Controller } from "@hotwired/stimulus"; + +export default class OpenlayersViewerController extends Controller { + static values = { + url: String, + protocol: String, + basemap: String, + mapGeom: String, + }; + + async connect() { + // Set up layers + this.basemap = this.getBasemap(); + this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue); + + await this.getBounds(); + // Load the map + this.loadMap(); + } + + // Create the map, add layers, and fit the bounds + loadMap() { + this.map = new Map({ + target: this.element, + controls: defaultControls().extend([new FullScreen()]), + layers: [this.basemap, this.overlay], + }); + this.map.getView().fit(this.extent, this.map.getSize()); + } + + async getBounds() { + if (this.protocolValue == 'Cog') { + const view = await this.overlay.getSource().getView(); + this.extent = view.extent; + } else { + this.extent = new GeoJSON() + .readFeatures(this.mapGeomValue)[0] + .getGeometry() + .getExtent(); + } + } + + // Select the configured basemap to use + getBasemap() { + const basemap = basemaps[this.basemapValue || "positron"]; + const layer = new TileLayer({ source: new XYZ(basemap) }); + return layer; + } + + // Generate a layer based on the protocol + getPreviewOverlay(protocol, url) { + if (protocol === "Pmtiles") return pmTilesLayer(url); + if (protocol === "Cog") return cogLayer(url); + console.error(`Unsupported protocol name: "${protocol}"`); + } +} diff --git a/app/javascript/geoblacklight/controllers/search_results_controller.js b/app/javascript/geoblacklight/controllers/search_results_controller.js new file mode 100644 index 000000000..12d3775d3 --- /dev/null +++ b/app/javascript/geoblacklight/controllers/search_results_controller.js @@ -0,0 +1,50 @@ +import { Controller } from "@hotwired/stimulus"; +import { geoJSONToBounds } from "geoblacklight/leaflet/utils"; +import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants"; + +export default class SearchResultsController extends Controller { + static targets = ["result"]; + static outlets = ["leaflet-viewer"]; + + // Fit the map to the combined bounding box of all search results + // If a bounding box query is already active, do not override it + fitResultBounds() { + if (new URL(window.location).searchParams.get("bbox")) return; + this.leafletViewerOutlet.fitBounds(this.getMaximalBounds()); + } + + // Get the bounding box of a search result from its data attributes + getResultBounds(resultElement) { + const geomElement = resultElement.querySelector("[data-geom]"); + if (geomElement && geomElement.dataset.geom) { + return geoJSONToBounds(JSON.parse(geomElement.dataset.geom)); + } + } + + // Find the combined bounding box of all search results + getMaximalBounds() { + const bounds = this.resultTargets.map(this.getResultBounds); + const nonNullBounds = bounds.filter((b) => b); + + if (nonNullBounds.length > 0) { + return nonNullBounds.reduce((max, b) => max.extend(b)); + } + + return DEFAULT_BOUNDS; + } + + // Preview the selected search result's bounding box on the map + previewResultOnMap(event) { + const geomElement = event.target.querySelector("[data-geom]"); + if (geomElement && geomElement.dataset.geom !== "") { + const geom = JSON.parse(geomElement.dataset.geom); + const bbox = geoJSONToBounds(geom); + this.leafletViewerOutlet.addBoundsOverlay(bbox); + } + } + + // Remove the previewed bounding box + clearPreview() { + this.leafletViewerOutlet.removeBoundsOverlay(); + } +} diff --git a/app/javascript/geoblacklight/core.js b/app/javascript/geoblacklight/core.js new file mode 100644 index 000000000..7b9dda3b2 --- /dev/null +++ b/app/javascript/geoblacklight/core.js @@ -0,0 +1,69 @@ +// Initializers +import initializePopovers from "geoblacklight/initializers/popovers"; +import initializeRelations from "geoblacklight/initializers/relations"; +import initializeTooltips from "geoblacklight/initializers/tooltips"; +import initializeTruncation from "geoblacklight/initializers/truncation"; +import initializeMetadataDownload from "geoblacklight/initializers/metadata_download"; + +// Stimulus controllers +import ClipboardController from "geoblacklight/controllers/clipboard_controller"; +import CloverViewerController from "geoblacklight/controllers/clover_viewer_controller"; +import DownloadsController from "geoblacklight/controllers/downloads_controller"; +import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"; +import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"; +import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"; +import SearchResultsController from "geoblacklight/controllers/search_results_controller"; + +// Inspired by Blacklight's javascript/blacklight/core.js +const Geoblacklight = (function () { + const callbacks = []; + return { + // Hook: pass a callback to add it to the activation stack + onLoad: function (callback) { + callbacks.push(callback); + }, + + // Activate all stored callbacks + activate: function (event) { + callbacks.forEach((callback) => { + callback(event); + }); + }, + + // Define hooks that will trigger the activation of the Geoblacklight JS + listeners: function () { + if (typeof Turbo !== "undefined") + return ["turbo:load", "turbo:frame-load"]; + else return ["DOMContentLoaded"]; + }, + }; +})(); + +// Add event listeners that call activate() for each event type +Geoblacklight.listeners().forEach((listener) => + document.addEventListener(listener, (event) => Geoblacklight.activate(event)) +); + +// Register our initializers +Geoblacklight.onLoad(initializePopovers); +Geoblacklight.onLoad(initializeRelations); +Geoblacklight.onLoad(initializeTooltips); +Geoblacklight.onLoad(initializeTruncation); +Geoblacklight.onLoad(initializeMetadataDownload); + +// Register our Stimulus controllers +if (typeof Stimulus !== "undefined") { + Stimulus.register("openlayers-viewer", OpenlayersViewerController); + Stimulus.register("clover-viewer", CloverViewerController); + Stimulus.register("oembed-viewer", OembedViewerController); + Stimulus.register("leaflet-viewer", LeafletViewerController); + Stimulus.register("search-results", SearchResultsController); + Stimulus.register("downloads", DownloadsController); + Stimulus.register("clipboard", ClipboardController); +} else { + console.error( + "Couldn't find Stimulus. Check installation instructions at https://github.com/hotwired/stimulus-rails." + ); +} + +export default Geoblacklight; diff --git a/app/javascript/geoblacklight/downloaders/downloader.js b/app/javascript/geoblacklight/downloaders/downloader.js deleted file mode 100644 index 84b8ea5b4..000000000 --- a/app/javascript/geoblacklight/downloaders/downloader.js +++ /dev/null @@ -1,62 +0,0 @@ -export default class GeoBlacklightDownloader { - constructor(el, options) { - this.el = el; - this.options = options || {}; - this.options.spinner = document.createElement("div"); - this.options.spinner.className = - "spinner-border spinner-border-sm float-right"; - this.options.spinner.role = "status"; - this.options.spinner.innerHTML = 'Downloading'; - this.options.spinner.style.display = "none"; - // @TODO: This spinner doesn't appear to work in GBL Proper anymore. - //document.querySelector('.exports .card-header').appendChild(this.options.spinner); - this.configureHandler(); - } - - configureHandler() { - this.el.addEventListener("click", (ev) => this.download(ev)); - } - - download(ev) { - ev.preventDefault(); - if (this.downloading) { - return; - } - this.downloading = true; - const url = this.el.getAttribute("data-download-path"); - this.options.spinner.style.display = "block"; - - fetch(url) - .then((response) => { - if (!response.ok) { - throw new Error("Network response was not ok"); - } - return response.json(); - }) - .then((data) => this.complete(data)) - .catch((error) => this.error(error)); - } - - complete(data) { - this.downloading = false; - this.el.disabled = false; - this.renderMessage(data); - this.options.spinner.style.display = "none"; - } - - error(data) { - console.error("Download error:", data); - this.downloading = false; - this.el.disabled = false; - this.options.spinner.style.display = "none"; - } - - renderMessage(message) { - Object.entries(message).forEach(([idx, msg]) => { - const flash = document.createElement("div"); - flash.className = `alert alert-${msg[0]}`; - flash.innerHTML = `×${msg[1]}`; - document.querySelector("div.flash_messages").appendChild(flash); - }); - } -} diff --git a/app/javascript/geoblacklight/downloaders/hgl_downloader.js b/app/javascript/geoblacklight/downloaders/hgl_downloader.js deleted file mode 100644 index 4779342e6..000000000 --- a/app/javascript/geoblacklight/downloaders/hgl_downloader.js +++ /dev/null @@ -1,41 +0,0 @@ -import GeoBlacklightDownloader from './downloader.js' - -export default class GeoBlacklightHglDownloader extends GeoBlacklightDownloader { - constructor(el, options) { - super(el, options); - this.configureHandler(); - } - - configureHandler() { - this.el.addEventListener('submit', (ev) => this.download(ev)); - } - - download(ev) { - ev.preventDefault(); - const modal = this.options.modal; // Assuming this is a DOM element or selector - if (typeof modal === 'string') { - document.querySelector(modal).style.display = 'none'; // Example way to hide modal, adjust as necessary - } else if (modal instanceof HTMLElement) { - modal.style.display = 'none'; // Directly hide if modal is a DOM element - } - - const email = this.el.querySelector('#requestEmail').value; - const url = this.el.querySelector('#requestUrl').value; - - fetch(url, { - method: 'GET', // GET is default, but explicitly stated here for clarity - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ email: email }) - }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(data => this.complete(data)) - .catch(error => this.error(error)); - } -} diff --git a/app/javascript/geoblacklight/downloads.js b/app/javascript/geoblacklight/downloads.js deleted file mode 100644 index 1d71cf0a9..000000000 --- a/app/javascript/geoblacklight/downloads.js +++ /dev/null @@ -1,17 +0,0 @@ -import GeoBlacklightDownloader from "./downloaders/downloader"; -import GeoBlacklightHglDownloader from "./downloaders/hgl_downloader"; - -export default function initializeDownloads() { - document.querySelectorAll("[data-download-path]").forEach((element) => { - new GeoBlacklightDownloader(element); - }); - - const modalElement = document.getElementById("blacklight-modal"); - modalElement.addEventListener("loaded.blacklight.blacklight-modal", () => { - modalElement.querySelectorAll("#hglRequest").forEach((element) => { - new GeoBlacklightHglDownloader(element, { - modal: modalElement, - }); - }); - }); -} diff --git a/app/javascript/geoblacklight/geoblacklight_initializer.js b/app/javascript/geoblacklight/geoblacklight_initializer.js deleted file mode 100644 index 4de2cc780..000000000 --- a/app/javascript/geoblacklight/geoblacklight_initializer.js +++ /dev/null @@ -1,17 +0,0 @@ -import initializePopovers from "./popovers.js"; -import initializeRelations from "./relations.js"; -import initializeTooltips from "./tooltips.js"; -import initializeTruncation from "./truncation.js"; -import initializeDownloads from "./downloads.js"; -import initializeMetadataDownload from "./metadata_download.js"; - -export default class GeoBlacklightInitializer { - run() { - initializeRelations(); - initializeTruncation(); - initializePopovers(); - initializeTooltips(); - initializeDownloads(); - initializeMetadataDownload(); - } -} diff --git a/app/javascript/geoblacklight/index.js b/app/javascript/geoblacklight/index.js new file mode 100644 index 000000000..1d4613dc9 --- /dev/null +++ b/app/javascript/geoblacklight/index.js @@ -0,0 +1,29 @@ +// Stimulus controllers +import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"; +import CloverViewerController from "geoblacklight/controllers/clover_viewer_controller"; +import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"; +import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"; +import SearchResultsController from "geoblacklight/controllers/search_results_controller"; +import DownloadsController from "geoblacklight/controllers/downloads_controller"; +import ClipboardController from "geoblacklight/controllers/clipboard_controller"; + +// GBL core +import Core from "geoblacklight/core"; + +// Other modules +import openLayersBasemaps from "geoblacklight/openlayers/basemaps"; +import leafletBasemaps from "geoblacklight/leaflet/basemaps"; + +export default { + OpenlayersViewerController, + CloverViewerController, + OembedViewerController, + LeafletViewerController, + SearchResultsController, + DownloadsController, + ClipboardController, + openLayersBasemaps, + leafletBasemaps, + Core, + onLoad: Core.onLoad, +}; diff --git a/app/javascript/geoblacklight/metadata_download.js b/app/javascript/geoblacklight/initializers/metadata_download.js similarity index 82% rename from app/javascript/geoblacklight/metadata_download.js rename to app/javascript/geoblacklight/initializers/metadata_download.js index 5e6a8f689..5c692bc7f 100644 --- a/app/javascript/geoblacklight/metadata_download.js +++ b/app/javascript/geoblacklight/initializers/metadata_download.js @@ -1,5 +1,5 @@ export class GeoBlacklightMetadataDownloadButton { - constructor(el, options = {}) { + constructor(el, i, options = {}) { this.options = options; this.el = typeof el === "string" ? document.querySelector(el) : el; this.download = document.querySelector( @@ -30,7 +30,10 @@ export class GeoBlacklightMetadataDownloadButton { export default function initializeMetadataDownload() { const modal = document.getElementById("blacklight-modal"); - modal.addEventListener("loaded.blacklight.blacklight-modal", (e) => { + modal.addEventListener("focus", (e) => { + if (!Array.from(e.target.classList).includes('show')){ + return; + } e.target.querySelectorAll(".metadata-body").forEach((el) => { el.closest(".modal-content").classList.add("metadata-modal"); }); @@ -40,7 +43,10 @@ export default function initializeMetadataDownload() { }); }); - modal.addEventListener("hidden.bs.modal", (e) => { + modal.addEventListener("blur", (e) => { + if (Array.from(e.target.classList).includes('show')){ + return; + } e.target.querySelectorAll(".metadata-body").forEach((el) => { el.closest(".modal-content").classList.remove("metadata-modal"); }); diff --git a/app/javascript/geoblacklight/initializers/popovers.js b/app/javascript/geoblacklight/initializers/popovers.js new file mode 100644 index 000000000..d9c4af8d8 --- /dev/null +++ b/app/javascript/geoblacklight/initializers/popovers.js @@ -0,0 +1,11 @@ +import { Popover } from 'bootstrap'; + +// Initialize popovers +export default function initializePopovers() { + const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]'); // Bootstrap 5 uses 'data-bs-toggle' + popoverElements.forEach((element) => { + const popover = new Popover(element, { + trigger: "hover", + }); + }); +} diff --git a/app/javascript/geoblacklight/relations.js b/app/javascript/geoblacklight/initializers/relations.js similarity index 100% rename from app/javascript/geoblacklight/relations.js rename to app/javascript/geoblacklight/initializers/relations.js diff --git a/app/javascript/geoblacklight/tooltips.js b/app/javascript/geoblacklight/initializers/tooltips.js similarity index 95% rename from app/javascript/geoblacklight/tooltips.js rename to app/javascript/geoblacklight/initializers/tooltips.js index 90c840c98..8d56521ba 100644 --- a/app/javascript/geoblacklight/tooltips.js +++ b/app/javascript/geoblacklight/initializers/tooltips.js @@ -1,3 +1,5 @@ +import { Tooltip } from "bootstrap"; + export default function initializeTooltips() { document.body.addEventListener( "mouseenter", @@ -11,7 +13,7 @@ export default function initializeTooltips() { if (titleText !== undefined && titleText !== "") { // Initialize Bootstrap tooltip with native JavaScript - const tooltip = new bootstrap.Tooltip(svgElement, { + const tooltip = new Tooltip(svgElement, { placement: "bottom", title: titleText, }); diff --git a/app/javascript/geoblacklight/truncation.js b/app/javascript/geoblacklight/initializers/truncation.js similarity index 87% rename from app/javascript/geoblacklight/truncation.js rename to app/javascript/geoblacklight/initializers/truncation.js index 5ee8ac2c2..094e14531 100644 --- a/app/javascript/geoblacklight/truncation.js +++ b/app/javascript/geoblacklight/initializers/truncation.js @@ -10,9 +10,9 @@ export default function initializeTruncation() { let control = document.createElement("button"); control.className = "btn btn-link p-0 border-0"; - control.setAttribute("data-toggle", "collapse"); + control.setAttribute("data-bs-toggle", "collapse"); control.setAttribute("aria-expanded", "false"); - control.setAttribute("data-target", `#${id}`); + control.setAttribute("data-bs-target", `#${id}`); control.setAttribute("aria-controls", id); control.textContent = "Read more"; @@ -20,7 +20,6 @@ export default function initializeTruncation() { let isExpanded = control.getAttribute("aria-expanded") === "true"; control.textContent = isExpanded ? "Read more" : "Close"; control.setAttribute("aria-expanded", !isExpanded); - element.classList.toggle("show"); }); element.parentNode.insertBefore(control, element.nextSibling); diff --git a/app/javascript/geoblacklight/leaflet/basemaps.js b/app/javascript/geoblacklight/leaflet/basemaps.js new file mode 100644 index 000000000..e984252c0 --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/basemaps.js @@ -0,0 +1,74 @@ +export default { + darkMatter: { + url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + positron: { + url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + positronLite: { + url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + worldAntique: { + url: "https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + worldEco: { + url: "https://cartocdn_{s}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + flatBlue: { + url: "https://cartocdn_{s}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + midnightCommander: { + url: "https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}{retina}.png", + attribution: + '© OpenStreetMap contributors, © Carto', + maxZoom: 18, + worldCopyJump: true, + retina: "@2x", + }, + openstreetmapHot: { + url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", + attribution: + '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team', + maxZoom: 19, + worldCopyJump: true, + retina: "@2x", + }, + openstreetmapStandard: { + url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", + attribution: + '© OpenStreetMap contributors', + maxZoom: 19, + worldCopyJump: true, + retina: "@2x", + }, +}; diff --git a/app/javascript/geoblacklight/leaflet/constants.js b/app/javascript/geoblacklight/leaflet/constants.js new file mode 100644 index 000000000..ea739bab4 --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/constants.js @@ -0,0 +1,18 @@ +import { LatLngBounds } from "leaflet"; + +export const DEFAULT_BOUNDS = new LatLngBounds([ + [-30, -100], + [30, 100], +]); + +export const DEFAULT_OPACITY = 0.75; + +export const DEFAULT_BASEMAP = "positron"; + +export const DEFAULT_GEOM_OVERLAY_OPTIONS = { + color: '#3388ff', + dashArray: "5 5", + weight: 2, + opacity: 1, + fillOpacity: 0 +} \ No newline at end of file diff --git a/app/javascript/geoblacklight/leaflet/controls/geosearch.js b/app/javascript/geoblacklight/leaflet/controls/geosearch.js new file mode 100644 index 000000000..6347aa2a2 --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/controls/geosearch.js @@ -0,0 +1,160 @@ +import { DomUtil, Control, Handler, setOptions } from "leaflet"; +import { debounce, boundsToBbox } from "geoblacklight/leaflet/utils"; + +export const geosearchDefaultOptions = { + dynamic: true, + delay: 800, +}; + +export default class GeoSearchControl extends Control { + constructor(options) { + const _options = { ...geosearchDefaultOptions, ...options }; + super(_options); + setOptions(this, _options); + } + + onAdd(map) { + this.map = map; + this.map.options.geoSearchControl = this; + + // Create the buttons + this.staticButton = this.createStaticButton(); + this.dynamicButton = this.createDynamicButton(); + + // Add the buttons to the viewer + const container = DomUtil.create("div"); + container.className = "leaflet-control search-control"; + container.appendChild(this.staticButton); + container.appendChild(this.dynamicButton); + + // Show the appropriate button + if (this.options.dynamic) this.dynamicButton.style.display = "block"; + else this.staticButton.style.display = "block"; + + // Set up the dynamic search function with debounce + this.dynamicSearcher = debounce(() => { + if (this.options.dynamic) { + this.applySearch(); + } + }, this.options.delay); + + // Add the event handler + this.map.addHandler("geosearch", GeoSearchHandler); + + return container; + } + + // Button to search when clicked; contains an icon + createStaticButton() { + const staticButtonNode = DomUtil.create("a"); + staticButtonNode.setAttribute("id", "gbl-static-button"); + staticButtonNode.setAttribute("href", "#"); + staticButtonNode.setAttribute("style", "display:none;"); + staticButtonNode.className = "btn btn-primary"; + staticButtonNode.textContent = "Search here"; + staticButtonNode.addEventListener("click", this.staticSearch.bind(this)); + return staticButtonNode; + } + + // Button to search when the map is moved; contains a checkbox + createDynamicButton() { + const dynamicButtonNode = DomUtil.create("label"); + dynamicButtonNode.setAttribute("id", "gbl-dynamic-button"); + dynamicButtonNode.textContent = " Search when I move the map"; + dynamicButtonNode.setAttribute("style", "display:none;"); + const input = DomUtil.create("input"); + input.setAttribute("type", "checkbox"); + input.checked = true; + dynamicButtonNode.insertBefore(input, dynamicButtonNode.firstChild); + dynamicButtonNode.addEventListener( + "input", + this.toggleDynamicSearch.bind(this) + ); + return dynamicButtonNode; + } + + // Hide the static button, show the dynamic button, and apply the search + staticSearch() { + this.staticButton.style.display = "none"; + if (this.options.dynamic) { + this.dynamicButton.style.display = "block"; + } + // Do full page reload for staticSearch button + this.applySearch({ turbo: false }); + } + + // Update the URL with the current bounding box and go back to page 1 + applySearch(opts={turbo: true}) { + // Delete any existing page and bbox parameters + const params = new URL(window.location).searchParams; + params.delete("page"); + params.delete("bbox"); + + // Calculate the bounding box from the current map bounds + const bbox = boundsToBbox(this._map.getBounds()); + params.set("bbox", bbox.join(" ")); + + // Make the new target URL using the configured base URL + const newUrl = new URL(this.options.baseUrl) + newUrl.search = params.toString() + + // If Turbo Drive is active, do the new page navigation without a full page reload + if (window.Turbo && opts.turbo) window.Turbo.visit(newUrl); + + // Otherwise fall back to the traditional full page reload + else window.location.href = newUrl; + } + + // Toggle the dynamic search option + toggleDynamicSearch() { + this.options.dynamic = !this.options.dynamic; + } + + // Hide the dynamic button and show the static button + hideDynamicButton() { + this.dynamicButton.style.display = "none"; + this.staticButton.style.display = "block"; + } +} + +class GeoSearchHandler extends Handler { + constructor(map) { + super(map); + this.map = map; + this.control = map.options.geoSearchControl; + this.wasResized = false; + } + + // Bind event handlers to the map + addHooks() { + this.map.on("resize", this.handleResize.bind(this)); + this.map.on("dragend", this.handleDragEnd.bind(this)); + this.map.on("dragstart", this.handleDragStart.bind(this)); + this.map.on("zoomstart", this.handleDragEnd.bind(this)); + this.map.on("zoomend", this.handleDragStart.bind(this)); + } + + // Remove event handlers from the map + removeHooks() { + this.map.off("resize"); + this.map.off("dragend"); + this.map.off("dragstart"); + this.map.off("zoomend"); + this.map.off("zoomstart"); + } + + handleResize() { + this.wasResized = true; + } + + handleDragEnd() { + if (this.wasResized) this.wasResized = false; + else this.control.dynamicSearcher.apply(this.control); + } + + handleDragStart() { + if (!this.control.options.dynamic) { + this.control.hideDynamicButton(); + } + } +} diff --git a/app/javascript/geoblacklight/leaflet/controls/layer_opacity.js b/app/javascript/geoblacklight/leaflet/controls/layer_opacity.js new file mode 100644 index 000000000..95c18db38 --- /dev/null +++ b/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) + }); + } +} diff --git a/app/javascript/geoblacklight/leaflet/inspection.js b/app/javascript/geoblacklight/leaflet/inspection.js new file mode 100644 index 000000000..a1684feff --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/inspection.js @@ -0,0 +1,177 @@ +import { identifyFeatures } from "esri-leaflet"; +import { appendErrorMessage, appendLoadingMessage, getLayerOpacity, linkify } from "geoblacklight/leaflet/utils"; + +export const wmsInspection = (map, url, layerId, layer) => { + map.on("click", async (e) => { + const spinner = document.createElement("tbody"); + spinner.className = "attribute-table-body"; + spinner.innerHTML = + ''; + 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 = + 'Could not find that feature'; + 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) => { + 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) => { + // 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 = ''; + + // Step through properties and append to table + Object.keys(feature.properties).forEach((property) => { + html += `${property} + ${linkify(feature.properties[property])}`; + }); + html += ""; + + const tableBody = document.querySelector(".attribute-table-body"); + if (tableBody) { + tableBody.outerHTML = html; // Replace existing table body with new content + } +} diff --git a/app/javascript/geoblacklight/leaflet/layer_index_map.js b/app/javascript/geoblacklight/leaflet/layer_index_map.js new file mode 100644 index 000000000..3ae94d3d5 --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/layer_index_map.js @@ -0,0 +1,120 @@ +const indexMapInfoTemplate = (data) => ` + `; + +const indexMapDownloadTemplate = (data) => + data.downloadUrl + ? ` +

+

Selected feature

+

+
• +
  + + ${data.label ? data.label : "Download"} + +
  +
+

+

+` + : ""; + +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()); + } + }); +}; diff --git a/app/javascript/geoblacklight/leaflet/layer_wmts.js b/app/javascript/geoblacklight/leaflet/layer_wmts.js new file mode 100644 index 000000000..727d10abc --- /dev/null +++ b/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); + } +} diff --git a/app/javascript/geoblacklight/leaflet/layers.js b/app/javascript/geoblacklight/leaflet/layers.js new file mode 100644 index 000000000..1c36581ec --- /dev/null +++ b/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; +}; diff --git a/app/javascript/geoblacklight/leaflet/utils.js b/app/javascript/geoblacklight/leaflet/utils.js new file mode 100644 index 000000000..fd875929b --- /dev/null +++ b/app/javascript/geoblacklight/leaflet/utils.js @@ -0,0 +1,83 @@ +import { latLngBounds, Util, geoJSON, latLng } from "leaflet"; + +export const bboxToBounds = (bbox) => { + 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"); + } +}; + +export const boundsToBbox = (bounds) => { + let sw = bounds.getSouthWest(), + ne = bounds.getNorthEast(); + + if (ne.lng - sw.lng >= 360) { + 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), + ]; +}; + +export const geoJSONToBounds = (geojson) => { + const layer = geoJSON(geojson); + return layer.getBounds(); +}; + +export const debounce = (fn, delay) => { + let timeout = null; + return function (...args) { + clearTimeout(timeout); + timeout = setTimeout(() => { + fn.apply(this, args); + }, delay); + }; +}; + +export const getTileJsonBounds = (doc) => { + const bounds = doc.bounds; + if (bounds) { + const corner1 = latLng(bounds[1], bounds[0]), + corner2 = latLng(bounds[3], bounds[2]); + return latLngBounds(corner1, corner2); + } +}; + +export const appendLoadingMessage = () => { + const spinner = ` + +

Inspecting

+ + `; + + document.querySelector(".attribute-table-body").innerHTML = spinner; +}; + +export const appendErrorMessage = () => { + document.querySelector( + ".attribute-table-body" + ).innerHTML = ` + Could not find that feature`; +}; + +// Looks for strings that could be URLs and wraps them in 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, '$1'); +} + +export const getLayerOpacity = (layer) => { + return layer.options.fillOpacity ? layer.options.fillOpacity : layer.options.opacity; +} \ No newline at end of file diff --git a/app/javascript/geoblacklight/openlayers/basemaps.js b/app/javascript/geoblacklight/openlayers/basemaps.js new file mode 100644 index 000000000..1b2bab940 --- /dev/null +++ b/app/javascript/geoblacklight/openlayers/basemaps.js @@ -0,0 +1,47 @@ +export default { + darkMatter: { + url:'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + positron: { + url: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + positronLite: { + url: 'https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + worldAntique: { + url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + worldEco: { + url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + flatBlue: { + url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + midnightCommander: { + url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors, © Carto', + maxZoom: 18 + }, + openstreetmapHot: { + url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team', + maxZoom: 19 + }, + openstreetmapStandard: { + url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + attributions: '© OpenStreetMap contributors', + maxZoom: 19 + } +} diff --git a/app/javascript/geoblacklight/openlayers/layers.js b/app/javascript/geoblacklight/openlayers/layers.js new file mode 100644 index 000000000..b52fea8ec --- /dev/null +++ b/app/javascript/geoblacklight/openlayers/layers.js @@ -0,0 +1,44 @@ +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(); + return new VectorTile({ + declutter: true, + source: new PMTilesVectorSource({ url }), + style: new Style({ + stroke: new Stroke({ + color: "#7070B3", + width: 1, + }), + fill: new Fill({ + color: "#FFFFFF", + }), + image: new Circle({ + radius: 7, + fill: new Fill({ + color: "#7070B3", + }), + stroke: new Stroke({ + color: "#FFFFFF", + width: 2, + }), + }), + }), + }); +}; + +// Create a new cloud-optimized GeoTIFF (COG) layer +export const cogLayer = (url) => { + return new WebGLTileLayer({ + source: new GeoTIFF({ + sources: [{ url }], + convertToRGB: true, + }), + }); +}; diff --git a/app/javascript/geoblacklight/popovers.js b/app/javascript/geoblacklight/popovers.js deleted file mode 100644 index 8cb7a9677..000000000 --- a/app/javascript/geoblacklight/popovers.js +++ /dev/null @@ -1,9 +0,0 @@ -// Initialize popovers -export default function initializePopovers() { - const popoverElements = document.querySelectorAll('[data-toggle="popover"]'); // Bootstrap 5 uses 'data-bs-toggle' - popoverElements.forEach((element) => { - const popover = new bootstrap.Popover(element, { - trigger: "hover", - }); - }); -} diff --git a/app/javascript/index.js b/app/javascript/index.js deleted file mode 100644 index cec6e4b33..000000000 --- a/app/javascript/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import OlInitializer from "./openlayers/ol_initializer"; -import CloverInitializer from "./clover/clover_initializer"; -import LeafletInitializer from "./leaflet/leaflet_initializer"; -import GeoBlacklightInitializer from "./geoblacklight/geoblacklight_initializer"; - -export { - OlInitializer, - CloverInitializer, - LeafletInitializer, - GeoBlacklightInitializer, -}; diff --git a/app/javascript/leaflet/basemaps.js b/app/javascript/leaflet/basemaps.js deleted file mode 100644 index 87c80f686..000000000 --- a/app/javascript/leaflet/basemaps.js +++ /dev/null @@ -1,85 +0,0 @@ -import { tileLayer } from "leaflet"; - -export default { - darkMatter: tileLayer( - 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - positron: tileLayer( - 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - positronLite: tileLayer( - 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - worldAntique: tileLayer( - 'https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - worldEco: tileLayer( - 'https://cartocdn_{s}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - flatBlue: tileLayer( - 'https://cartocdn_{s}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - midnightCommander: tileLayer( - 'https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}{retina}.png', { - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - openstreetmapHot: tileLayer( - 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team', - maxZoom: 19, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ), - openstreetmapStandard: tileLayer( - 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors', - maxZoom: 19, - worldCopyJump: true, - retina: '@2x', - detectRetina: false - } - ) -}; diff --git a/app/javascript/leaflet/controls/geosearch.js b/app/javascript/leaflet/controls/geosearch.js deleted file mode 100644 index 0576df2d3..000000000 --- a/app/javascript/leaflet/controls/geosearch.js +++ /dev/null @@ -1,137 +0,0 @@ -import { Control, setOptions } from "leaflet"; -import { debounce, boundsToBbox } from "../utils"; - -export default class GeoSearchControl extends Control { - constructor(options) { - super(options); - setOptions(this, options); - } - - onAdd(map) { - const container = document.createElement("div"); - container.className = "leaflet-control search-control"; - container.appendChild(this.options.staticButton); - container.appendChild(this.options.dynamicButton); - - this._map = map; - - const setButtons = () => { - if (document.getElementById("gbl-static-button")) { - this.staticButton = document.getElementById("gbl-static-button"); - this.dynamicButton = document.getElementById("gbl-dynamic-button"); - if (this.options.dynamic) { - this.staticButton.style.display = "none"; - this.dynamicButton.style.display = "block"; - } else { - this.staticButton.style.display = "block"; - this.dynamicButton.style.display = "none"; - } - } - }; - - setButtons(); - - const staticButtonExists = () => { - if ( - typeof this.staticButton != "undefined" && - this.staticButton != null - ) { - return true; - } else { - return null; - } - }; - - const staticSearcher = (e) => { - setButtons(); - if (staticButtonExists() && e.target.id == "gbl-static-button") { - this.staticButton.style.display = "none"; - if (this.options.dynamic) { - this.dynamicButton.style.display = "block"; - } - this.options.searcher.apply(this); - } - }; - - const dynamicSearcher = debounce(() => { - if (this.options.dynamic) { - this.options.searcher.apply(this); - } - }, this.options.delay); - - document.addEventListener("click", staticSearcher); - - container.addEventListener("change", (e) => { - if (e.target.type === "checkbox") { - this.options.dynamic = !this.options.dynamic; - } - }); - - if (this.options.dynamic) { - setButtons(); - if ( - typeof this.staticButton != "undefined" && - this.staticButton != null - ) { - this.staticButton.style.display = "none"; - this.dynamicButton.style.display = "block"; - } - } else { - if ( - typeof this.dynamicButton != "undefined" && - this.dynamicButton != null - ) { - this.dynamicButton.style.display = "block"; - this.staticButton.style.display = "none"; - } - } - - this.wasResized = false; - map.on("resize", () => { - this.wasResized = true; - }); - - map.on("moveend", () => { - if (this.wasResized) { - this.wasResized = false; - } else { - dynamicSearcher.apply(this); - } - }); - - map.on("movestart", () => { - if (!this.options.dynamic) { - if ( - typeof this.dynamicButton != "undefined" && - this.dynamicButton != null - ) { - this.dynamicButton.style.display = "none"; - this.staticButton.style.display = "block"; - } - } - }); - - return container; - } - - getSearchUrl() { - const params = this.filterParams(["bbox", "page"]), - bounds = boundsToBbox(this._map.getBounds()); - - params.push(`bbox=${encodeURIComponent(bounds.join(" "))}`); - return `${this.options.baseUrl}?${params.join("&")}`; - } - - filterParams(filterList) { - const querystring = window.location.search.substr(1); - let params = []; - - if (querystring !== "") { - params = querystring.split("&").filter((value) => { - const [key] = value.split("="); - return !filterList.includes(key); - }); - } - return params; - } -} diff --git a/app/javascript/leaflet/controls/layer_opacity.js b/app/javascript/leaflet/controls/layer_opacity.js deleted file mode 100644 index d650e49e2..000000000 --- a/app/javascript/leaflet/controls/layer_opacity.js +++ /dev/null @@ -1,64 +0,0 @@ -import { DomUtil, DomEvent, Control } from "leaflet"; - -export default class LayerOpacityControl extends Control { - constructor(layer, options = {}) { - super(options); - this.options.position = "topleft"; - - // Check if layer is actually a layer group - if (typeof layer.getLayers !== "undefined") { - // Add first layer from layer group to options - this.options.layer = layer.getLayers()[0]; - } else { - // Add layer to options - this.options.layer = layer; - } - } - - 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); - handle.style.top = `${handle.offsetTop - 13 + 50}px`; - handleText.innerHTML = `${parseInt( - this.options.layer.options.opacity * 100 - )}%`; - return container; - } - - setListeners(handle, bottom, handleText) { - 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.options.layer.setOpacity(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; - }); - } -} diff --git a/app/javascript/leaflet/leaflet_initializer.js b/app/javascript/leaflet/leaflet_initializer.js deleted file mode 100644 index 5be3e964a..000000000 --- a/app/javascript/leaflet/leaflet_initializer.js +++ /dev/null @@ -1,21 +0,0 @@ -import BookmarksMap from "./maps/bookmarks_map"; -import HomepageMap from "./maps/homepage_map"; -import ItemMap from "./maps/item_map"; -import SearchResultsMap from "./maps/search_results_map"; - -export default class LeafletInitializer { - run() { - document - .querySelectorAll('[data-map="bookmarks"]') - .forEach((element) => new BookmarksMap(element)); - document.querySelectorAll('[data-map="home"]').forEach((element) => { - new HomepageMap(element); - }); - document.querySelectorAll('[data-map="item"]').forEach((element) => { - new ItemMap(element); - }); - document.querySelectorAll('[data-map="index"]').forEach((element) => { - new SearchResultsMap(element); - }); - } -} diff --git a/app/javascript/leaflet/maps/bookmarks_map.js b/app/javascript/leaflet/maps/bookmarks_map.js deleted file mode 100644 index 90608ba92..000000000 --- a/app/javascript/leaflet/maps/bookmarks_map.js +++ /dev/null @@ -1,68 +0,0 @@ -import { latLngBounds} from "leaflet"; -import GeoBlacklightViewerMap from "../viewers/map"; -import { bboxToBounds, geoJSONToBounds } from "../utils"; - -// Set up the leaflet map on the bookmarks page -export default class BookmarksMap { - constructor(element) { - const data = element.dataset, - world = latLngBounds([ - [-90, -180], - [90, 180], - ]); - let bbox; - - if (typeof data.mapGeom === "string") { - bbox = geoJSONToBounds(JSON.parse(data.mapGeom)); - } else { - document - .querySelectorAll(".document [data-geom]") - .forEach((docElement) => { - try { - const geomData = JSON.parse(docElement.dataset.geom); - const currentBounds = geoJSONToBounds(geomData); - if (!world.contains(currentBounds)) { - throw new Error("Invalid bounds"); - } - bbox = - typeof bbox === "undefined" - ? currentBounds - : bbox.extend(currentBounds); - } catch (e) { - bbox = bboxToBounds("-180 -90 180 90"); - } - }); - } - - // instantiate new map - const viewer = new GeoBlacklightViewerMap(element, { bbox }); - viewer.removeBoundsOverlay(); - - // set hover listeners on map - const contentElement = document.getElementById("content"); - if (contentElement) { - contentElement.addEventListener( - "mouseenter", - (event) => { - const target = event.target.closest("#documents [data-layer-id]"); - if (target && target.dataset.bbox !== "") { - const geom = target.dataset.geom; - viewer.addGeoJsonOverlay(JSON.parse(geom)); - } - }, - true - ); // Use event capturing - - contentElement.addEventListener( - "mouseleave", - (event) => { - const target = event.target.closest("#documents [data-layer-id]"); - if (target) { - viewer.removeBoundsOverlay(); - } - }, - true - ); // Use event capturing - } - } -} diff --git a/app/javascript/leaflet/maps/homepage_map.js b/app/javascript/leaflet/maps/homepage_map.js deleted file mode 100644 index da019407f..000000000 --- a/app/javascript/leaflet/maps/homepage_map.js +++ /dev/null @@ -1,57 +0,0 @@ -import GeoBlacklightViewerMap from "../viewers/map"; -import GeoSearchControl from "../controls/geosearch"; - -// Leaflet maps that displays on the homepage -export default class HomepageMap { - constructor(element) { - const viewer = new GeoBlacklightViewerMap(element); - const data = element.dataset; // Assuming all data attributes are directly convertible - - const baseUrl = data.catalogPath; // Adjust according to actual data attributes - - // StaticButton - // Create the anchor element - const staticButtonNode = document.createElement("a"); - staticButtonNode.setAttribute("id", "gbl-static-button"); - staticButtonNode.setAttribute("href", "#"); - staticButtonNode.className = "btn btn-primary"; - staticButtonNode.textContent = "Search here "; - - // Create the span element for the glyphicon - const span = document.createElement("span"); - span.className = "glyphicon glyphicon-repeat"; - - // Append the span to the anchor element - staticButtonNode.appendChild(span); - - // DynamicButton - const dynamicButtonNode = document.createElement("label"); - dynamicButtonNode.setAttribute("id", "gbl-dynamic-button"); - dynamicButtonNode.textContent = " Search when I move the map"; - dynamicButtonNode.setAttribute("style", "display:none;"); - - // Create the input (checkbox) element - const input = document.createElement("input"); - input.setAttribute("type", "checkbox"); - input.checked = true; // Set the checkbox to be checked by default - - // Insert the input element at the beginning of the label element - dynamicButtonNode.insertBefore(input, dynamicButtonNode.firstChild); - - const geoSearchOptions = { - baseUrl: baseUrl, - dynamic: false, - searcher: function () { - window.location.href = this.getSearchUrl(); - }, - staticButton: staticButtonNode, - dynamicButton: dynamicButtonNode, - }; - - geoSearchOptions.staticButton.href = "#"; - geoSearchOptions.staticButton.className = "btn btn-primary"; - geoSearchOptions.staticButton.textContent = "Search here"; - - viewer.map.addControl(new GeoSearchControl(geoSearchOptions)); - } -} diff --git a/app/javascript/leaflet/maps/item_map.js b/app/javascript/leaflet/maps/item_map.js deleted file mode 100644 index 2f3d14591..000000000 --- a/app/javascript/leaflet/maps/item_map.js +++ /dev/null @@ -1,43 +0,0 @@ -import LeafletViewerMap from "../viewers/map.js"; -import LeafletViewerCog from "../viewers/cog.js"; -import LeafletViewerEsri from "../viewers/esri.js"; -import LeafletViewerEsriDynamicMapLayer from "../viewers/esri/dynamic_map_layer.js"; -import LeafletViewerEsriFeatureLayer from "../viewers/esri/feature_layer.js"; -import LeafletViewerEsriImageMapLayer from "../viewers/esri/image_map_layer.js"; -import LeafletViewerEsriTiledMapLayer from "../viewers/esri/tiled_map_layer.js"; -import LeafletViewerIiif from "../viewers/iiif.js"; -import LeafletViewerIndexMap from "../viewers/index_map.js"; -import LeafletViewerOembed from "../viewers/oembed.js"; -import LeafletViewerPmtiles from "../viewers/pmtiles.js"; -import LeafletViewerTileJson from "../viewers/tilejson.js"; -import LeafletViewerTms from "../viewers/tms.js"; -import LeafletViewerWms from "../viewers/wms.js"; -import LeafletViewerWmts from "../viewers/wmts.js"; -import LeafletViewerXyz from "../viewers/xyz.js"; - -const dict = new Map([ - ["Map", LeafletViewerMap], - ["Cog", LeafletViewerCog], - ["Esri", LeafletViewerEsri], - ["DynamicMapLayer", LeafletViewerEsriDynamicMapLayer], - ["FeatureLayer", LeafletViewerEsriFeatureLayer], - ["ImageMapLayer", LeafletViewerEsriImageMapLayer], - ["TiledMapLayer", LeafletViewerEsriTiledMapLayer], - ["Iiif", LeafletViewerIiif], - ["IndexMap", LeafletViewerIndexMap], - ["Oembed", LeafletViewerOembed], - ["Pmtiles", LeafletViewerPmtiles], - ["Tilejson", LeafletViewerTileJson], - ["Tms", LeafletViewerTms], - ["Wms", LeafletViewerWms], - ["Wmts", LeafletViewerWmts], - ["Xyz", LeafletViewerXyz], -]); - -// Leaflet map that displays on item show page -export default class ItemMap { - constructor(element) { - const viewerName = element.getAttribute("data-protocol"); - this.viewer = new (dict.get(viewerName))(element); - } -} diff --git a/app/javascript/leaflet/maps/search_results_map.js b/app/javascript/leaflet/maps/search_results_map.js deleted file mode 100644 index 7109453a0..000000000 --- a/app/javascript/leaflet/maps/search_results_map.js +++ /dev/null @@ -1,150 +0,0 @@ -import { latLngBounds } from "leaflet"; -import GeoBlacklightViewerMap from "../viewers/map"; -import GeoSearchControl from "../controls/geosearch"; -import { bboxToBounds, geoJSONToBounds } from "../utils"; - -export default class SearchResultsMap { - constructor(element) { - const data = element.dataset, - opts = { baseUrl: data.catalogPath }, - world = latLngBounds([ - [-90, -180], - [90, 180], - ]); - let bbox; - - // StaticButton - // Create the anchor element - const staticButtonNode = document.createElement("a"); - staticButtonNode.setAttribute("id", "gbl-static-button"); - staticButtonNode.setAttribute("href", "#"); - staticButtonNode.setAttribute("style", "display:none;"); - staticButtonNode.className = "btn btn-primary"; - staticButtonNode.textContent = "Redo search here"; - - // Create the span element for the glyphicon - const span = document.createElement("span"); - span.className = "glyphicon glyphicon-repeat"; - - // Append the span to the anchor element - staticButtonNode.appendChild(span); - - // DynamicButton - const dynamicButtonNode = document.createElement("label"); - dynamicButtonNode.setAttribute("id", "gbl-dynamic-button"); - dynamicButtonNode.textContent = " Search when I move the map"; - dynamicButtonNode.setAttribute("style", "display:block;"); - - // Create the input (checkbox) element - const input = document.createElement("input"); - input.setAttribute("type", "checkbox"); - input.checked = true; // Set the checkbox to be checked by default - - // Insert the input element at the beginning of the label element - dynamicButtonNode.insertBefore(input, dynamicButtonNode.firstChild); - - const initialOptions = { - dynamic: true, - baseUrl: "", - searcher: function () { - window.location.href = this.getSearchUrl(); - }, - delay: 800, - staticButton: staticButtonNode, - dynamicButton: dynamicButtonNode, - }; - - if (typeof data.mapGeom === "string") { - bbox = geoJSONToBounds(JSON.parse(data.mapGeom)); - } else { - document - .querySelectorAll(".document [data-geom]") - .forEach((docElement) => { - try { - const geomData = JSON.parse(docElement.dataset.geom); - const currentBounds = geoJSONToBounds(geomData); - if (!world.contains(currentBounds)) { - throw new Error("Invalid bounds"); - } - bbox = - typeof bbox === "undefined" - ? currentBounds - : bbox.extend(currentBounds); - } catch (e) { - bbox = bboxToBounds("-180 -90 180 90"); - } - }); - } - - // instantiate new viewer - this.viewer = new GeoBlacklightViewerMap(element, { bbox }); - - // add geosearch control to viewer map - this.viewer.map.addControl(new GeoSearchControl(initialOptions)); - - // set hover listeners on map - document.getElementById("content").addEventListener( - "mouseenter", - (event) => { - const target = event.target.closest("[data-layer-id]"); - if (target && target.dataset.bbox !== "") { - const geom = target.dataset.geom; - this.viewer.addGeoJsonOverlay(JSON.parse(geom)); - } - }, - true - ); - - document.getElementById("content").addEventListener( - "mouseleave", - (event) => { - const target = event.target.closest("[data-layer-id]"); - if (target) { - this.viewer.removeBoundsOverlay(); - } - }, - true - ); - - window.addEventListener("popstate", () => { - const state = history.state; - updatePage(state ? state.url : window.location.href); - }); - } - - updatePage(url) { - fetch(url, { headers: { "X-Requested-With": "XMLHttpRequest" } }) - .then((response) => response.text()) - .then((html) => { - const parser = new DOMParser(); - const doc = parser.parseFromString(html, "text/html"); - - document - .getElementById("documents") - .replaceWith(doc.querySelector("#documents")); - document - .getElementById("sidebar") - .replaceWith(doc.querySelector("#sidebar")); - document - .getElementById("sortAndPerPage") - .replaceWith(doc.querySelector("#sortAndPerPage")); - document - .getElementById("appliedParams") - .replaceWith(doc.querySelector("#appliedParams")); - document - .getElementById("pagination") - .replaceWith(doc.querySelector("#pagination")); - const mapNextElement = - document.getElementById("map").nextElementSibling; - if (mapNextElement) { - mapNextElement.replaceWith( - doc.querySelector("#map").nextElementSibling - ); - } else { - document - .getElementById("map") - .after(doc.querySelector("#map").nextElementSibling); - } - }); - } -} diff --git a/app/javascript/leaflet/utils.js b/app/javascript/leaflet/utils.js deleted file mode 100644 index ac5ad5795..000000000 --- a/app/javascript/leaflet/utils.js +++ /dev/null @@ -1,46 +0,0 @@ -import { latLngBounds, Util, geoJSON } from "leaflet"; - -export const bboxToBounds = (bbox) => { - 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"); - } -}; - -export const boundsToBbox = (bounds) => { - let sw = bounds.getSouthWest(), - ne = bounds.getNorthEast(); - - if (ne.lng - sw.lng >= 360) { - 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), - ]; -}; - -export const geoJSONToBounds = (geojson) => { - const layer = geoJSON(geojson); - return layer.getBounds(); -}; - -export const debounce = (fn, delay) => { - let timeout = null; - return function (...args) { - clearTimeout(timeout); - timeout = setTimeout(() => { - fn.apply(this, args); - }, delay); - }; -}; diff --git a/app/javascript/leaflet/viewers/base.js b/app/javascript/leaflet/viewers/base.js deleted file mode 100644 index 12ef15452..000000000 --- a/app/javascript/leaflet/viewers/base.js +++ /dev/null @@ -1,51 +0,0 @@ -import { Icon, Control } from "leaflet"; -import "leaflet-fullscreen"; -import LayerOpacityControl from "../controls/layer_opacity"; - -export default class LeafletViewerBase { - constructor(element) { - this.element = element; - this.data = element.dataset; - this.available = this.data.available === "true"; - - // Sets leaflet icon paths to ex. /assets/marker-icon-2x-rails-fingerprint - Icon.Default.imagePath = ".."; - } - - // Look up the controls needed for this viewer type and add them to the map - addControls() { - // Get the protocol key (IIIF, WMS, etc.) and configured options - const protocol = this.data.protocol.toUpperCase(); - const options = JSON.parse(this.data.leafletOptions || "{}"); - if (!options.VIEWERS) return; - - // Look up the configured controls for this protocol, if any - const viewer = options.VIEWERS[protocol]; - const controls = viewer && viewer.CONTROLS; - if (!controls) return; - - // Add each of the configured controls to the map - controls.forEach((control) => { - if (control === "Opacity") { - this.map.addControl(new LayerOpacityControl(this.overlay)); - } - if (control === "Fullscreen") { - this.map.addControl(new Control.Fullscreen({ position: "topright" })); - } - }); - - // Call the hook once controls are set up - this.onAddControls(controls); - } - - // Hook for any extra work to do after controls are added; override in subclass - onAddControls(_controls) {} - - /** - * Gets the value of detect retina from application settings. - */ - detectRetina() { - const options = JSON.parse(this.data.leafletOptions || "{}"); - return options && options.LAYERS ? options.LAYERS.DETECT_RETINA : false; - } -} diff --git a/app/javascript/leaflet/viewers/cog.js b/app/javascript/leaflet/viewers/cog.js deleted file mode 100644 index 7830bb199..000000000 --- a/app/javascript/leaflet/viewers/cog.js +++ /dev/null @@ -1,5 +0,0 @@ -import LeafletViewerBase from "./base.js"; - -export default class LeafletViewerCog extends LeafletViewerBase { - -} diff --git a/app/javascript/leaflet/viewers/esri.js b/app/javascript/leaflet/viewers/esri.js deleted file mode 100644 index afa9be179..000000000 --- a/app/javascript/leaflet/viewers/esri.js +++ /dev/null @@ -1,85 +0,0 @@ -import { get as esriGet } from "esri-leaflet"; -import linkifyHtml from "linkify-html"; -import { geoJSONToBounds } from "../utils.js"; -import LeafletViewerMap from "./map.js"; - -export default class LeafletViewerEsri extends LeafletViewerMap { - constructor(element, options) { - super(element, options); - this.layerInfo = {}; - } - - onLoad() { - super.onLoad(); - this.options.bbox = geoJSONToBounds(JSON.parse(this.data.mapGeom)); - this.map.addLayer(this.selectBasemap()); - this.map.addLayer(this.overlay); - if (this.available) { - this.getEsriLayer(); - } else { - this.addBoundsOverlay(this.options.bbox); - } - } - - getEsriLayer() { - // Remove any trailing slash from endpoint url - this.data.url = this.data.url.replace(/\/$/, ""); - - esriGet(this.data.url, {}, (error, response) => { - if (!error) { - this.layerInfo = response; - - // Get layer as defined in submodules (e.g., esri/mapservice) - const layer = this.getPreviewLayer(); - - // Add layer to map - if (this.addPreviewLayer(layer)) { - // Add controls if layer is added - this.addControls(); - } - } - }); - } - - addPreviewLayer(layer) { - // If not null, add layer to map - if (layer) { - this.overlay.addLayer(layer); - return true; - } - return false; - } - - appendLoadingMessage() { - const spinner = ` - -

Inspecting

- - `; - - document.querySelector(".attribute-table-body").innerHTML = spinner; - } - - appendErrorMessage() { - document.querySelector( - ".attribute-table-body" - ).innerHTML = ` - Could not find that feature`; - } - - populateAttributeTable(feature) { - let html = ''; - - // Step through properties and append to table - Object.keys(feature.properties).forEach((property) => { - html += `${property} - ${linkifyHtml(feature.properties[property])}`; - }); - html += ""; - - const tableBody = document.querySelector(".attribute-table-body"); - if (tableBody) { - tableBody.outerHTML = html; // Replace existing table body with new content - } - } -} diff --git a/app/javascript/leaflet/viewers/esri/dynamic_map_layer.js b/app/javascript/leaflet/viewers/esri/dynamic_map_layer.js deleted file mode 100644 index 5e0c005bf..000000000 --- a/app/javascript/leaflet/viewers/esri/dynamic_map_layer.js +++ /dev/null @@ -1,110 +0,0 @@ -import { get, dynamicMapLayer, identifyFeatures } from "esri-leaflet"; -import linkifyHtml from "linkify-html"; -import LeafletViewerEsri from "../esri.js"; - -export default class LeafletViewerEsriDynamicMapLayer extends LeafletViewerEsri { - // Override to parse between dynamic layer types - getEsriLayer() { - // Remove any trailing slash from endpoint url - this.data.url = this.data.url.replace(/\/$/, ""); - - // Get last segment from url - const pathArray = this.data.url.split("/"); - const lastSegment = pathArray[pathArray.length - 1]; - - // If the last segment is an integer, slice and save as dynamicLayerId - if (Number(lastSegment) === parseInt(lastSegment, 10)) { - this.dynamicLayerId = lastSegment; - this.data.url = this.data.url.slice(0, -(lastSegment.length + 1)); - } - - get(this.data.url, {}, (error, response) => { - if (!error) { - this.layerInfo = response; - - // Get layer - const layer = this.getPreviewLayer(); - - // Add layer to map - if (this.addPreviewLayer(layer)) { - // Add controls if layer is added - this.addControls(); - } - } - }); - } - - getPreviewLayer() { - // Set layer url - this.options.url = this.data.url; - - // Show only single layer, if specified - if (this.dynamicLayerId) { - this.options.layers = [this.dynamicLayerId]; - } - - const esriDynamicMapLayer = dynamicMapLayer(this.options); - - // Setup feature inspection - this.setupInspection(esriDynamicMapLayer); - return esriDynamicMapLayer; - } - - setupInspection(layer) { - this.map.on("click", (e) => { - this.appendLoadingMessage(); - - // Query layer at click location - const identify = identifyFeatures({ - url: layer.options.url, - useCors: true, - }) - .tolerance(2) - .returnGeometry(false) - .on(this.map) - .at(e.latlng); - - // Query specific layer if dynamicLayerId is set - if (this.dynamicLayerId) { - identify.layers("all: " + this.dynamicLayerId); - } - - identify.run((error, featureCollection, response) => { - if (error || response.results < 1) { - this.appendErrorMessage(); - } else { - this.populateAttributeTable(featureCollection.features[0]); - } - }); - }); - } - - appendLoadingMessage() { - const spinner = document.createElement("tbody"); - spinner.className = "attribute-table-body"; - spinner.innerHTML = ` - -

Inspecting

- - `; - document.querySelector(".attribute-table-body").replaceWith(spinner); - } - - appendErrorMessage() { - const errorMessage = document.createElement("tbody"); - errorMessage.className = "attribute-table-body"; - errorMessage.innerHTML = `Could not find that feature`; - document.querySelector(".attribute-table-body").replaceWith(errorMessage); - } - - populateAttributeTable(feature) { - const html = document.createElement("tbody"); - html.className = "attribute-table-body"; - Object.entries(feature.properties).forEach(([property, value]) => { - const row = document.createElement("tr"); - row.innerHTML = `${property}${linkifyHtml(value)}`; - html.appendChild(row); - }); - document.querySelector(".attribute-table-body").replaceWith(html); - } -} diff --git a/app/javascript/leaflet/viewers/esri/feature_layer.js b/app/javascript/leaflet/viewers/esri/feature_layer.js deleted file mode 100644 index bf770e079..000000000 --- a/app/javascript/leaflet/viewers/esri/feature_layer.js +++ /dev/null @@ -1,106 +0,0 @@ -import { featureLayer } from "esri-leaflet"; -import LeafletViewerEsri from "../esri.js"; - -export default class LeafletViewerEsriFeatureLayer extends LeafletViewerEsri { - constructor(element, options) { - super(element, options); - this.defaultStyles = { - esriGeometryPoint: "", - esriGeometryMultipoint: "", - esriGeometryPolyline: { color: "blue", weight: 3 }, - esriGeometryPolygon: { color: "blue", weight: 2 }, - }; - } - - getPreviewLayer() { - // Set layer URL - this.options.url = this.data.url; - - // Set default style - this.options.style = this.getFeatureStyle(); - - // Define feature layer - this.esriFeatureLayer = featureLayer(this.options); - - // Setup feature inspection and opacity - this.setupInspection(this.esriFeatureLayer); - this.setupInitialOpacity(this.esriFeatureLayer); - - return this.esriFeatureLayer; - } - - controlPreload() { - // Define setOpacity function that works for SVG elements - this.esriFeatureLayer.setOpacity = (opacity) => { - document.querySelectorAll(".leaflet-clickable").forEach((element) => { - element.style.opacity = opacity; - }); - }; - } - - getFeatureStyle() { - // Lookup style hash based on layer geometry type and return function - return (feature) => this.defaultStyles[this.layerInfo.geometryType]; - } - - setupInitialOpacity(featureLayer) { - featureLayer.on("load", () => { - featureLayer.setOpacity(this.options.opacity || 1); // Assuming `this.options.opacity` is defined - }); - } - - setupInspection(featureLayer) { - // Inspect on click - featureLayer.on("click", (e) => { - const distance = 3000 / (1 + this.map.getZoom()); - - this.appendLoadingMessage(); - - // Query layer at click location - featureLayer - .query() - .returnGeometry(false) - .nearby(e.latlng, distance) - .run((error, featureCollection) => { - if (error || !featureCollection.features.length) { - this.appendErrorMessage(); - } else { - this.populateAttributeTable(featureCollection.features[0]); - } - }); - }); - } - - appendLoadingMessage() { - const spinner = document.createElement("tbody"); - spinner.className = "attribute-table-body"; - spinner.innerHTML = ` - - `; - const tableBody = document.querySelector(".attribute-table-body"); - if (tableBody) { - tableBody.parentNode.replaceChild(spinner, tableBody); - } - } - - appendErrorMessage() { - const errorMessage = ` - Could not find that feature`; - const tableBody = document.querySelector(".attribute-table-body"); - if (tableBody) { - tableBody.innerHTML = errorMessage; - } - } - - populateAttributeTable(feature) { - let htmlContent = ``; - Object.entries(feature.properties).forEach(([key, value]) => { - htmlContent += `${key}${value}`; - }); - htmlContent += ``; - const tableBody = document.querySelector(".attribute-table-body"); - if (tableBody) { - tableBody.innerHTML = htmlContent; - } - } -} diff --git a/app/javascript/leaflet/viewers/esri/image_map_layer.js b/app/javascript/leaflet/viewers/esri/image_map_layer.js deleted file mode 100644 index d53facfaf..000000000 --- a/app/javascript/leaflet/viewers/esri/image_map_layer.js +++ /dev/null @@ -1,12 +0,0 @@ -import { imageMapLayer } from "esri-leaflet"; -import LeafletViewerEsri from "../esri.js"; - -export default class LeafletEsriImageMapLayer extends LeafletViewerEsri { - getPreviewLayer() { - // Set layer URL - this.options.url = this.data.url; - - // Return image service layer - return imageMapLayer(this.options); - } -} diff --git a/app/javascript/leaflet/viewers/esri/tiled_map_layer.js b/app/javascript/leaflet/viewers/esri/tiled_map_layer.js deleted file mode 100644 index 53495cf11..000000000 --- a/app/javascript/leaflet/viewers/esri/tiled_map_layer.js +++ /dev/null @@ -1,73 +0,0 @@ -import { tiledMapLayer, identifyFeatures } from "esri-leaflet"; -import LeafletViewerEsri from "../esri.js"; - -export default class LeafletViewerEsriTiledMapLayer extends LeafletViewerEsri { - getPreviewLayer() { - // Set layer URL - this.options.url = this.data.url; - - // Check if this is a tile map layer and for correct spatial reference - if ( - this.layerInfo.singleFusedMapCache === true && - this.layerInfo.spatialReference.wkid === 102100 - ) { - /** - * TODO: allow non-mercator projections and custom scales - * - use Proj4Leaflet - */ - - const esriTiledMapLayer = tiledMapLayer(this.options); - - // Setup feature inspection - this.setupInspection(esriTiledMapLayer); - - return esriTiledMapLayer; - } - } - - setupInspection(layer) { - this.map.on("click", (e) => { - this.appendLoadingMessage(); - - // Query layer at click location - identifyFeatures({ - url: layer.options.url, - useCors: true, - }) - .tolerance(0) - .returnGeometry(false) - .on(this.map) - .at(e.latlng) - .run((error, featureCollection) => { - if (error) { - this.appendErrorMessage(); - } else { - this.populateAttributeTable(featureCollection.features[0]); - } - }); - }); - } - - appendLoadingMessage() { - const loadingMessage = ``; - document.querySelector(".attribute-table-body").innerHTML = loadingMessage; - } - - appendErrorMessage() { - const errorMessage = `Could not find that feature`; - document.querySelector(".attribute-table-body").innerHTML = errorMessage; - } - - populateAttributeTable(feature) { - const properties = feature.properties; - const tableBody = document.querySelector(".attribute-table-body"); - tableBody.innerHTML = ""; // Clear existing content - - Object.entries(properties).forEach(([key, value]) => { - const row = `${key}${value}`; - tableBody.innerHTML += row; - }); - } -} diff --git a/app/javascript/leaflet/viewers/iiif.js b/app/javascript/leaflet/viewers/iiif.js deleted file mode 100644 index fb90d454d..000000000 --- a/app/javascript/leaflet/viewers/iiif.js +++ /dev/null @@ -1,36 +0,0 @@ -import { map, tileLayer, CRS } from "leaflet"; -import "leaflet-iiif"; -import LeafletViewerBase from "./base.js"; - -export default class LeafletViewerIiif extends LeafletViewerBase { - constructor(el) { - super(el); - this.onLoad(); - } - - onLoad() { - this.adjustLayout(); - - this.map = map(this.element, { - center: [0, 0], - crs: CRS.Simple, - zoom: 0, - }); - - this.iiifLayer = tileLayer.iiif(this.data.url).addTo(this.map); - this.addControls(); - } - - adjustLayout() { - // Hide attribute table - const tableContainer = document.getElementById("table-container"); - if (tableContainer) { - tableContainer.style.display = "none"; - } - - // Expand viewer element - if (this.element.parentNode) { - this.element.parentNode.className = "col-md-12"; - } - } -} diff --git a/app/javascript/leaflet/viewers/index_map.js b/app/javascript/leaflet/viewers/index_map.js deleted file mode 100644 index daa068d01..000000000 --- a/app/javascript/leaflet/viewers/index_map.js +++ /dev/null @@ -1,176 +0,0 @@ -import { geoJson, circleMarker } from "leaflet"; -import LeafletViewerMap from "./map.js"; - -export default class LeafletViewerIndexMap extends LeafletViewerMap { - onLoad() { - super.onLoad(); - this.map.addLayer(this.selectBasemap()); - - if (this.available) { - this.addPreviewLayer(); - this.addControls(); - } else { - this.addBoundsOverlay(this.options.bbox); - } - } - - indexMapInfoTemplate = (data) => ` - `; - - indexMapDownloadTemplate = (data) => - data.downloadUrl - ? ` -

-

Selected feature

-

-
• -
  - - ${data.label ? data.label : "Download"} - -
  -
-

-

-` - : ""; - - 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 - } - }); - }; - - availabilityStyle(availability) { - const options = JSON.parse(this.data.leafletOptions); - return availability || typeof availability === "undefined" - ? options.LAYERS.INDEX.DEFAULT - : options.LAYERS.INDEX.UNAVAILABLE; - } - - addPreviewLayer() { - const options = JSON.parse(this.data.leafletOptions); - let prevLayer = null; - - fetch(this.data.url) - .then((response) => response.json()) - .then((data) => { - const geoJSONLayer = geoJson(data, { - style: (feature) => - this.availabilityStyle(feature.properties.available), - onEachFeature: (feature, layer) => { - if (feature.properties.label !== null) { - layer.bindTooltip(feature.properties.label); - } - if (feature.properties.available !== null) { - layer.on("click", (e) => { - layer.setStyle(options.LAYERS.INDEX.SELECTED); - if (prevLayer !== null) { - geoJSONLayer.resetStyle(prevLayer); - } - prevLayer = layer; - this.updateInformation(feature.properties); - }); - } - }, - pointToLayer: (feature, latlng) => circleMarker(latlng), - }).addTo(this.map); - this.map.fitBounds(geoJSONLayer.getBounds()); - }) - .catch((error) => console.error(error)); - } - - updateInformation = (properties) => { - this.indexMapTemplate(properties).then((updatedProperties) => { - const indexMapHtml = this.indexMapInfoTemplate(updatedProperties); - document.querySelector(".viewer-information").innerHTML = indexMapHtml; - - const indexMapDownloadHtml = - this.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()); - } - }); - }; -} diff --git a/app/javascript/leaflet/viewers/map.js b/app/javascript/leaflet/viewers/map.js deleted file mode 100644 index 891b4ed01..000000000 --- a/app/javascript/leaflet/viewers/map.js +++ /dev/null @@ -1,69 +0,0 @@ -import { layerGroup, LatLngBounds, polygon, geoJSON, map } from "leaflet"; -import basemaps from "../basemaps.js"; -import { geoJSONToBounds } from "../utils.js"; -import LeafletViewerBase from "./base.js"; - -export default class LeafletViewerMap extends LeafletViewerBase { - constructor(element, options) { - super(element); - - this.options = { - // Initial bounds of map - bbox: [ - [-82, -144], - [77, 161], - ], - opacity: 0.75, - ...options, - }; - - this.overlay = layerGroup(); - this.onLoad(); - } - - onLoad() { - if (this.data.mapGeom) { - this.options.bbox = geoJSONToBounds(JSON.parse(this.data.mapGeom)); - } - - this.map = map(this.element).fitBounds(this.options.bbox); - - // Add initial bbox to map element for easier testing - if (this.map.getBounds().isValid()) { - this.element.setAttribute( - "data-js-map-render-bbox", - this.map.getBounds().toBBoxString() - ); - } - - this.map.addLayer(this.selectBasemap()); - this.map.addLayer(this.overlay); - } - - addBoundsOverlay(bounds) { - if (bounds instanceof LatLngBounds) { - this.overlay.addLayer( - polygon([ - bounds.getSouthWest(), - bounds.getSouthEast(), - bounds.getNorthEast(), - bounds.getNorthWest(), - ]) - ); - } - } - - removeBoundsOverlay() { - this.overlay.clearLayers(); - } - - addGeoJsonOverlay(geojson) { - const layer = geoJSON(); - layer.addData(geojson); - this.overlay.addLayer(layer); - } - - selectBasemap() { - return this.data.basemap ? basemaps[this.data.basemap] : basemaps.positron; - } -} diff --git a/app/javascript/leaflet/viewers/oembed.js b/app/javascript/leaflet/viewers/oembed.js deleted file mode 100644 index a77475121..000000000 --- a/app/javascript/leaflet/viewers/oembed.js +++ /dev/null @@ -1,21 +0,0 @@ -import LeafletViewerBase from "./base.js"; - -export default class LeafletViewerOembed extends LeafletViewerBase { - constructor() { - super(); - this.onLoad(); - } - - onLoad() { - const el = document.getElementById(this.element.id); - fetch(this.data.url) - .then((response) => response.json()) - .then((data) => { - if (data === null) { - return; - } - el.innerHTML = data.html; - }) - .catch((error) => console.error("Error loading oEmbed data:", error)); - } -} diff --git a/app/javascript/leaflet/viewers/pmtiles.js b/app/javascript/leaflet/viewers/pmtiles.js deleted file mode 100644 index ac970ece5..000000000 --- a/app/javascript/leaflet/viewers/pmtiles.js +++ /dev/null @@ -1,5 +0,0 @@ -import LeafletViewerBase from "./base.js"; - -export default class LeafletViewerPmtiles extends LeafletViewerBase { - load() {} -} diff --git a/app/javascript/leaflet/viewers/tilejson.js b/app/javascript/leaflet/viewers/tilejson.js deleted file mode 100644 index 3ac5e62e1..000000000 --- a/app/javascript/leaflet/viewers/tilejson.js +++ /dev/null @@ -1,31 +0,0 @@ -import { latLng, latLngBounds, tileLayer } from "leaflet"; -import LeafletViewerWms from "./wms.js"; - -export default class LeafletViewerTileJson extends LeafletViewerWms { - addPreviewLayer() { - fetch(this.data.url) - .then((response) => { - if (!response.ok) { - throw new Error("Unable to fetch tile.json document"); - } - return response.json(); - }) - .then((tileJson) => { - const bounds = this.getBounds(tileJson), - options = bounds ? { bounds } : {}, - url = tileJson.tiles[0], - tileJsonLayer = tileLayer(url, options); - this.overlay.addLayer(tileJsonLayer); - }) - .catch((error) => console.debug(error)); - } - - getBounds(doc) { - const bounds = doc.bounds; - if (bounds) { - const corner1 = latLng(bounds[1], bounds[0]), - corner2 = latLng(bounds[3], bounds[2]); - return latLngBounds(corner1, corner2); - } - } -} diff --git a/app/javascript/leaflet/viewers/tms.js b/app/javascript/leaflet/viewers/tms.js deleted file mode 100644 index 354a7f7f7..000000000 --- a/app/javascript/leaflet/viewers/tms.js +++ /dev/null @@ -1,9 +0,0 @@ -import { tileLayer } from "leaflet"; -import LeafletViewerWms from "./wms.js"; - -export default class LeafletViewerTms extends LeafletViewerWms { - addPreviewLayer() { - const tmsLayer = tileLayer(this.data.url, { tms: true }); - this.overlay.addLayer(tmsLayer); - } -} diff --git a/app/javascript/leaflet/viewers/wms.js b/app/javascript/leaflet/viewers/wms.js deleted file mode 100644 index f7c4a71db..000000000 --- a/app/javascript/leaflet/viewers/wms.js +++ /dev/null @@ -1,81 +0,0 @@ -import { tileLayer } from "leaflet"; -import LeafletViewerMap from "./map.js"; - -export default class LeafletViewerWms extends LeafletViewerMap { - onLoad() { - super.onLoad(); - if (this.available) { - this.addPreviewLayer(); - this.addControls(); - } else { - this.addBoundsOverlay(this.options.bbox); - } - } - - addPreviewLayer() { - const wmsLayer = tileLayer.wms(this.data.url, { - layers: this.data.layerId, - format: "image/png", - transparent: true, - tiled: true, - CRS: "EPSG:3857", - opacity: this.options.opacity, - detectRetina: this.detectRetina(), - }); - this.overlay.addLayer(wmsLayer); - this.setupInspection(); - } - - setupInspection() { - this.map.on("click", async (e) => { - const spinner = document.createElement("tbody"); - spinner.className = "attribute-table-body"; - spinner.innerHTML = - ''; - document.querySelector(".attribute-table-body").replaceWith(spinner); - - const wmsoptions = { - URL: this.data.url, - LAYERS: this.data.layerId, - BBOX: this.map.getBounds().toBBoxString(), - WIDTH: Math.round(document.getElementById("map").clientWidth), - HEIGHT: Math.round(document.getElementById("map").clientHeight), - QUERY_LAYERS: this.data.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 data = await response.json(); - - if (data.hasOwnProperty("error") || data.values.length === 0) { - document.querySelector(".attribute-table-body").innerHTML = - 'Could not find that feature'; - return; - } - - const html = document.createElement("tbody"); - html.className = "attribute-table-body"; - data.values.forEach((val) => { - html.innerHTML += `${val[0]}${val[1]}`; // Note: You might need to implement linkify functionality - }); - document.querySelector(".attribute-table-body").replaceWith(html); - } catch (error) { - console.error("Fetch error: ", error); - } - }); - } -} diff --git a/app/javascript/leaflet/viewers/wmts.js b/app/javascript/leaflet/viewers/wmts.js deleted file mode 100644 index 3b23bb14e..000000000 --- a/app/javascript/leaflet/viewers/wmts.js +++ /dev/null @@ -1,81 +0,0 @@ -import { latLng, latLngBounds, tileLayer } from "leaflet"; -import LeafletViewerWms from "./wms.js"; - -export default class LeafletViewerWmts extends LeafletViewerWms { - addPreviewLayer() { - fetch(this.data.url) - .then((response) => { - if (!response.ok) { - throw new Error("Unable to fetch WMTSCapabilities document"); - } - return response.text(); - }) - .then((wmtsCapabilities) => { - const tileInfo = this.parseCapabilities(wmtsCapabilities), - options = tileInfo.bounds ? { bounds: tileInfo.bounds } : {}, - layer = tileLayer(tileInfo.url, options); - this.overlay.addLayer(layer); - }) - .catch((error) => { - console.debug(error); - }); - } - - parseCapabilities(wmtsCapabilities) { - const parser = new DOMParser(), - doc = parser.parseFromString(wmtsCapabilities, "application/xml"), - layers = doc.getElementsByTagName("Layer"), - selectedLayer = this.findLayer(layers), - resourceElement = selectedLayer.getElementsByTagName("ResourceURL")[0]; - - // Generate URL with Leaflet.TileLayer URL template formatting - const tileURL = resourceElement - .getAttribute("template") - .replace("{Style}", this.getStyle(selectedLayer)) - .replace("{TileMatrixSet}", this.getTileMatrixSet(selectedLayer)) - .replace("TileMatrix", "z") - .replace("TileCol", "x") - .replace("TileRow", "y"); - - return { url: tileURL, bounds: this.getBounds(selectedLayer) }; - } - - findLayer(layers) { - 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 === this.data.layerId) { - return layers[i]; - } - } - } - } - } - - getStyle(layer) { - const styleElement = layer.getElementsByTagName("Style")[0]; - return styleElement - ? styleElement.getElementsByTagName("ows:Identifier")[0].textContent - : undefined; - } - - getTileMatrixSet(layer) { - const tileMatrixElement = layer.getElementsByTagName("TileMatrixSet")[0]; - return tileMatrixElement ? tileMatrixElement.textContent : undefined; - } - - 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); - } - } -} diff --git a/app/javascript/leaflet/viewers/xyz.js b/app/javascript/leaflet/viewers/xyz.js deleted file mode 100644 index ffe2c3134..000000000 --- a/app/javascript/leaflet/viewers/xyz.js +++ /dev/null @@ -1,9 +0,0 @@ -import { tileLayer } from "leaflet"; -import LeafletViewerWms from "./wms.js"; - -export default class LeafletViewerXyz extends LeafletViewerWms { - addPreviewLayer() { - const xyzLayer = tileLayer(this.data.url); - this.overlay.addLayer(xyzLayer); - } -} diff --git a/app/javascript/openlayers/basemaps.js b/app/javascript/openlayers/basemaps.js deleted file mode 100644 index bc0012c24..000000000 --- a/app/javascript/openlayers/basemaps.js +++ /dev/null @@ -1,47 +0,0 @@ -export const openLayersBasemaps = { - darkMatter: { - url:'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - positron: { - url: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - positronLite: { - url: 'https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - worldAntique: { - url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - worldEco: { - url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - flatBlue: { - url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - midnightCommander: { - url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors, © Carto', - maxZoom: 18 - }, - openstreetmapHot: { - url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team', - maxZoom: 19 - }, - openstreetmapStandard: { - url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors', - maxZoom: 19 - } -} diff --git a/app/javascript/openlayers/ol_initializer.js b/app/javascript/openlayers/ol_initializer.js deleted file mode 100644 index 9b4c8f322..000000000 --- a/app/javascript/openlayers/ol_initializer.js +++ /dev/null @@ -1,105 +0,0 @@ -import { Map, View } from 'ol' -import TileLayer from 'ol/layer/Tile' -import VectorTile from 'ol/layer/VectorTile' -import XYZ from 'ol/source/XYZ' -import GeoJSON from 'ol/format/GeoJSON' -import { useGeographic } from 'ol/proj' -import { - Style, Stroke, Fill, Circle -} from 'ol/style' -import GeoTIFF from 'ol/source/GeoTIFF' -import WebGLTileLayer from 'ol/layer/WebGLTile' -import { FullScreen, defaults as defaultControls } from 'ol/control' -import { PMTilesVectorSource } from 'ol-pmtiles' -import { openLayersBasemaps } from './basemaps' - -export default class OlInitializer { - constructor () { - this.element = document.getElementById('ol-map') - if (this.element) { - this.data = this.element.dataset - this.extent = new GeoJSON().readFeatures(this.data.mapGeom)[0].getGeometry().getExtent() - } - } - - run () { - if (!this.element) return false - if (this.data.protocol === 'Pmtiles') { - this.initializePmtiles() - } else if (this.data.protocol === 'Cog') { - this.initializeCog() - } - } - - baseLayer () { - const basemap = openLayersBasemaps[this.data.basemap] - const layer = new TileLayer({ - source: new XYZ({ - attributions: basemap["attribution"], - url: basemap["url"], - maxZoom: basemap["maxZoom"] - }) - }) - return layer - } - - initializePmtiles () { - const vectorLayer = new VectorTile({ - declutter: true, - source: new PMTilesVectorSource({ - url: this.data.url - }), - style: new Style({ - stroke: new Stroke({ - color: '#7070B3', - width: 1 - }), - fill: new Fill({ - color: '#FFFFFF' - }), - image: new Circle({ - radius: 7, - fill: new Fill({ - color: '#7070B3' - }), - stroke: new Stroke({ - color: '#FFFFFF', - width: 2 - }) - }) - }) - }) - - useGeographic() - const map = new Map({ - controls: defaultControls().extend([new FullScreen()]), - layers: [this.baseLayer(), vectorLayer], - target: 'ol-map' - }) - map.getView().fit(this.extent, map.getSize()) - } - - initializeCog () { - const source = new GeoTIFF({ - sources: [{ url: this.data.url }], - convertToRGB: true - }) - - source.getView().then((view) => { - const map = new Map({ - controls: defaultControls().extend([new FullScreen()]), - target: 'ol-map', - layers: [ - this.baseLayer(), - new WebGLTileLayer({ - source - }) - ], - view: new View({ - center: view.center - }) - }) - map.getView().fit(view.extent, map.getSize()) - }) - } -} diff --git a/app/models/concerns/geoblacklight/solr_document.rb b/app/models/concerns/geoblacklight/solr_document.rb index 4f122dbee..4e72450f5 100644 --- a/app/models/concerns/geoblacklight/solr_document.rb +++ b/app/models/concerns/geoblacklight/solr_document.rb @@ -20,11 +20,11 @@ def available? end def public? - rights_field_data.present? && rights_field_data.casecmp("public").zero? + rights_field_data&.casecmp?("public") end def restricted? - rights_field_data.blank? || rights_field_data.casecmp("restricted").zero? + !rights_field_data || rights_field_data.casecmp?("restricted") end def downloadable? @@ -40,7 +40,7 @@ def direct_download end def display_note - fetch(Settings.FIELDS.DISPLAY_NOTE, "") + fetch(Settings.FIELDS.DISPLAY_NOTE, []) end def hgl_download @@ -52,7 +52,7 @@ def oembed end def same_institution? - fetch(Settings.FIELDS.PROVIDER, "").casecmp(Settings.INSTITUTION.downcase).zero? + fetch(Settings.FIELDS.PROVIDER, "").casecmp?(Settings.INSTITUTION.downcase) end def iiif_download @@ -104,7 +104,7 @@ def checked_endpoint(type) private def rights_field_data - fetch(Settings.FIELDS.ACCESS_RIGHTS, "") + fetch(Settings.FIELDS.ACCESS_RIGHTS, nil) end def method_missing(method, *args, &block) diff --git a/app/models/concerns/geoblacklight/solr_document/citation.rb b/app/models/concerns/geoblacklight/solr_document/citation.rb index 7cf27bf7a..c759e38d7 100644 --- a/app/models/concerns/geoblacklight/solr_document/citation.rb +++ b/app/models/concerns/geoblacklight/solr_document/citation.rb @@ -12,12 +12,34 @@ def geoblacklight_citation(solr_document_url) fetch(Settings.FIELDS.TITLE, nil), ("[#{format}]" if format), fetch(Settings.FIELDS.PUBLISHER, nil), - I18n.t("geoblacklight.citation.retrieved_from", document_url: solr_document_url) + citation_link(solr_document_url) ].flatten.compact.join(". ") end private + # The actual citation link varies based on what is available in the document + # go through a list of potential links in order of preference, ending with the solr_document_url + def citation_link(solr_document_url) + identifier_url || reference_url || solr_document_url + end + + # identifier url in solr document (if it exists) + def identifier_url + identifiers = fetch(Settings.FIELDS.IDENTIFIER, []) + + # find any identifier that look like a URL, return if found (could be DOI, Stanford PURL, etc) + identifiers.find { |identifier| identifier if identifier.starts_with?("https://") } + end + + # Examine the list of references (in dct_references_s) to find a "schema.org/url"; return URL if found + # References are retrieved from the SolrDocument as an array of Geoblacklight::Reference + # where the "reference" attribute is an array of two elements, the first being the type and the second being the url + def reference_url + url = references.refs.find { |ref| ref.reference[0] == "http://schema.org/url" } + url.present? ? url.reference[1] : nil + end + def issued fetch(Settings.FIELDS.DATE_ISSUED, nil) end diff --git a/app/presenters/geoblacklight/bbox_item_presenter.rb b/app/presenters/geoblacklight/bbox_item_presenter.rb index 6fcd0d4c9..83959dfb5 100644 --- a/app/presenters/geoblacklight/bbox_item_presenter.rb +++ b/app/presenters/geoblacklight/bbox_item_presenter.rb @@ -2,7 +2,7 @@ module Geoblacklight class BboxItemPresenter < Blacklight::FacetItemPresenter - def label + def value super.to_param end end diff --git a/app/presenters/geoblacklight/document_presenter.rb b/app/presenters/geoblacklight/document_presenter.rb deleted file mode 100644 index e8bfa7471..000000000 --- a/app/presenters/geoblacklight/document_presenter.rb +++ /dev/null @@ -1,25 +0,0 @@ -# frozen_string_literal: true - -module Geoblacklight - ## - # Adds custom functionality for Geoblacklight document presentation - class DocumentPresenter < Blacklight::IndexPresenter - include ActionView::Helpers::OutputSafetyHelper - ## - # Presents configured index fields in search results. Passes values through - # configured helper_method. Multivalued fields separated by presenter - # field_value_separator (default: comma). Fields separated by period. - # @return [String] - def index_fields_display - fields_values = [] - @configuration.index_fields.each do |_field_name, field_config| - val = field_value(field_config) - if val.present? - val += "." unless val.end_with?(".") - fields_values << val - end - end - safe_join(fields_values, " ") - end - end -end diff --git a/app/views/catalog/_citation.html.erb b/app/views/catalog/_citation.html.erb index 0a98d80a9..227eddbb2 100644 --- a/app/views/catalog/_citation.html.erb +++ b/app/views/catalog/_citation.html.erb @@ -1,35 +1,19 @@ -