Support visualizing collection results on a map

Author: m-mohr

package-lock.json

@@ -51,7 +51,7 @@
     "commonmark": "^0.31.2",
     "oidc-client-ts": "^3.0.1",
     "ol": "~10.6.0",
-    "ol-stac": "^1.0.5",
+    "ol-stac": "^1.1.0",
     "proj4": "^2.15.0",
     "remove-markdown": "^0.6.2",
     "stac-js": "~0.1.9",

package.json

@@ -3,10 +3,10 @@
     <header>
       <h2 class="title me-2">{{ title }}</h2>
       <b-badge v-if="catalogCount !== null" pill variant="secondary" class="me-4">{{ catalogCount }}</b-badge>
-      <ViewButtons class="me-2" v-model="view" />
-      <SortButtons v-if="isComplete && catalogs.length > 1" v-model="sort" />
+      <ViewButtons v-if="!hideControls" class="me-2" v-model="view" />
+      <SortButtons v-if="!hideControls && isComplete && catalogs.length > 1" v-model="sort" />
     </header>
-    <section v-if="isComplete && catalogs.length > 1" class="catalog-filter mb-2">
+    <section v-if="!hideControls && isComplete && catalogs.length > 1" class="catalog-filter mb-2">
       <SearchBox v-model="searchTerm" :placeholder="filterPlaceholder" />
       <multiselect
         v-if="allKeywords.length > 0"
