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

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">
-      Individual Profile
-    </h1>
+    <!-- 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">