Merge pull request #3 from nyudlts/geoserver-bounds

Zoom Leaflet maps to bounds provided by custom field

README.rst

@@ -100,6 +100,7 @@ In ``invenio.cfg`` add the following namespace, custom fields and UI elements:
     PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_WMS_URL = "geoserver:wms_url"
     PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_WFS_URL = "geoserver:wfs_url"
     PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_LAYER_NAME = "geoserver:layer_name"
+    PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_BOUNDS = "geoserver:bounds"
 
     RDM_NAMESPACES = {
         "geoserver": "https://geoserver.org/"
@@ -109,6 +110,7 @@ In ``invenio.cfg`` add the following namespace, custom fields and UI elements:
         TextCF(name="geoserver:wms_url"),
         TextCF(name="geoserver:wfs_url"),
         TextCF(name="geoserver:layer_name"),
+        TextCF(name="geoserver:bounds"),
     ]
 
     RDM_CUSTOM_FIELDS_UI = [
@@ -147,6 +149,17 @@ In ``invenio.cfg`` add the following namespace, custom fields and UI elements:
                         description="Name of the GeoServer Layer this data can be found in",
                         required=False
                     )
+                ),
+                dict(
+                    field="geoserver:bounds",
+                    ui_widget="Input",
+                    props=dict(
+                        label="Bounds",
+                        placeholder="ENVELOPE(-178.2176, -66.969275, 71.406235818, 18.921781818)",
+                        icon="pencil",
+                        description="The envelope for the bounds of this layer",
+                        required=False
+                    )
                 )
             ]
         }

invenio_previewer_geospatial/assets/semantic-ui/js/invenio_previewer_geospatial/geoserver.js

@@ -5,8 +5,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const mapElement = document.getElementById("map");
   const baseUrl = mapElement.getAttribute("data-base-url")
   const layerName = mapElement.getAttribute("data-layer-name")
+  const bounds = mapElement.getAttribute("data-bounds")
 
-  const map = L.map('map').setView([51.505, -0.09], 13);
+  const map = L.map('map').setView([0, 0], 13);
 
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
@@ -21,8 +22,18 @@ document.addEventListener("DOMContentLoaded", () => {
 
   wmsLayer.addTo(map);
   wmsLayer.setOpacity(0.75);
-  map.fitBounds([
-    [17.881242, -179.14734],
-    [71.390482, 179.778465]
-  ])
+
+  const regex = /ENVELOPE\(([-\d.]+), ([-\d.]+), ([-\d.]+), ([-\d.]+)\)/;
+  const match = bounds.match(regex);
+
+  if (match) {
+    const minLon = parseFloat(match[1]);
+    const maxLon = parseFloat(match[2]);
+    const minLat = parseFloat(match[3]);
+    const maxLat = parseFloat(match[4]);
+
+    const bounds = [[minLat, minLon], [maxLat, maxLon]];
+
+    map.fitBounds(bounds);
+  }
 });

invenio_previewer_geospatial/config.py

@@ -14,3 +14,4 @@
 PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_WMS_URL = "geoserver:wms_url"
 PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_WFS_URL = "geoserver:wfs_url"
 PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_LAYER_NAME = "geoserver:layer_name"
+PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_BOUNDS = "geoserver:bounds"

invenio_previewer_geospatial/extensions/geotiff_geoserver.py

@@ -27,6 +27,11 @@ def preview(file):
                 "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_LAYER_NAME"
             )
         ),
+        bounds_field=(
+            current_app.config.get(
+                "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_BOUNDS"
+            )
+        ),
         js_bundles=current_previewer.js_bundles + ["geoserver_js.js"],
         css_bundles=current_previewer.css_bundles + ["geoserver_css.css"],
     )

invenio_previewer_geospatial/extensions/shapefile_geoserver.py

@@ -27,6 +27,11 @@ def preview(file):
                 "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_LAYER_NAME"
             )
         ),
+        bounds_field=(
+            current_app.config.get(
+                "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_BOUNDS"
+            )
+        ),
         js_bundles=current_previewer.js_bundles + ["geoserver_js.js"],
         css_bundles=current_previewer.css_bundles + ["geoserver_css.css"],
     )

invenio_previewer_geospatial/templates/semantic-ui/invenio_previewer_geospatial/geoserver.html

@@ -5,6 +5,7 @@
     <div id="map"
          data-base-url="{{ record.custom_fields[wms_url_field] }}"
          data-layer-name="{{ record.custom_fields[layer_name_field] }}"
+         data-bounds="{{ record.custom_fields[bounds_field] }}"
     ></div>
   {% else %}
     <p>Sorry, this file has no associated GeoServer layer.</p>