Render covjson and geojson in EDR HTML view (#1749)

pygeoapi/templates/collections/edr/query.html

@@ -14,9 +14,15 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/leaflet-coverage.css">
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    {% if data.type == "Coverage" or data.type == "CoverageCollection" %}
     <script src="https://unpkg.com/[email protected]/covutils.min.js"></script>
     <script src="https://unpkg.com/[email protected]/covjson-reader.src.js"></script>
     <script src="https://unpkg.com/[email protected]/leaflet-coverage.min.js"></script>
+    {% elif data.type == "Feature" or data.type == "FeatureCollection" %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
+    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
+    {% endif %}
 {% endblock %}
 
 {% block body %}
@@ -36,6 +42,7 @@
         }
     ));
 
+    {% if data.type == "Coverage" or data.type == "CoverageCollection" %}
     var layers = L.control.layers(null, null, {collapsed: false}).addTo(map)
 
     CovJSON.read(JSON.parse('{{ data | to_json | safe }}')).then(function (cov) {
@@ -57,7 +64,28 @@
         layers: [layer]
       }).setLatLng(e.latlng).openOn(map)
     })
+    {% elif data.type == "Feature" or data.type == "FeatureCollection" %}
+    var geojson_data = {{ data | to_json | safe }};
 
+    var items = new L.GeoJSON(geojson_data, {
+        onEachFeature: function (feature, layer) {
+            var html = '<span>' + {% if data['title_field'] %} feature['properties']['{{ data['title_field'] }}'] {% else %} feature.id {% endif %} + '</span>';
+            layer.bindPopup(html);
+        }
+    });
+    {% if data.type == "FeatureCollection" and data['features'][0]['geometry']['type'] == 'Point' %}
+    var markers = L.markerClusterGroup({
+        disableClusteringAtZoom: 9,
+        chunkedLoading: true,
+        chunkInterval: 500,
+    });
+    markers.clearLayers().addLayer(items);
+    map.addLayer(markers);
+    {% else %}
+    map.addLayer(items);
+    {% endif %}
+    map.fitBounds(items.getBounds(), {maxZoom: 15});
+    {% endif %}
 </script>
 {% endif %}
 {% endblock %}