add HTML template for single feature

pygeoapi/api.py

@@ -398,6 +398,19 @@ class API(object):
             'Content-type': 'application/json'
         }
 
+        formats = ['json', 'html']
+
+        format_ = args.get('f')
+        if format_ is not None and format_ not in formats:
+            exception = {
+                'code': 'InvalidParameterValue',
+                'description': 'Invalid format'
+            }
+            LOGGER.error(exception)
+            return headers_, 400, json.dumps(exception)
+
+        LOGGER.debug('Processing query parameters')
+
         if dataset not in self.config['datasets'].keys():
             exception = {
                 'code': 'InvalidParameterValue',
@@ -431,6 +444,12 @@ class API(object):
             }
         ]
 
+        if format_ == 'html':  # render
+            headers_['Content-type'] = 'text/html'
+            content = _render_j2_template(self.config, 'item.html',
+                                          content)
+            return headers_, 200, content
+
         return headers_, 200, json.dumps(content)
 
 
@@ -442,7 +461,7 @@ def to_json(dict_):
 
     :returns: JSON string representation
     """
-    import json
+
     return json.dumps(dict_)
 
 

pygeoapi/templates/item.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
+{% block extrahead %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
+    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
+    <style>
+      #items {
+        width: 80%;
+      }
+      #items-map {
+        width: 400px;
+        height: 400px;
+      }
+    </style>
+{% endblock %}
+
+{% block body %}
+    <section id="items">
+      <h2>{{ data['title'] }}</h2>
+      <span>{{ data['description'] }}</span>
+      <h2>Feature {{ data['ID'] }} <a title="JSON" href="./{{ data['ID']  }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
+      <table>
+          <tr>
+            <td><h3>Properties</h3>
+      <ul>
+      {% for k, v in data['properties'].items() %}
+          <li>{{ k }}: {{ v }}</li>
+      {% endfor %}
+      </ul>
+           </td>
+           <td>
+        <div id="items-map"></div>
+           </td>
+         </tr>
+       </table>
+    </section>
+{% endblock %}
+
+{% block extrafoot %}
+    <script>
+    var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 10);
+    map.addLayer(new L.TileLayer(
+        'http://tile.osm.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+            subdomains: '1234'
+        }
+    ));
+    var geojson_data = {{ data |to_json }};
+    var items = new L.GeoJSON(geojson_data);
+
+    map.addLayer(items);
+    map.fitBounds(items.getBounds(), {maxZoom: 10});
+    </script>
+{% endblock %}

pygeoapi/templates/items.html

@@ -18,13 +18,13 @@
     <section id="items">
       <h2>{{ data['title'] }}</h2>
       <span>{{ data['description'] }}</span>
-      <h2>Features <a title="JSON" href="./items"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
+      <h2>Features <a title="JSON" href="./"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
       <table>
           <tr>
             <td>
       <ul>
       {% for feature in data['features'] %}
-          <li><a title="{{ feature['ID'] }}" href="./items/{{ feature['ID'] }}">{{ feature['ID'] }}</a></li>
+          <li><a title="{{ feature['ID'] }}" href="./{{ feature['ID'] }}?f=html">{{ feature['ID'] }}</a></li>
       {% endfor %}
       </ul>
            </td>
@@ -48,7 +48,7 @@
     var geojson_data = {{ data['features'] |to_json }};
     var items = new L.GeoJSON(geojson_data, {
         onEachFeature: function (feature, layer) {
-            var html_ = '<span><a href="./items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
+            var html_ = '<span><a href="./' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
             layer.bindPopup(html_);
         }
     });