geoblacklight 5.4.0 → 6.0.0.pre.alpha.1

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

@@ -23,6 +23,38 @@ export default {
     worldCopyJump: true,
     retina: "@2x",
   },
+  worldAntique: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  worldEco: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  flatBlue: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  midnightCommander: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
   openstreetmapHot: {
     url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
     attribution:
@@ -33,10 +65,9 @@ export default {
   },
   openstreetmapStandard: {
     url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     maxZoom: 19,
     worldCopyJump: true,
     retina: "@2x",
   },
-};
+}

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

@@ -1,18 +1,18 @@
-import { LatLngBounds } from "leaflet";
+import { LatLngBounds } from "leaflet"
 
 export const DEFAULT_BOUNDS = new LatLngBounds([
   [-30, -100],
   [30, 100],
-]);
+])
 
-export const DEFAULT_OPACITY = 0.75;
+export const DEFAULT_OPACITY = 0.75
 
-export const DEFAULT_BASEMAP = "positron";
+export const DEFAULT_BASEMAP = "positron"
 
 export const DEFAULT_GEOM_OVERLAY_OPTIONS = {
-  color: '#3388ff',
+  color: "#3388ff",
   dashArray: "5 5",
   weight: 2,
   opacity: 1,
-  fillOpacity: 0
-}
+  fillOpacity: 0,
+}

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

@@ -1,160 +1,166 @@
-import { DomUtil, Control, Handler, setOptions } from "leaflet";
-import { debounce, boundsToBbox } from "geoblacklight/leaflet/utils";
+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);
+    const _options = { ...geosearchDefaultOptions, ...options }
+    super(_options)
+    setOptions(this, _options)
   }
 
   onAdd(map) {
-    this.map = map;
-    this.map.options.geoSearchControl = this;
+    this.map = map
+    this.map.options.geoSearchControl = this
 
     // Create the buttons
-    this.staticButton = this.createStaticButton();
-    this.dynamicButton = this.createDynamicButton();
+    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);
+    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";
+    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.applySearch()
       }
-    }, this.options.delay);
+    }, this.options.delay)
 
     // Add the event handler
-    this.map.addHandler("geosearch", GeoSearchHandler);
+    this.map.addHandler("geosearch", GeoSearchHandler)
 
-    return container;
+    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;
+    const staticButtonNode = DomUtil.create("a")
+    staticButtonNode.setAttribute("id", "gbl-static-button")
+    staticButtonNode.setAttribute("href", "#")
+    staticButtonNode.setAttribute("style", "display:none;")
+    staticButtonNode.className = "btn btn-primary shadow"
+    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;
+    const dynamicButtonNode = DomUtil.create("label")
+    dynamicButtonNode.setAttribute("id", "gbl-dynamic-button")
+    dynamicButtonNode.className = "btn shadow border form-check-label"
+    dynamicButtonNode.textContent = " Search when I move the map"
+    dynamicButtonNode.setAttribute("style", "display:none;")
+    dynamicButtonNode.setAttribute("for", "gbl-dynamic-search-toggle")
+    const input = DomUtil.create("input")
+    input.setAttribute("type", "checkbox")
+    input.setAttribute("id", "gbl-dynamic-search-toggle")
+    input.className = "form-check-input"
+    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";
+    this.staticButton.style.display = "none"
     if (this.options.dynamic) {
-      this.dynamicButton.style.display = "block";
+      this.dynamicButton.style.display = "block"
     }
     // Do full page reload for staticSearch button
-    this.applySearch({ turbo: false });
+    this.applySearch({ turbo: false })
   }
 
   // Update the URL with the current bounding box and go back to page 1
-  applySearch(opts={turbo: true}) {
+  applySearch(opts = { turbo: true }) {
     // Delete any existing page and bbox parameters
-    const params = new URL(window.location).searchParams;
-    params.delete("page");
-    params.delete("bbox");
+    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(" "));
+    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);
-
+    if (Turbo && opts.turbo) {
+      // prevent scroll to top on new page
+      document.addEventListener("turbo:before-render", (event) => {
+        Turbo.navigator.currentVisit.scrolled = true
+      })
+      Turbo.visit(newUrl)
+    }
     // Otherwise fall back to the traditional full page reload
-    else window.location.href = newUrl;
+    else window.location.href = newUrl
   }
 
   // Toggle the dynamic search option
   toggleDynamicSearch() {
-    this.options.dynamic = !this.options.dynamic;
+    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";
+    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;
+    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));
+    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");
+    this.map.off("resize")
+    this.map.off("dragend")
+    this.map.off("dragstart")
+    this.map.off("zoomend")
+    this.map.off("zoomstart")
   }
 
   handleResize() {
-    this.wasResized = true;
+    this.wasResized = true
   }
 
   handleDragEnd() {
-    if (this.wasResized) this.wasResized = false;
-    else this.control.dynamicSearcher.apply(this.control);
+    if (this.wasResized) this.wasResized = false
+    else this.control.dynamicSearcher.apply(this.control)
   }
 
   handleDragStart() {
     if (!this.control.options.dynamic) {
-      this.control.hideDynamicButton();
+      this.control.hideDynamicButton()
     }
   }
 }

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

