From 239a86d63901b794d2d9a0ee039d910c7d0414b5 Mon Sep 17 00:00:00 2001
From: Anita Lipsky <7695311+purplebugs@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:39:21 +0100
Subject: [PATCH] fix: Newest open marker on top and above clusters (#51)

---
 src/alpaca-map.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/alpaca-map.js b/src/alpaca-map.js
index 0734eaa..a1b90ee 100644
--- a/src/alpaca-map.js
+++ b/src/alpaca-map.js
@@ -303,6 +303,8 @@ export default class AlpacaMap extends LitElement {
     this.map.mapTypes.set("styled_map", styledMapType);
     this.map.setMapTypeId("styled_map");
 
+    let zIndexMax = Number(10000000);
+
     const markers = this.farms.map((farm) => {
       const content = document.createElement("alpaca-map-marker");
       content.setAttribute("linkToFarmPage", this.linkToFarmPage);
@@ -333,6 +335,7 @@ export default class AlpacaMap extends LitElement {
         content,
         position: farm.location.lat_lng,
         title: farm?.name,
+        zIndex: zIndexMax,
       });
 
       // markers can only be keyboard focusable when they have click listeners
@@ -340,9 +343,12 @@ export default class AlpacaMap extends LitElement {
       // toggle marker summary/details when marker is clicked
       marker.addListener("click", () => {
         const highlighted = marker.content.getAttribute("highlight");
+        zIndexMax = Number(zIndexMax + 1);
+
         if (highlighted === "true") {
           marker.content.setAttribute("highlight", "false");
         } else {
+          marker.zIndex = Number(zIndexMax);
           marker.content.setAttribute("highlight", "true");
         }
       });