load the projects on the map on initial load

src/views/DiscoverView.vue

@@ -118,9 +118,10 @@
     <div v-if="isMappedActive">
       <div class="mt-4 h-96 w-5/6 mx-auto">
         <l-map
-          ref="map"
+          ref="projectMap"
           :center="[localCenterLat, localCenterLong]"
           :zoom="2"
+          @ready="onMapReady"
           @moveend="onMoveEnd"
           @zoomend="onZoomEnd"
           @zoomstart="onZoomStart"
@@ -147,7 +148,9 @@
           <span v-if="searchBox"> None found in the selected area. </span>
           <!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. -->
         </span>
-        <span v-else-if="isRemoteActive">No projects were found with that search.</span>
+        <span v-else-if="isRemoteActive"
+          >No projects were found with that search.</span
+        >
       </p>
     </div>
 
@@ -190,14 +193,9 @@
 
 <script lang="ts">
 import "leaflet/dist/leaflet.css";
-import { Map } from "leaflet";
 import * as L from "leaflet";
 import { Component, Vue } from "vue-facing-decorator";
-import {
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
-  LMap,
-  LTileLayer,
-  LMarker,
-} from "@vue-leaflet/vue-leaflet";
 import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
@@ -206,12 +204,20 @@ import ProjectIcon from "@/components/ProjectIcon.vue";
 import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
-import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
+import {
+  didInfo,
+  errorStringForLog,
+  getHeaders,
+  PlanData,
+} from "@/libs/endorserServer";
 import { OnboardPage, retrieveAccountDids } from "@/libs/util";
-import { LocationEvent } from "leaflet";
 
 @Component({
   components: {
@@ -484,51 +490,89 @@ export default class DiscoverView extends Vue {
     }
   }
 
-  async onMoveEnd(event: LocationEvent) {
+  async onMapReady(map: L.Map) {
+    this.requestTiles(map);
+  }
+
+  // Tried but failed to use other vue-leaflet methods update:zoom and update:bounds
+  // To access the from this.$refs, use this.$refs.projectMap.mapObject
+
+  async onMoveEnd(event: L.LocationEvent) {
     if (this.zoomedSoDoNotMove) {
+      // since a zoom triggers a moveend, too, don't duplicate a tile request
       this.zoomedSoDoNotMove = false;
     } else {
       // not part of a zoom so request tiles
-      await this.requestTiles(event);
+      await this.requestTiles(event.target);
     }
   }
 
-  async onZoomEnd(event: LocationEvent) {
+  async onZoomEnd(event: L.LocationEvent) {
-    await this.requestTiles(event);
+    await this.requestTiles(event.target);
   }
 
-  onZoomStart(event: LocationEvent) {
+  onZoomStart(/* event: L.LocationEvent */) {
     this.zoomedSoDoNotMove = true;
   }
 
-  async requestTiles(event: LocationEvent) {
+  async requestTiles(targetMap: L.Map) {
-    const bounds = event.target.getBounds();
+    try {
-    const queryParams = [
+      const bounds = targetMap.getBounds();
-      "minLocLat=" + bounds?.getSouthWest().lat,
+      const queryParams = [
-      "maxLocLat=" + bounds?.getNorthEast().lat,
+        "minLocLat=" + bounds?.getSouthWest().lat,
-      "westLocLon=" + bounds?.getSouthWest().lng,
+        "maxLocLat=" + bounds?.getNorthEast().lat,
-      "eastLocLon=" + bounds?.getNorthEast().lng,
+        "westLocLon=" + bounds?.getSouthWest().lng,
-    ].join("&");
+        "eastLocLon=" + bounds?.getNorthEast().lng,
-    const response = await fetch(this.apiServer + "/api/v2/report/planCountsByBBox?" + queryParams);
+      ].join("&");
-    if (response.status === 200) {
+      const response = await fetch(
-      const results = await response.json();
+        this.apiServer + "/api/v2/report/planCountsByBBox?" + queryParams,
-      if (results.data?.tiles?.length > 0) {
+      );
-        Object.values(this.markers).forEach(marker => marker.remove());
+      if (response.status === 200) {
-        this.markers = {};
+        const results = await response.json();
-        for (const tile of results.data.tiles) {
+        if (results.data?.tiles?.length > 0) {
-          const pinLat = (tile.minFoundLat + tile.maxFoundLat) / 2;
+          Object.values(this.markers).forEach((marker) => marker.remove());
-          const pinLon = (tile.minFoundLon + tile.maxFoundLon) / 2;
+          this.markers = {};
-          const numberIcon = L.divIcon({
+          for (const tile of results.data.tiles) {
-            className: "numbered-marker",
+            const pinLat = (tile.minFoundLat + tile.maxFoundLat) / 2;
-            html: `<strong>${tile.recordCount}</strong>`,
+            const pinLon = (tile.minFoundLon + tile.maxFoundLon) / 2;
-            iconSize: [24, 24],
+            const numberIcon = L.divIcon({
-            iconAnchor: [12, 12], // coordinates of the tip of the icon relative to the top-left corner of the icon
+              className: "numbered-marker",
-          });
+              html: `<strong>${tile.recordCount}</strong>`,
-          const marker = L.marker([pinLat, pinLon], { icon: numberIcon });
+              iconSize: [24, 24],
-          marker.addTo(event.target);
+              // Why isn't this showing?
-          this.markers["" + tile.indexLat + "x" + tile.indexLon] = marker;
+              iconAnchor: [12, 12], // coordinates of the tip of the icon relative to the top-left corner of the icon
+            });
+            const marker = L.marker([pinLat, pinLon], { icon: numberIcon });
+            marker.addTo(targetMap);
+            this.markers[
+              "" + tile.indexLat + "X" + tile.indexLon + "*" + tile.recordCount
+            ] = marker;
+          }
         }
+      } else {
+        throw {
+          message: "Got an error loading projects on the map.",
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            url: response.url,
+          },
+        };
       }
+    } catch (e) {
+      logConsoleAndDb(
+        "Error loading projects on the map: " + errorStringForLog(e),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Map Error",
+          text: "There was a problem loading projects on the map.",
+        },
+        3000,
+      );
     }
   }