HTML: set clear opacity if collection has a map (#2226)

Author: tomkralidis

pygeoapi/templates/collections/collection.html

@@ -147,20 +147,23 @@ <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.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] }}'],
       ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
       ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}'],
       ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}']
     ]);
 
+   {# 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.imageOverlay.ogcapi("{{ data['base_url'] }}", {collection: "{{ data['id'] }}", "opacity": .7, "transparent": true}).addTo(map);
+        bbox_layer.setStyle({
+            fillOpacity: 0
+        });
+     {% endif %}
+   {% endfor %}
+
     map.addLayer(bbox_layer);
     map.fitBounds(bbox_layer.getBounds(), {maxZoom: 10});