Add HUC tiles (#40)

* Add MVT for hu02 hu04 hu06

* Condense pygeoapi config

* Update tile HTML

Author: webb-ben

pygeoapi-skin-dashboard/templates/collections/tiles/index.html

@@ -4,71 +4,65 @@
 / <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
 / <a href="../{{ data['id'] }}">{{ data['title'] }}</a>
 / <a href="../{{ data['id'] }}/tiles">{% trans %}Tiles{% endtrans %}</a>
-{% endblock %}
-{% block extrahead %}
+{%- endblock %}
+{%- block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
     <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
     <style>
-      .leaflet-popup-content {
-          width: 200px;
-          height: 100px;
+        .leaflet-popup-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+
+      #items-map {
+          max-height: 500px;
+          height: 500px;
+          max-width: 1000px;
       }
+      .metadata-link {
+        display: inline-block;
+        padding: 8px 16px;
+        background-color: #1B335F;
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        font-weight: 500;
+        margin-top: 12px;
+        transition: background-color 0.2s ease;
+    }
+
+    .metadata-link:hover {
+        background-color: #55677F;
+        text-decoration: none;
+    }
+
+    .metadata-link:focus {
+        outline: 2px solid #55677F;
+        outline-offset: 2px;
+    }
     </style>
-{% endblock %}
+{%- endblock %}
 
-{% block body %}
+{%- block body %}
     <section id="collection">
       <h1>{{ data['title'] }}</h1>
-      <p>{{ data['description'] }}</p>
-      <p>
-        {% for kw in data['keywords'] %}
-          <span class="badge text-bg-primary bg-primary">{{ kw }}</span>
-        {% endfor %}
-      </p>
-      <h3>Tiles</h3>
       <div class="row">
-        <div class="col-md-2 col-sm-12">{% trans %}Tile Matrix Set{% endtrans %}</div>
-        <div class="col-md-8">
-          <select id="tilingScheme">
-            {% for tileset in data['tilesets'] %}
-            <option value="{{ tileset }}">{{ tileset }}</option>
-            {% endfor %}
-          </select>
-        </div>
-      </div>
-      <br/>
-      <div class="row">
-          <div class="col-md-2 col-sm-12">{% trans %}Metadata{% endtrans %}</div>
-          <div class="col-md-8"><a id="metadata_link" href="" target="_blank">Metadata</a></div>
-      </div>
-      <script>
-        var select = document.getElementById('tilingScheme');
-        let params = (new URL(document.location)).searchParams;
-        var scheme = params.get('scheme') ?? select.value;
-        if (scheme) {
-            select.value = scheme;
-            document.getElementById("metadata_link").href = "{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/" + scheme + "/metadata";
-        }
-        select.addEventListener('change', ev => {
-          var scheme = ev.target.value;
-          console.log(scheme);
-          document.location.search = `scheme=${scheme}`;
-          document.getElementById("metadata_link").href = "{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/" + scheme + "/metadata";
-        });
-        </script>
-      <br/>
-      <div class="row">
-        <div class="col-md-2 col-sm-12">Map</div>
-        <div class="col-md-8">
+        <div class="col-md-10">
           <div id="items-map"></div>
         </div>
+        <div class="col-md-1">
+            <a id="metadata_link" class="metadata-link" href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/{{ data['tilesets'][0] }}/metadata" target="_blank">{% trans %}Metadata{% endtrans %}</a>
+          </div>
       </div>
     </section>
-{% endblock %}
+{%- endblock %}
 
-{% block extrafoot %}
+{%- block extrafoot %}
     <script>
+    var scheme = "{{ data['tilesets'][0] }}";
     var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 10);
 
     map.addLayer(new L.TileLayer(
@@ -131,8 +125,8 @@ <h3>Tiles</h3>
         var tilesPbfLayer = L.vectorGrid.protobuf(url, VectorTileOptions)
             .on('click', function(e) { // The .on method attaches an event handler
                 var uri = e.layer.properties.uri;
-                L.popup({minWidth: 300, maxHeight: 50})
-                    .setContent(`<b>URI</b>: <a href="${uri}">${uri}</a>`)
+                L.popup()
+                    .setContent(`<a href="${uri}">${uri}</a>`)
                     .setLatLng(e.latlng)
                     .openOn(map);