@@ -1,42 +1,42 @@
-import { DomUtil, DomEvent, Control } from "leaflet";
-import { getLayerOpacity } from "geoblacklight/leaflet/utils";
+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";
+    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];
+      layers = layer.getLayers()
+      layers = layers && layers[0] instanceof L.Layer ? layers : [layer]
     } else {
-      this.layersOnLoad = Object.keys(layer).includes('_layers');
+      this.layersOnLoad = Object.keys(layer).includes("_layers")
     }
-    this.options.layer = layers[0];
-    this.options.layers = this.layersOnLoad ? [] : 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);
+    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);
+    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;
+    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) {
@@ -45,10 +45,10 @@ export default class LayerOpacityControl extends Control {
 
   layerOpacity(layer, opacity) {
     try {
-      layer.setStyle({"fillOpacity": opacity, "opacity": opacity})
+      layer.setStyle({ fillOpacity: opacity, opacity: opacity })
     } catch {
       try {
-        layer.setOpacity(opacity);
+        layer.setOpacity(opacity)
       } catch {
         console.error("Couldn't set opacity for layer", layer)
       }
@@ -56,65 +56,66 @@ export default class LayerOpacityControl extends Control {
   }
 
   setListeners(handle, bottom, handleText, map) {
-    let start = false;
-    let startTop;
+    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);
-    });
+      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;
-    });
+      start = parseInt(e.clientY, 10)
+      startTop = handle.offsetTop - 12
+      return false
+    })
 
     DomEvent.on(document, "mouseup", () => {
-      start = null;
-    });
+      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);
+    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(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;
+    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;
+        return
+      }
+      e.preventDefault()
+      if (newOpacity > 100 || newOpacity < 0) {
+        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}%)`;
+      handle.style.top = `calc(100% - ${newOpacity}% - 12px)`
+      handleText.innerHTML = newOpacity + "%"
+      bottom.style.height = newOpacity + "%"
+      bottom.style.top = `calc(100% - ${newOpacity}%)`
       _this.updateMapOpacity(newOpacity / 100)
-    });
+    })
   }
 }

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

@@ -1,47 +1,49 @@
-import { Control } from "leaflet";
+import { Control } from "leaflet"
 
 export default class sidebarControl extends Control {
   constructor(options) {
-    const _options = { ...options };
-    super(_options);
+    const _options = { ...options }
+    super(_options)
   }
 
   onAdd(map) {
-    var div = L.DomUtil.create('div', 'leaflet-sidebar');
-    div.setAttribute("tabindex", "0");
-    const sidebarContainer = this.options.sidebar;
+    var div = L.DomUtil.create("div", "leaflet-sidebar")
+    div.setAttribute("tabindex", "0")
+    const sidebarContainer = this.options.sidebar
 
     // Disable zoom when the mouse enters the sidebar
-    div.addEventListener('mouseenter', function() {
-      map.scrollWheelZoom.disable();
-    });
+    div.addEventListener("mouseenter", function () {
+      map.scrollWheelZoom.disable()
+    })
 
-    div.addEventListener('touchstart', function() {
-      map.touchZoom.disable();
-      map.dragging.disable();
-    });
+    div.addEventListener("touchstart", function () {
+      map.touchZoom.disable()
+      map.dragging.disable()
+    })
 
     // without this the map will try to find data about whatever is behind the sidebar
-    div.addEventListener('click', function(event) {
-      event.stopPropagation();
-    });
+    div.addEventListener("click", function (event) {
+      event.stopPropagation()
+    })
 
     // Enable zoom when the mouse leaves the sidebar
-    div.addEventListener('touchend', function() {
-      map.touchZoom.enable();
-      map.dragging.enable();
-    });
+    div.addEventListener("touchend", function () {
+      map.touchZoom.enable()
+      map.dragging.enable()
+    })
 
     // Enable zoom when the mouse leaes the sidebar
-    div.addEventListener('mouseleave', function() {
-      map.scrollWheelZoom.enable();
-    });
+    div.addEventListener("mouseleave", function () {
+      map.scrollWheelZoom.enable()
+    })
 
-    if (!sidebarContainer) { return };
+    if (!sidebarContainer) {
+      return
+    }
     // Make sure table height is same as map (with a little padding)
-    sidebarContainer.children[0].style.maxHeight = `${map._container.offsetHeight - 30}px`;
-    div.innerHTML = sidebarContainer.innerHTML;
-    sidebarContainer.remove();
-    return div;
+    sidebarContainer.children[0].style.maxHeight = `${map._container.offsetHeight - 30}px`
+    div.innerHTML = sidebarContainer.innerHTML
+    sidebarContainer.remove()
+    return div
   }
-}
+}