show results for project map grouping when clicked

src/views/DiscoverView.vue

@@ -44,6 +44,7 @@
               isMappedActive = false;
               isRemoteActive = false;
               isSearchVisible = true;
+              tempSearchBox = null;
               searchLocal();
             "
             v-bind:class="computedLocalTabStyleClassNames()"
@@ -59,7 +60,6 @@
             -->
           </a>
         </li>
-        <!--
         <li>
           <a
             href="#"
@@ -69,13 +69,14 @@
               isMappedActive = true;
               isRemoteActive = false;
               isSearchVisible = false;
+              searchTerms = '';
+              tempSearchBox = null;
             "
             v-bind:class="computedMappedTabStyleClassNames()"
           >
             Mapped
           </a>
         </li>
-        -->
         <li>
           <a
             href="#"
@@ -85,6 +86,7 @@
               isMappedActive = false;
               isRemoteActive = true;
               isSearchVisible = true;
+              tempSearchBox = null;
               searchAll();
             "
             v-bind:class="computedRemoteTabStyleClassNames()"
@@ -115,7 +117,7 @@
       </div>
     </div>
 
-    <div v-if="isMappedActive">
+    <div v-if="isMappedActive && !tempSearchBox">
       <div class="mt-4 h-96 w-5/6 mx-auto">
         <l-map
           ref="projectMap"
@@ -250,6 +252,7 @@ export default class DiscoverView extends Vue {
   markers: { [key: string]: L.Marker } = {};
   remoteCount = -1;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  tempSearchBox: BoundingBox | null = null;
   zoomedSoDoNotMove = false;
 
   // make this function available to the Vue template
@@ -384,7 +387,11 @@ export default class DiscoverView extends Vue {
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
-    if (!this.searchBox) {
+    const searchBox =
+      (this.isMappedActive && this.tempSearchBox) ||
+      (this.isLocalActive && this.searchBox?.bbox);
+
+    if (!searchBox) {
       this.projects = [];
       return;
     }
@@ -399,10 +406,10 @@ export default class DiscoverView extends Vue {
 
     let queryParams = [
       claimContents,
-      "minLocLat=" + this.searchBox.bbox.minLat,
-      "maxLocLat=" + this.searchBox.bbox.maxLat,
-      "westLocLon=" + this.searchBox.bbox.westLong,
-      "eastLocLon=" + this.searchBox.bbox.eastLong,
+      "minLocLat=" + searchBox.minLat,
+      "maxLocLat=" + searchBox.maxLat,
+      "westLocLon=" + searchBox.westLong,
+      "eastLocLon=" + searchBox.eastLong,
     ].join("&");
 
     if (beforeId) {
@@ -483,7 +490,7 @@ export default class DiscoverView extends Vue {
       if (this.isLocalActive) {
         this.searchLocal(latestProject["rowid"]);
       } else if (this.isMappedActive) {
-        // don't do anything since mapped items only show a limited number
+        this.searchLocal(latestProject["rowid"]);
       } else if (this.isRemoteActive) {
         this.searchAll(latestProject["rowid"]);
       }
@@ -544,11 +551,21 @@ export default class DiscoverView extends Vue {
             });
             const marker = L.marker([pinLat, pinLon], { icon: numberIcon });
             marker.addTo(targetMap);
+            marker.on("click", () => {
+              this.tempSearchBox = {
+                minLat: tile.minFoundLat,
+                maxLat: tile.maxFoundLat,
+                westLong: tile.minFoundLon,
+                eastLong: tile.maxFoundLon,
+              };
+              this.searchLocal();
+            });
             this.markers[
               "" + tile.indexLat + "X" + tile.indexLon + "*" + tile.recordCount
             ] = marker;
           }
         }
+        await this.searchLocal();
       } else {
         throw {
           message: "Got an error loading projects on the map.",