@@ -68,6 +68,14 @@ export default defineComponent({
       type: Boolean,
       required: false
     },
+    enforceCards: {
+      type: Boolean,
+      default: false
+    },
+    hideControls: {
+      type: Boolean,
+      default: false
+    },
     loading: {
       type: Boolean,
       default: false
@@ -194,9 +202,15 @@ export default defineComponent({
     },
     view: {
       get() {
+        if (this.enforceCards) {
+          return 'cards';
+        }
         return this.$store.state.cardViewMode;
       },
       async set(cardViewMode) {
+        if (this.enforceCards) {
+          return;
+        }
         await this.$store.dispatch('config', { cardViewMode });
       }
     }

src/components/Catalogs.vue

@@ -12,9 +12,10 @@
       :target="selection.target" :teleport-to="container" class="map-popover"
       :boundary-padding="10"
     >
-      <section class="popover-items">
-        <Items v-if="selection && selection.type === 'items'" :stac="stac" :items="selection.items" />
-        <Features v-else-if="selection" :features="selection.items" />
+      <section class="popover-children">
+        <Items v-if="selection && selection.type === 'items'" :stac="stac" :items="selection.children" />
+        <Catalogs v-if="selection && selection.type === 'collections'" collectionsOnly enforceCards hideControls :stac="stac" :catalogs="selection.children" />
+        <Features v-else-if="selection" :features="selection.children" />
       </section>
       <div class="text-center">
         <b-button variant="danger" @click="resetSelection">{{ $t('mapping.close') }}</b-button>
@@ -44,6 +45,7 @@ export default {
   components: {
     BPopover: defineAsyncComponent(() => import('bootstrap-vue-next').then(m => m.BPopover)),
     Features: defineAsyncComponent(() => import('../components/Features.vue')),
+    Catalogs: defineAsyncComponent(() => import('../components/Catalogs.vue')),
     Items: defineAsyncComponent(() => import('../components/Items.vue')),
     LayerControl,
     TextControl
@@ -60,7 +62,7 @@ export default {
       type: Array,
       default: null
     },
-    items: {
+    children: {
       type: Object,
       default: null
     },
@@ -109,12 +111,12 @@ export default {
       }
       await this.stacLayer.setAssets(this.assets);
     },
-    async items() {
+    async children() {
       if (!this.stacLayer) {
         return;
       }
       await this.stacLayer.setAssets(null, false);
-      await this.stacLayer.setChildren(this.items, this.childrenOptions, false);
+      await this.stacLayer.setChildren(this.children, this.childrenOptions, false);
       await this.stacLayer.updateLayers();
       this.fit();
     },
@@ -152,7 +154,7 @@ export default {
         // Don't set the URL here, as it is already set in the STAC object and is read-only.
         // url: this.stac.getAbsoluteUrl(),
         data: this.stac,
-        children: this.items,
+        children: this.children,
         assets: this.assets || null,
         displayWebMapLink: true,
         disableMigration: true,
@@ -175,7 +177,7 @@ export default {
           multi: true,
           style: selectStyle,
           layers: (layer) => {
-            if (this.items) {
+            if (this.children) {
               // For item selection
               return false;
             }
@@ -204,7 +206,7 @@ export default {
         this.map.on('singleclick', async (event) => {
           // For item selection
           this.selection = null;
-          if (this.items) {
+          if (this.children) {
             this.setTargetPosition(event);
             this.selector.getFeatures().clear();
             const features = this.selector.getFeatures();
@@ -213,8 +215,8 @@ export default {
             if (objects.length > 0) {
               this.selection = {
                 target: this.$refs.target,
-                type: 'items',
-                items: objects
+                type: this.children.isCollectionCollection() ? 'collections': 'items',
+                children: objects
               };
             }
           }
@@ -271,15 +273,15 @@ export default {
     left: -1px;
   }
   
-  .popover-items {
+  .popover-children {
     max-height: 500px;
     overflow: auto;
     margin-top: -0.5rem;
     margin-left: -0.75rem;
     margin-right: -0.75rem;
     padding: 0.5rem 0.75rem 0  0.75rem;
 
-    .items, .features {
+    .items, .features, .catalogs {
       margin-bottom: 0 !important;
     }
 

src/components/MapView.vue

@@ -227,7 +227,7 @@ export default defineComponent({
       else {
         const items = this.items.filter(item => item.type === 'Feature');
         if (items.length > 0) {
-          data.items = new ItemCollection({
+          data.children = new ItemCollection({
             type: 'FeatureCollection',
             features: items
           });

src/views/Catalog.vue

@@ -26,8 +26,8 @@
         <b-alert v-else-if="results.length === 0 && noFurtherItems" variant="info" show>{{ $t('search.noFurtherItemsFound') }}</b-alert>
         <b-alert v-else-if="results.length === 0" variant="warning" show>{{ $t('search.noItemsFound') }}</b-alert>
         <template v-else>
-          <div id="search-map" v-if="itemCollection">
-            <MapView :stac="parent" :items="itemCollection" onfocusOnly popover />
+          <div id="search-map" v-if="resultCollection">
+            <MapView :stac="parent" :children="resultCollection" onfocusOnly popover />
           </div>
           <Catalogs
             v-if="isCollectionSearch" :catalogs="results" collectionsOnly
@@ -67,7 +67,7 @@ import Utils from '../utils';
 import SearchFilter from '../components/SearchFilter.vue';
 import Loading from '../components/Loading.vue';
 import ErrorAlert from '../components/ErrorAlert.vue';
-import { getDisplayTitle, createSTAC, ItemCollection } from '../models/stac';
+import { getDisplayTitle, createSTAC, CollectionCollection, ItemCollection } from '../models/stac';
 import { STAC } from 'stac-js';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { getErrorCode, getErrorMessage, processSTAC, stacRequest } from '../store/utils';
@@ -128,15 +128,20 @@ export default defineComponent({
     itemSearch() {
       return this.canSearchItems && this.parent && this.parent.getSearchLink();
     },
-    itemCollection() {
+    resultCollection() {
       if (this.isCollectionSearch) {
-        return null; // wait for stac-js to convert bboxes to geojson
+        return new CollectionCollection({
+          collections: this.results,
+          links: []
+        });
+      }
+      else {
+        return new ItemCollection({
+          type: 'FeatureCollection',
+          features: this.results,
+          links: []
+        });
       }
-      return new ItemCollection({
-        type: 'FeatureCollection',
-        features: this.results,
-        links: []
-      });
     },
     results() {
       if (Utils.size(this.data) === 0) {
@@ -307,6 +312,10 @@ export default defineComponent({
   }
 }
 
+#search-map {
+  margin-bottom: $block-margin;
+}
+
 #stac-browser .search {
   .selected-collections-action {
     position: fixed;