Merge pull request #246 from SkillsFundingAgency/FAI-2147-close-multi…

…ple-pins-map FAI-2147 close multiple pins map
SkillsFundingAgency · Feb 4, 2025 · afa3e6b · afa3e6b
2 parents 94cddf7 + 72a0f40
commit afa3e6b
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 29 deletions.
diff --git a/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss b/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss
@@ -122,12 +122,24 @@
   &.expanded {
     background: #000;
     border-radius: 50%;
-    height: 15px;
-    width: 15px;
-    margin-bottom: 12px;
+    height: 30px;
+    width: 30px;
+    margin-bottom: 5px;
+    position: relative;
     svg {
       display: none;
     }
+    &:before {
+      content: "";
+      height: 4px;
+      width: 18px;
+      background-color: #fff;
+      position: absolute;
+      top: 50%;
+      margin-top: -2px;
+      left: 6px;
+      z-index: 10;
+    }
   }
 }
 
@@ -141,16 +153,22 @@
 }
 
 .faa-map__marker-tail {
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100px;
-    height: 3px;
-    z-index: -1;
-    background: #000;
-    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,1) 12%, rgba(0,0,0,0) 100%);
-
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100px;
+  height: 3px;
+  z-index: -1;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 9%,
+    rgb(0, 0, 0) 10%,
+    rgb(0, 0, 0) 87%,
+    rgba(0, 0, 0, 0) 90%,
+    rgba(0, 0, 0, 0) 100%
+  );
 }
 
 a[href^="http://maps.google.com/maps"],

diff --git a/src/SFA.DAS.FAA.Web/package-lock.json b/src/SFA.DAS.FAA.Web/package-lock.json
diff --git a/src/SFA.DAS.FAA.Web/package.json b/src/SFA.DAS.FAA.Web/package.json
@@ -11,8 +11,8 @@
     "build": "sass --no-source-map --quiet-deps --style=compressed --load-path=node_modules/govuk-frontend/dist Frontend/scss/:wwwroot/css"
   },
   "dependencies": {
-    "govuk-frontend": "^5.7.1",
-    "sass": "^1.80.4",
+    "govuk-frontend": "^5.8.0",
+    "sass": "^1.83.1",
     "watch": "^1.0.2"
   }
 }
diff --git a/src/SFA.DAS.FAA.Web/wwwroot/js/site.js b/src/SFA.DAS.FAA.Web/wwwroot/js/site.js
@@ -975,6 +975,14 @@ FaaMap.prototype.handlePlusMarkerClick = function (
   group,
   mapRoleDetailsWrap
 ) {
+  if (markerElement.content.classList.contains("expanded")) {
+    group.forEach((role) => {
+      this.removeMarkersWithTitle(`VAC${role.job.id}`);
+    });
+    markerElement.content.classList.remove("expanded");
+    return;
+  }
+
   markerElement.content.classList.add("expanded");
   markerElement.zIndex = 1;
 
@@ -985,6 +993,7 @@ FaaMap.prototype.handlePlusMarkerClick = function (
     const y = Math.round(100 * Math.sin(a * (Math.PI / 180)));
     const Marker = new google.maps.marker.AdvancedMarkerElement({
       map: this.map,
+      title: `VAC${role.job.id}`,
       position: group[0].position,
       content: this.markerHtml(x, y, a),
     });
@@ -996,6 +1005,14 @@ FaaMap.prototype.handlePlusMarkerClick = function (
   });
 };
 
+FaaMap.prototype.removeMarkersWithTitle = function (title) {
+  for (let i = 0; i < this.map.markers.length; i++) {
+    if (this.map.markers[i].title === title) {
+      this.map.markers[i].setMap(null);
+    }
+  }
+};
+
 FaaMap.prototype.markerHtml = function (
   marginLeft = 0,
   marginTop = 0,