Merge pull request #35 from developmentseed/update-collection-page

Update collection page

Author: vincentsarago

runtimes/eoapi/stac/eoapi/stac/templates/collection.html

@@ -1,10 +1,11 @@
-{% include "header.html" %}
+{% extends "base.html" %}
 {% if params %}
   {% set urlq = url + '?' + params + '&' %}
   {% else %}
   {% set urlq = url + '?' %}
 {% endif %}
 
+{% block content %}
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb bg-light">
     {% for crumb in crumbs %} {% if not loop.last %}
@@ -21,18 +22,24 @@
   </ol>
 </nav>
 
-<h1>Collection: {{ response.title or response.id }}</h1>
+<h1 class="my-4">
+  <span class="d-block text-uppercase text-muted h6 mb-0">Collection:</span>
+  {{ response.title or response.id }}
+</h1>
 
 <div class="row">
-  <div class="col-sm">
-    <p>{{ response.description or response.title or response.id }}</p>
-    {% if "keywords" in response and length(response.keywords) > 0 %}
-    <div id="keywords">
-      <p>
+  <div class="col-md-7">
+    {% if response.description %}
+    <p>{{ response.description }}</p>
+    {% endif %}
+    {% if "keywords" in response and response.keywords|length > 0 %}
+    <div class="d-flex align-items-center mb-4">
+      {% include "icons/tag.html" %}
+      <ul class="mb-0 pl-2">
         {% for keyword in response.keywords %}
-        <span class="badge badge-secondary">{{ keyword }}</span>
+        <li class="badge badge-secondary">{{ keyword }}</li>
         {% endfor %}
-      </p>
+      </lul>
     </div>
     {% endif %}
 
@@ -43,40 +50,64 @@ <h2>Links</h2>
       {% endfor %}
     </ul>
   </div>
-  <div class="col-sm">
+  <div class="col-md-5">
+    {% if response.license %}
+    <div class="d-flex align-items-center mb-2">
+      {% include "icons/license.html" %}
+      <p class="mb-0 pl-2">{{ response.license }}</p>
+    </div>
+    {% endif %}
+    {% if response.extent and response.extent.temporal %}
+    <div class="d-flex align-items-center mb-2">
+      {% include "icons/clock.html" %}
+      <p class="mb-0 pl-2">{{ response.extent.temporal.interval.0.0 or "..." }} — {{ response.extent.temporal.interval.0.1 or "..." }}</p>
+    </div>
+    {% endif %}
+    {% if response.extent and response.extent.spatial %}
     <div id="map" class="rounded" style="width: 100%; height: 400px">
       Loading...
     </div>
+    {% endif %}
   </div>
 </div>
 
+{% if response.extent and response.extent.spatial %}
 <script>
-  $(function() {
-    var collection = {{ response|tojson }};
-    if (collection.extent && collection.extent.spatial){
-      var bbox = collection.extent.spatial.bbox[0]
-      var bbox_polygon = L.polygon([
+  window.addEventListener("load", function() {
+    const collection = {{ response|tojson }};
+    var map = L.map('map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }
+    ));
+
+    for (let i = 0, len = collection.extent.spatial.bbox.length; i < len; i++) {
+      const options = i === 0 ? {
+        fill: false,
+        weight: 2
+      } : {
+        color: "red",
+        fill: false,
+        dashArray: 2,
+        weight: 1
+      };
+      const bbox = collection.extent.spatial.bbox[i];
+      const bbox_polygon = L.polygon([
         [bbox[1], bbox[0]],
         [bbox[1], bbox[2]],
         [bbox[3], bbox[2]],
         [bbox[3], bbox[0]]
-      ]);
+      ], options);
 
-      var map = L.map('map').setView([0, 0], 1);
-      map.addLayer(new L.TileLayer(
-        'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          maxZoom: 18,
-          attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
-        }
-      ));
 
       map.addLayer(bbox_polygon);
-      map.fitBounds(bbox_polygon.getBounds());
-    } else {
-      document.getElementById("map").style.display = "none";
+      if (i === 0) {
+        map.fitBounds(bbox_polygon.getBounds());
+      }
     }
-
   });
 </script>
-
-{% include "footer.html" %}
+{% endif %}
+{% endblock %}

runtimes/eoapi/stac/eoapi/stac/templates/icons/clock.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"/></svg>

runtimes/eoapi/stac/eoapi/stac/templates/icons/license.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm0-320q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm8-77Z"/></svg>

runtimes/eoapi/stac/eoapi/stac/templates/icons/tag.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/></svg>