Preview Shapefiles associated with GeoServer layers

README.rst

@@ -28,6 +28,7 @@ package:
 ::
 
    PREVIEWER_PREVIEWERS_ORDER = [
+       "invenio_previewer.extensions.geoserver",
        "invenio_previewer.extensions.gpx",
        "invenio_previewer.extensions.csv_papaparsejs",
        "invenio_previewer.extensions.json_prismjs",
@@ -44,6 +45,7 @@ package:
    ]
 
    PREVIEWER_PREFERENCE = [
+       "geoserver",
        "gpx",
        "csv_papaparsejs",
        "json_prismjs",
@@ -58,13 +60,13 @@ package:
        "txt",
    ]
 
-Allow Images from Open Street Map
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Allow Images from Open Street Map & GeoServers
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 In ``invenio.cfg`` edit ``APP_DEFAULT_SECURE_HEADERS`` to allow images
 from OpenStreetMap:
 
-::
+.. code:: python
 
    APP_DEFAULT_SECURE_HEADERS = {
        'content_security_policy': {
@@ -77,12 +79,77 @@ from OpenStreetMap:
            'img-src': [
                "'self'",
                "https://*.openstreetmap.org",
+               "https://maps-public.geo.nyu.edu/geoserver/sdr/wms",
                'data:',
            ]
        },
        ...
    }
 
+Add Custom GeoServer Fields
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+In ``invenio.cfg`` add the following namespace, custom fields and UI elements:
+
+.. code:: python
+
+    # Set these if you want to override the field names below
+    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"
+
+    RDM_NAMESPACES = {
+        "geoserver": "https://geoserver.org/"
+    }
+
+    RDM_CUSTOM_FIELDS = [
+        TextCF(name="geoserver:wms_url"),
+        TextCF(name="geoserver:wfs_url"),
+        TextCF(name="geoserver:layer_name"),
+    ]
+
+    RDM_CUSTOM_FIELDS_UI = [
+        {
+            "section": _("GeoServer"),
+            "fields": [
+                dict(
+                    field="geoserver:wms_url",
+                    ui_widget="Input",
+                    props=dict(
+                        label="WMS URL",
+                        placeholder="https://maps-public.geo.nyu.edu/geoserver/sdr/wms",
+                        icon="linkify",
+                        description="GeoServer WMS Service Base URL",
+                        required=False
+                    )
+                ),
+                dict(
+                    field="geoserver:wfs_url",
+                    ui_widget="Input",
+                    props=dict(
+                        label="WMS URL",
+                        placeholder="https://maps-public.geo.nyu.edu/geoserver/sdr/wfs",
+                        icon="linkify",
+                        description="GeoServer WFS Service Base URL",
+                        required=False
+                    )
+                ),
+                dict(
+                    field="geoserver:layer_name",
+                    ui_widget="Input",
+                    props=dict(
+                        label="Layer Name",
+                        placeholder="sdr:nyu_2451_12345",
+                        icon="pencil",
+                        description="Name of the GeoServer Layer this data can be found in",
+                        required=False
+                    )
+                )
+            ]
+        }
+    ]
+
+
 Development
 -----------
 

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

@@ -0,0 +1,6 @@
+@import "leaflet/dist/leaflet.css";
+
+#map {
+  width: 100%;
+  height: 480px;
+}

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

@@ -0,0 +1,28 @@
+import L from "leaflet"
+import "leaflet/dist/leaflet.css";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const mapElement = document.getElementById("map");
+  const baseUrl = mapElement.getAttribute("data-base-url")
+  const layerName = mapElement.getAttribute("data-layer-name")
+
+  const map = L.map('map').setView([51.505, -0.09], 13);
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+
+  const wmsLayer = L.tileLayer.wms(baseUrl, {
+    layers: layerName,
+    format: 'image/png',
+    transparent: true
+  });
+
+  wmsLayer.addTo(map);
+  wmsLayer.setOpacity(0.75);
+  map.fitBounds([
+    [17.881242, -179.14734],
+    [71.390482, 179.778465]
+  ])
+});

invenio_previewer_geospatial/config.py

@@ -10,3 +10,7 @@
 
 PREVIEWER_GEOSPATIAL_BASE_TEMPLATE = "invenio_previewer_geospatial/base.html"
 """Default base template for the demo page."""
+
+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"

invenio_previewer_geospatial/extensions/geoserver.py

@@ -0,0 +1,32 @@
+"""GeoServer Previewer."""
+
+from flask import render_template, current_app
+from invenio_previewer.proxies import current_previewer
+
+previewable_extensions = ["shp"]
+
+
+def can_preview(file):
+    """Check if file can be previewed."""
+    return file.is_local() and file.has_extensions(".shp")
+
+
+def preview(file):
+    """Render the Geoserver template."""
+    return render_template(
+        "invenio_previewer_geospatial/geoserver.html",
+        file=file,
+        record=file.record,
+        wms_url_field=(
+            current_app.config.get(
+                "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_WMS_URL"
+            )
+        ),
+        layer_name_field=(
+            current_app.config.get(
+                "PREVIEWER_GEOSPATIAL_CUSTOM_FIELDS_GEOSERVER_LAYER_NAME"
+            )
+        ),
+        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

@@ -0,0 +1,12 @@
+{%- extends config.PREVIEWER_ABSTRACT_TEMPLATE %}
+
+{% block panel %}
+  {% if record.custom_fields[wms_url_field] and record.custom_fields[layer_name_field] %}
+    <div id="map"
+         data-base-url="{{ record.custom_fields[wms_url_field] }}"
+         data-layer-name="{{ record.custom_fields[layer_name_field] }}"
+    ></div>
+  {% else %}
+    <p>Sorry, this Shapefile has no associated GeoServer layer.</p>
+  {% endif %}
+{% endblock %}

invenio_previewer_geospatial/webpack.py

@@ -11,6 +11,8 @@
             entry={
                 "gpx_js": "./js/invenio_previewer_geospatial/gpx.js",
                 "gpx_css": "./css/invenio_previewer_geospatial/gpx.css",
+                "geoserver_js": "./js/invenio_previewer_geospatial/geoserver.js",
+                "geoserver_css": "./css/invenio_previewer_geospatial/geoserver.css",
             },
             dependencies={"leaflet": "^1.9.4", "leaflet-gpx": "^2.1.2"},
         ),

setup.cfg

@@ -49,6 +49,7 @@ invenio_assets.webpack =
     invenio_previewer_geospatial = invenio_previewer_geospatial.webpack:theme
 invenio_previewer.previewers =
     gpx = invenio_previewer_geospatial.extensions.gpx
+    geoserver = invenio_previewer_geospatial.extensions.geoserver
 
 [build_sphinx]
 source-dir = docs/