fix the marker storage & clearing logic, and add the second profile map when used

src/libs/partnerServer.ts

@@ -2,6 +2,8 @@ export interface UserProfile {
   description: string;
   locLat?: number;
   locLon?: number;
+  locLat2?: number;
+  locLon2?: number;
   issuerDid: string;
   rowId?: string; // set on profile retrieved from server
 }

src/views/DIDView.vue

@@ -6,7 +6,7 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <button
           @click="$router.go(-1)"

src/views/DiscoverView.vue

@@ -459,18 +459,7 @@ export default class DiscoverView extends Vue {
         this.userProfiles = [];
         const plans: PlanData[] = results.data;
         if (plans) {
-          for (const plan of plans) {
+          this.projects.push(...plans);
-            const { name, description, handleId, image, issuerDid, rowId } =
-              plan;
-            this.projects.push({
-              name,
-              description,
-              handleId,
-              image,
-              issuerDid,
-              rowId,
-            });
-          }
           this.remoteCount = this.projects.length;
         } else {
           throw JSON.stringify(results);
@@ -562,22 +551,9 @@ export default class DiscoverView extends Vue {
 
       if (this.isProjectsActive) {
         this.userProfiles = [];
-        if (results.data) {
-          if (beforeId) {
         const plans: PlanData[] = results.data;
-            for (const plan of plans) {
+        if (plans) {
-              const { name, description, handleId, issuerDid, rowId } = plan;
+          this.projects.push(...plans);
-              this.projects.push({
-                name,
-                description,
-                handleId,
-                issuerDid,
-                rowId,
-              });
-            }
-          } else {
-            this.projects = results.data;
-          }
           this.localCount = this.projects.length;
         } else {
           throw JSON.stringify(results);
@@ -626,7 +602,7 @@ export default class DiscoverView extends Vue {
         } else if (this.isAnywhereActive) {
           this.searchAll(latestProject.rowId);
         }
-      } else if (!this.isProjectsActive && this.userProfiles.length > 0) {
+      } else if (this.isPeopleActive && this.userProfiles.length > 0) {
         const latestProfile = this.userProfiles[this.userProfiles.length - 1];
         if (this.isLocalActive || this.isMappedActive) {
           this.searchLocal(latestProfile.rowId || "");
@@ -637,6 +613,11 @@ export default class DiscoverView extends Vue {
     }
   }
 
+  clearMarkers() {
+    Object.values(this.markers).forEach((marker) => marker.remove());
+    this.markers = {};
+  }
+
   async onMapReady(map: L.Map) {
     // doing this here instead of the l-map element avoids a recentering after the first drag
     map.setView([this.localCenterLat, this.localCenterLong], 2);
@@ -662,8 +643,7 @@ export default class DiscoverView extends Vue {
 
   onZoomStart(/* event: L.LocationEvent */) {
     // remove markers because otherwise they jump around at zoom end
-    Object.values(this.markers).forEach((marker) => marker.remove());
+    this.clearMarkers();
-    this.markers = {};
 
     this.zoomedSoDoNotMove = true;
   }
@@ -686,8 +666,7 @@ export default class DiscoverView extends Vue {
         : this.partnerApiServer + "/api/partner/userProfileCountsByBBox";
       const response = await fetch(endpoint + "?" + queryParams);
       if (response.status === 200) {
-        Object.values(this.markers).forEach((marker) => marker.remove());
+        this.clearMarkers();
-        this.markers = {};
         const results = await response.json();
         if (results.data?.tiles?.length > 0) {
           for (const tile: Tile of results.data.tiles) {
@@ -711,10 +690,22 @@ export default class DiscoverView extends Vue {
               };
               this.searchLocal();
             });
-            this.markers["" + tile.indexLat + "X" + tile.indexLon] = marker;
+            this.markers[
+              "" +
+                tile.indexLat +
+                "X" +
+                tile.indexLon +
+                "_" +
+                tile.minFoundLat +
+                "X" +
+                tile.minFoundLon +
+                "-" +
+                tile.maxFoundLat +
+                "X" +
+                tile.maxFoundLon
+            ] = marker;
           }
         }
-        await this.searchLocal();
       } else {
         throw {
           message: "Got an error loading projects on the map.",

src/views/UserProfileView.vue

@@ -4,9 +4,19 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </button>
         Individual Profile
       </h1>
+    </div>
 
     <!-- Loading Animation -->
     <div
@@ -28,7 +38,7 @@
         </p>
       </div>
 
-      <!-- Map -->
+      <!-- Map for first coordinates -->
       <div v-if="profile?.locLat && profile?.locLon" class="mt-4">
         <h2 class="text-lg font-semibold">Location</h2>
         <div class="h-96 mt-2 w-full">
@@ -50,6 +60,29 @@
           </l-map>
         </div>
       </div>
+
+      <!-- Map for second coordinates -->
+      <div v-if="profile?.locLat2 && profile?.locLon2" class="mt-4">
+        <h2 class="text-lg font-semibold">Second Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat2, profile.locLon2]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat2, profile.locLon2]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</l-popup>
+            </l-marker>
+          </l-map>
+        </div>
+      </div>
     </div>
 
     <div v-else class="text-center mt-8">