geonode-pycsw 3.0.0b2__py3-none-any.whl

pycsw/ogc/api/templates/items.html

@@ -0,0 +1,337 @@
+{% extends "_base.html" %}
+{% block title %}{{ super() }} Items {% endblock %}
+
+{% block extrahead %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"></script>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+    <style>
+        #records-map {
+            height: 350px;
+        }
+    </style>
+
+{% endblock %}
+
+{% block crumbs %}
+{{ super() }} /
+<a href="{{ config['server']['url'] }}/collections">Collections</a> /
+<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}">{{ data['title'] }}</a> /
+<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items">Items</a>
+{% endblock %}
+
+{% block body %}
+
+<section id="items">
+
+{% set nav_links = namespace(prev=None, next=None, self=None) %}
+{% for link in data['links'] %}
+  {% if link['rel'] == 'prev' %}
+    {% set nav_links.prev = link['href'] %}
+  {% endif %}
+  {% if link['rel'] == 'self' %}
+    {% set nav_links.self = link['href'] %}
+  {% endif %}
+  {% if link['rel'] == 'next' %}
+    {% set nav_links.next = link['href'] %}
+  {% endif %}
+{% endfor %}
+
+{# parse the querystring as dict #}
+{% set attrs = {} %}
+{% if '?' in nav_links.self %}
+  {% for kv in nav_links.self.split('#')[0].split('?').pop().split('&') %}
+    {% if kv.split('=')[0] not in [None,'']  %}
+      {{ attrs.update({kv.split('=')[0] : kv.split('=')[1]}) or '' }} 
+    {% endif %}
+  {% endfor %}
+{% else %}
+  {% set nav_links.self = link['href'].split('#')[0] + '?' %}  
+{% endif %}
+
+{# update existing url with new key,val. indent prevents spaces in output #}
+{# reset pagination, else you may end up in empty result #}
+{% macro updateurl(key=None,val=None) %}{{ nav_links.self.split('?')[0] }}?{% 
+  for at in attrs.keys() %}{%
+    if at != 'offset' %}{%
+      if attrs[at] not in [None,''] %}{% 
+        if key not in [None,''] and key == at %}&{{ at }}={{ val }}{% 
+        else %}&{{ at }}={{ attrs[at] }}{% 
+        endif %}{% 
+      endif %}{% 
+    endif %}{%
+    if key not in attrs.keys() %}&{{ key }}={{ val }}{% endif %}{% 
+  endfor %}{% 
+endmacro %}
+
+{% macro reseturl(key,val) %}{{ 
+  nav_links.self.split('?')[0]}}?facets=true{% 
+    if 'q' in attrs %}&q={{ attrs['q'] }}{% endif %}{%
+    if 'sortby' in attrs %}&sortby={{ attrs['sortby'] }}{% endif %}{%
+endmacro %}
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-8">
+      <select name="order" class="p-1 pe-3" onchange="sort(this.value)">
+        <option value="">Sort by...</option>
+        <option value="title" {% if attrs['sortby'] == 'title' %}selected{% endif %}>Title</option>
+        <option value="-updated" {% if attrs['sortby'] == '-updated' %}selected{% endif %}>Date</option>
+      </select>
+    </div>
+    <div class="col-md-4">
+      <form action="{{ nav_links.self.split('?')[0] }}" method="GET">
+      <div class="input-group mb-3"> 
+        <input type="text" class="form-control" name="q" placeholder="Search" id="tbq" value="">
+        <script>
+          $('#tbq').val(decodeURIComponent("{{ attrs.get('q', '').replace('+',' ') }}"))
+        </script>
+        <input class="btn btn-outline-secondary" type="submit" value="Search"></input>
+      </div>
+      </form>
+    </div>
+  </div>
+  <hr class="my-1"/>
+  <div class="row">
+    <div class="col-lg-4">
+      <div class="my-2">
+          <b>{{ data['numberMatched'] }} results.</b>
+      </div>
+      <div id="records-map"></div>
+      <div id="spatial-filter" class="mt-2">
+        <div class="form-check form-switch">
+          <input class="form-check-input my-2" onchange="trigger_spatial_filter()" {% if 'bbox' in attrs.keys() %}checked{% endif %} type="checkbox" id="spatial-filter-check">
+          <label class="form-check-label" for="spatial-filter-check">Spatial filter</label>
+          <btn class="btn btn-sm border border-rounded" onclick="apply_spatial_filter()">Apply</btn>
+        </div>  
+      </div>
+      <div id="facets" class="mt-2">
+        <div class="d-flex justify-content-between">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" {% if 'facets=true' in nav_links.self %}checked="true"{% endif %} onchange="facet(this.checked)"  role="switch" id="enableFacets">
+            <label class="form-check-label" for="enableFacets">Facets</label>
+          </div>
+          <div>
+            {% if 'facets=true' in nav_links.self %}
+            <a href="{{ reseturl() }}">Reset</a>
+            {% endif %}
+          </div>
+        </div>
+        {% if data['facets'] %}
+        {% for facet in data['facets'].keys() %}
+        <div class="card mt-3">
+          <div class="card-header text-capitalize">{{ facet }}</div>
+          <div class="card-body">
+            {% for bucket in data['facets'][facet].buckets %}
+            {% if bucket['value'] %}
+            <a href="{{ updateurl(facet,bucket['value']) }}" title="{{bucket['value']}}"
+              >{{(bucket['value'] or "") | truncate(20, False, '..') | capitalize }}</a>
+            <span class="badge rounded-pill bg-secondary" style="float:right">{{bucket['count']}}</span><br>
+            {% endif %}
+            {% endfor %}
+          </div>
+        </div>
+        {% endfor %}
+        {% endif %}
+      </div>
+    </div>
+    <div class="col-lg-8">
+      <div class="row ps-2">
+        <table class="table table-striped table-hover" id="items-table-table">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Type</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for rec in data['features'] %}
+            <tr>
+              {% if 'properties' in rec %}
+              <td id="{{ rec['id'] }}"><a title="{{ rec['properties'].get('title', rec['id']) }}" href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items/{{ rec['id'] }}">{{ rec['properties'].get('title', rec['id']) }}</a></td>
+              {% else %}
+              <td id="{{ rec['id'] }}"><a title="{{ rec.get('title', rec['id']) }}" href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items/{{ rec['id'] }}">{{ rec.get('title', rec['id']) }}</a></td>
+              {% endif %}
+              {% if 'properties' in rec %}
+                {% if 'type' in rec['properties'] %}
+                <td>{{ rec['properties']['type'] }}</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' not in rec %}
+                <td>record</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' in rec %}
+                <td>item</td>
+                {% else%}
+                <td>{{ rec.get('type') }}</td>
+                {% endif %}
+              {% else %}
+                {% if rec.get('type') == 'Feature' and 'stac_version' not in rec %}
+                <td>record</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' in rec %}
+                <td>item</td>
+                {% elif rec.get('type') == 'Collection' and 'stac_version' in rec %}
+                <td>collection</td>
+                {% elif rec.get('type') == 'Catalog' and 'stac_version' in rec %}
+                <td>catalog</td>
+                {% else%}
+                <td>{{ rec.get('type') }}</td>
+                {% endif %}
+              {% endif %}
+              {% if 'properties' in rec %}
+              <td>{{ rec['properties'].get('updated', '').split('T')[0].replace('-','/') }}</td>
+              {% endif %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+        <div class="d-flex justify-content-between">
+        <div>
+        {% if nav_links.prev %}
+        <a href="{{ nav_links.prev }}"><button type="button" class="btn btn-sm btn-primary">Prev</button></a>
+        {% else %}
+        <button type="button" class="btn btn-sm btn-primary" disabled>Prev</button>
+        {% endif %}</div>
+        <div>
+        Showing {{ data['numberReturned'] }} of {{ data['numberMatched'] }} results.</div>
+        <div>
+        {% if nav_links.next %}
+        <a href="{{ nav_links.next }}"><button type="button" class="btn btn-sm btn-primary">Next</button></a>
+        {% else %}
+        <button type="button" class="btn btn-sm btn-primary" disabled>Next</button>
+        {% endif %}</div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+
+</section>
+
+<script>
+function sort(val){
+  location.href="{{updateurl('sortby','sortprop')}}".replace('sortprop',val);
+}
+function facet(val){
+  location.href="{{updateurl('facets','facetprop')}}".replace('facetprop',val);
+}
+
+//if url has a bbox, enable the spatial filter 
+var bbox;
+{% if 'bbox' in attrs.keys() %}
+  {% set bbox_tokens = attrs['bbox'].split('%2C') %}
+  {% if bbox_tokens|length == 4 %}
+    bbox = [[{{ 
+      bbox_tokens[1] }}, {{ bbox_tokens[0] }}], [{{ 
+      bbox_tokens[3] }}, {{ bbox_tokens[2] }}]];
+  {% endif %}
+{% endif %}
+
+//if filter enabled, apply the spatial filter
+function apply_spatial_filter(){
+  if (map.hasLayer(rectangle)){
+    location.href="{{ updateurl('bbox','tmptmp') }}".replace('tmptmp',yx(rectangle.getBounds()));
+  }
+}
+</script>
+
+{% endblock %}
+
+{% block extrafoot %}
+
+<script>
+    var map = L.map('records-map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+        'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+            attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+        }
+    ));
+    var geojson_data = {{ data['features'] | to_json }};
+    {% if data['features'] %}
+    var items = new L.GeoJSON(geojson_data, {
+        onEachFeature: function (feature, layer) {
+            var url = './items/' + feature.id;
+            var html = '<span><a href="' + url + '">' + feature.id + '</a></span>';
+            layer._leaflet_id = feature.id;
+            layer.bindPopup(html);
+        }
+    });
+
+    map.addLayer(items);
+    if (!bbox){
+      var bounds = items.getBounds();
+      if (bounds.isValid() === true) {
+          map.fitBounds(bounds);
+      }
+    }
+    {% endif %}
+    
+    //set rectangle if page initializes with a spatial filter
+    if (bbox){
+      setRectangle(bbox);
+      map.fitBounds(bbox);
+    } 
+
+    var highlightStyle = {
+        color: 'red',
+        dashArray: '',
+        fillOpacity: 0.5
+    }
+
+    {% if data['features'] %}
+    $(document).ready(function() {
+        $('#items-table-table tr').on('mouseenter', function(e){
+            id_ = $(this).find('[id]').attr('id');
+            layer = items.getLayer(id_); //your feature id here
+            if (layer) {
+                layer.setStyle(highlightStyle);
+            }
+        }).on('mouseout', function(e){
+            id_ = $(this).find('[id]').attr('id');
+            layer = items.getLayer(id_); //your feature id here
+            items.resetStyle(layer);
+        });
+        $("#q").on("keypress", function(event){
+            if (event.which == 13 && !event.shiftKey) {
+                event.preventDefault();
+                var queryParams = new URLSearchParams(window.location.search);
+                queryParams.set("q", $("#q").val());
+                var new_url = '{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items?' + queryParams.toString();
+                window.location = new_url;
+            }
+        });
+    });
+    {% endif %}
+
+// Generates a pycsw bbox from leaflet bounds    
+function yx (b){
+  if (b && b._southWest){
+    return [b._southWest.lng,b._southWest.lat,b._northEast.lng,b._northEast.lat].join(',');
+  }
+}
+
+// Creates or sets the filter rectangle and adds it to map
+var rectangle;
+function setRectangle(bbox){
+  if (rectangle){
+      rectangle.setBounds(bbox)
+  } else {
+      rectangle = L.rectangle(bbox);
+      rectangle.editing.enable();
+      rectangle.setStyle({color :'green'});
+  }
+  map.addLayer(rectangle);
+}
+
+// Dis/en-ables the spatial filter, the layer is removed or added at 95% map bounds
+function trigger_spatial_filter(){
+    if (map.hasLayer(rectangle)){
+      rectangle.remove();
+    } else {
+      setRectangle(map.getBounds().pad(-0.95));
+    }
+}
+</script>
+{% endblock %}

pycsw/ogc/api/templates/landing_page.html

@@ -0,0 +1,27 @@
+{% extends "_base.html" %}
+{% block title %}{{ super() }} Home {% endblock %}
+{% block body %}
+
+<section id="links">
+<div>
+  <h3>{{ config['metadata']['identification']['description'] }}</h3>
+  <ul class="list-group">
+    <li class="list-group-item list-group-item-action"><a title="Collections" href="{{ config['server']['url'] }}/collections">Collections</a></li>
+    <li class="list-group-item list-group-item-action">OpenAPI
+      <ul class="list-group">
+        <li class="list-group-item list-group-item-action"><a title="Swagger" href="{{ config['server']['url'] }}/openapi?f=html">Swagger</a></li>
+        <li class="list-group-item list-group-item-action"><a title="JSON" href="{{ config['server']['url'] }}/openapi?f=json">JSON</a></li>
+      </ul>
+    </li>
+    <li class="list-group-item list-group-item-action"><a title="Conformance" href="{{ config['server']['url'] }}/conformance">Conformance</a></li>
+    <li class="list-group-item list-group-item-action"><a title="CSW 3.0.0 endpoint" href="{{ config['server']['url'] }}/csw">CSW 3.0.0</a></li>
+    <li class="list-group-item list-group-item-action"><a title="CSW 2.0.2 endpoint" href="{{ config['server']['url'] }}/csw?service=CSW&version=2.0.2&request=GetCapabilities">CSW 2.0.2</a></li>
+    <li class="list-group-item list-group-item-action"><a title="OpenSearch endpoint" href="{{ config['server']['url'] }}/opensearch">OpenSearch</a></li>
+    <li class="list-group-item list-group-item-action"><a title="STAC API" href="{{ config['server']['url'] }}/stac">STAC API</a></li>
+    <li class="list-group-item list-group-item-action"><a title="OAI-PMH endpoint" href="{{ config['server']['url'] }}/oaipmh">OAI-PMH</a></li>
+    <li class="list-group-item list-group-item-action"><a title="SRU endpoint" href="{{ config['server']['url'] }}/sru">SRU</a></li>
+  </ul>
+</div>
+</section>
+
+{% endblock %}

pycsw/ogc/api/templates/openapi.html

@@ -0,0 +1,58 @@
+<!-- HTML for static distribution bundle build -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Swagger UI - {{ config['metadata']['identification']['title'] }}</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3.28.0/swagger-ui.css" >
+    <link rel="icon" type="image/png" href="https://unpkg.com/swagger-ui-dist@3.28.0/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="https://unpkg.com/swagger-ui-dist@3.28.0/favicon-16x16.png" sizes="16x16" />
+    <style>
+      html
+      {
+        box-sizing: border-box;
+        overflow: -moz-scrollbars-vertical;
+        overflow-y: scroll;
+      }
+      *,
+      *:before,
+      *:after
+      {
+        box-sizing: inherit;
+      }
+      body
+      {
+        margin:0;
+        background: #fafafa;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="swagger-ui"></div>
+    <script src="https://unpkg.com/swagger-ui-dist@3.28.0/swagger-ui-bundle.js"> </script>
+    <script src="https://unpkg.com/swagger-ui-dist@3.28.0/swagger-ui-standalone-preset.js"> </script>
+    <script>
+    window.onload = function() {
+      // Begin Swagger UI call region
+      ui = SwaggerUIBundle({
+        url: '{{ config['server']['url'] }}/openapi?f=json',
+        dom_id: '#swagger-ui',
+        deepLinking: true,
+        presets: [
+          SwaggerUIBundle.presets.apis,
+          SwaggerUIStandalonePreset
+        ],
+        plugins: [
+         SwaggerUIBundle.plugins.DownloadUrl
+        ],
+        layout: 'StandaloneLayout'
+      })
+      // End Swagger UI call region
+      window.ui = ui
+    }
+  </script>
+  <style>.swagger-ui .topbar .download-url-wrapper { display: none } undefined</style>
+  </body>
+</html>
+

pycsw/ogc/api/templates/queryables.html

@@ -0,0 +1,50 @@
+{% extends "_base.html" %}
+{% block title %}{{ super() }} Queryables {% endblock %}
+
+{% block crumbs %}
+{{ super() }} /
+<a href="{{ config['server']['url'] }}/collections">Collections</a> /
+<a href="{{ config['server']['url'] }}/collections/{{ data['id'] }}">{{ data['title'] }}</a> /
+<a href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/queryables">Queryables</a>
+{% endblock %}
+
+{% block body %}
+
+<section id="queryables">
+  <h2>Queryables</h2>
+  <h2>{{ data['title'] }}</h2>
+
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for qname, qinfo in data['properties'].items() %}
+      {% if qname == 'geometry' %}
+      <tr>
+        <td colspan="2"><a href="{{ qinfo['$ref'] }}">{{ qname }}</a></td>
+      </tr>
+      {% else %}
+      <tr>
+        <td>{{ qname }}</td>
+        <td>
+          <code>{{ qinfo['type'] }}</code>
+          {% if 'enum' in qinfo %}
+          <ul>
+            {% for value in qinfo['enum'] %}
+            <li><i>{{ value }}</i></li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+        </td>
+      </tr>
+      {% endif %}
+      {% endfor %}
+    </tbody>
+  </table>
+</section>
+
+{% endblock %}

pycsw/ogc/api/templates/stac_items.html

@@ -0,0 +1,173 @@
+{% extends "_base.html" %}
+{% block title %}{{ super() }} Items {% endblock %}
+
+{% block extrahead %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <style>
+        #records-map {
+            height: 350px;
+        }
+    </style>
+
+{% endblock %}
+
+{% block crumbs %}
+{{ super() }} /
+<a href="{{ config['server']['url'] }}/search">Search</a>
+{% endblock %}
+
+{% block body %}
+
+<section id="items">
+
+{% set nav_links = namespace(prev=None, next=None) %}
+{% for link in data['links'] %}
+  {% if link['rel'] == 'prev' %}
+    {% set nav_links.prev = link['href'] %}
+  {% endif %}
+  {% if link['rel'] == 'next' %}
+    {% set nav_links.next = link['href'] %}
+  {% endif %}
+{% endfor %}
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-6">
+      <div id="records-map"></div>
+    </div>
+    <div class="col-lg-6">
+      {% if nav_links.prev %}
+      <a href="{{ nav_links.prev }}"><button type="button" class="btn btn-sm btn-primary">Prev</button></a>
+      {% else %}
+      <button type="button" class="btn btn-sm btn-primary" disabled>Prev</button>
+      {% endif %}
+      {% if nav_links.next %}
+      <a href="{{ nav_links.next }}"><button type="button" class="btn btn-sm btn-primary">Next</button></a>
+      {% else %}
+      <button type="button" class="btn btn-sm btn-primary" disabled>Next</button>
+      {% endif %}
+      <form id="items-query-form">
+        <input id="q" class="form-control" name="q"/>
+      </form>
+      <div class="row">
+        <table class="table table-striped table-hover" id="items-table-table">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Type</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for rec in data['features'] %}
+            <tr>
+              {% if 'properties' in rec %}
+              <td id="{{ rec['id'] }}"><a title="{{ rec['properties']['title'] }}" href="{{ config['server']['url'] }}/stac/collections/metadata:main/items/{{ rec['id'] }}">{{ rec['properties']['title'] }}</a></td>
+              {% else %}
+              <td id="{{ rec['id'] }}"><a title="{{ rec.get('title', rec['id']) }}" href="{{ config['server']['url'] }}/stac/collections/metadata:main/items/{{ rec['id'] }}">{{ rec.get('title', rec['id']) }}</a></td>
+              {% endif %}
+              {% if 'properties' in rec %}
+                {% if 'type' in rec['properties'] %}
+                <td>{{ rec['properties']['type'] }}</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' not in rec %}
+                <td>record</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' in rec %}
+                <td>item</td>
+                {% else%}
+                <td>{{ rec.get('type') }}</td>
+                {% endif %}
+              {% else %}
+                {% if rec.get('type') == 'Feature' and 'stac_version' not in rec %}
+                <td>record</td>
+                {% elif rec.get('type') == 'Feature' and 'stac_version' in rec %}
+                <td>item</td>
+                {% elif rec.get('type') == 'Collection' and 'stac_version' in rec %}
+                <td>collection</td>
+                {% elif rec.get('type') == 'Catalog' and 'stac_version' in rec %}
+                <td>catalog</td>
+                {% else%}
+                <td>{{ rec.get('type') }}</td>
+                {% endif %}
+              {% endif %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      {% if nav_links.prev %}
+      <a href="{{ nav_links.prev }}"><button type="button" class="btn btn-sm btn-primary">Prev</button></a>
+      {% else %}
+      <button type="button" class="btn btn-sm btn-primary" disabled>Prev</button>
+      {% endif %}
+      {% if nav_links.next %}
+      <a href="{{ nav_links.next }}"><button type="button" class="btn btn-sm btn-primary">Next</button></a>
+      {% else %}
+      <button type="button" class="btn btn-sm btn-primary" disabled>Next</button>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+</section>
+
+{% endblock %}
+
+{% block extrafoot %}
+{% if data['features'] %}
+    <script>
+    var map = L.map('records-map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+        'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+            attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+        }
+    ));
+    var geojson_data = {{ data['features'] | to_json }};
+    var items = new L.GeoJSON(geojson_data, {
+        onEachFeature: function (feature, layer) {
+            var url = './items/' + feature.id;
+            var html = '<span><a href="' + url + '">' + feature.id + '</a></span>';
+            layer._leaflet_id = feature.id;
+            layer.bindPopup(html);
+        }
+    });
+
+    map.addLayer(items);
+    var bounds = items.getBounds();
+    if (bounds.isValid() === true) {
+        map.fitBounds(bounds);
+    }
+
+    var highlightStyle = {
+        color: 'red',
+        dashArray: '',
+        fillOpacity: 0.5
+    }
+
+    $(document).ready(function() {
+        $('#items-table-table tr').on('mouseenter', function(e){
+            id_ = $(this).find('[id]').attr('id');
+            layer = items.getLayer(id_); //your feature id here
+            if (layer) {
+                layer.setStyle(highlightStyle);
+            }
+        }).on('mouseout', function(e){
+            id_ = $(this).find('[id]').attr('id');
+            layer = items.getLayer(id_); //your feature id here
+            items.resetStyle(layer);
+        });
+        $("#q").on("keypress", function(event){
+            if (event.which == 13 && !event.shiftKey) {
+                event.preventDefault();
+
+                var queryParams = new URLSearchParams(window.location.search);
+                queryParams.set("q", $("#q").val());
+                var new_url = '{{ config['server']['url'] }}/collections/metadata:main/items?' + queryParams.toString();
+                window.location = new_url;
+            }
+        });
+    });
+    </script>
+{% endif %}
+{% endblock %}