From bbb5035508e8c0aae1a793dc47e358b1fab85563 Mon Sep 17 00:00:00 2001
From: Benjamin Webb <40066515+webb-ben@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:06:23 -0400
Subject: [PATCH] Render covjson and geojson in EDR HTML view (#1749)

---
 pygeoapi/templates/collections/edr/query.html | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/pygeoapi/templates/collections/edr/query.html b/pygeoapi/templates/collections/edr/query.html
index 7d90dba55..af426c766 100644
--- a/pygeoapi/templates/collections/edr/query.html
+++ b/pygeoapi/templates/collections/edr/query.html
@@ -14,9 +14,15 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet-coverage@0.7/leaflet-coverage.css">
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
+    {% if data.type == "Coverage" or data.type == "CoverageCollection" %}
     <script src="https://unpkg.com/covutils@0.6/covutils.min.js"></script>
     <script src="https://unpkg.com/covjson-reader@0.16/covjson-reader.src.js"></script>
     <script src="https://unpkg.com/leaflet-coverage@0.7/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 %}