use ogcapi leaflet plugin, instead of wms (#2145)

* use ogcapi leaflet plugin, instead of wms

* Refactor map link rendering in collection.html

---------

Co-authored-by: Tom Kralidis <tomkralidis@gmail.com>

Author: pvgenuchten

pygeoapi/api/__init__.py

@@ -1347,6 +1347,7 @@ def describe_collections(api: API, request: APIRequest,
         })
 
     if request.format == F_HTML:  # render
+        fcm['base_url'] = api.base_url
         fcm['collections_path'] = api.get_collections_url()
         if dataset is not None:
             tpl_config = api.get_dataset_templates(dataset)

pygeoapi/templates/collections/collection.html

@@ -10,6 +10,7 @@
 {% 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>
+    <script src='https://unpkg.com/leaflet-imageoverlay-ogcapi@0.1.0/Leaflet.ImageOverlay.OGCAPI.js'></script>
 {% endblock %}
 
 {% block body %}
@@ -148,11 +149,10 @@ <h3>{% trans %}Storage CRS{% endtrans %}</h3>
 
    {# if this collection has a map representation, add it to the map #}
    {% for link in data['links'] %}
-      {% if link['rel'] == 'http://www.opengis.net/def/rel/ogc/1.0/map' and link['href'] %}
-        L.tileLayer.wms("{{ link['href'] }}", {"opacity": .7, "transparent": true, "crs": L.CRS.EPSG4326}).addTo(map);
-      {% endif %}
-    {% endfor %}
-
+     {% if link['rel'] == 'http://www.opengis.net/def/rel/ogc/1.0/map' and link['href'] %} 
+        L.imageOverlay.ogcapi("{{ data['base_url'] }}", {collection: "{{ data['id'] }}", "opacity": .7, "transparent": true}).addTo(map);
+     {% endif %}
+   {% endfor %}
 
     var bbox_layer = L.polygon([
       ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],