From ef476e7e72c7b30767fe3a21a722ee1bcff7a06d Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 17 Aug 2023 15:53:45 +0200
Subject: [PATCH] fix(gis): improve polygon-styling mouse positioning and event
 listner

---
 examples/gis/polygon-styling.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/gis/polygon-styling.html b/examples/gis/polygon-styling.html
index f36cbbe..4a6195f 100644
--- a/examples/gis/polygon-styling.html
+++ b/examples/gis/polygon-styling.html
@@ -43,10 +43,12 @@
         background: none;
         border: none;
         box-shadow: none;
+        pointer-events: none;
       }
 
       .maplibregl-popup .maplibregl-popup-tip {
         border: none;
+        pointer-events: none;
       }
     </style>
   </head>
@@ -129,7 +131,7 @@
         const getColor = (sunshine) =>
           SUNSHINE_COLORS.reduce((acc, elt, idx) => (idx % 2 && sunshine > elt && SUNSHINE_COLORS[idx + 1]) || acc);
 
-        const popup = new maplibregl.Popup({ closeButton: false, closeOnMove: true, anchor: "bottom" });
+        const popup = new maplibregl.Popup({ closeButton: false, closeOnMove: false, anchor: "bottom" });
 
         map.once("load", (e) => {
           let color = ["step", ["get", "sunshine"], ...SUNSHINE_COLORS];
@@ -180,10 +182,9 @@
             const { sunshine, nom } = features[0].properties;
 
             popup
-              .trackPointer()
               .setHTML(
                 `<svg viewBox="0 0 320 50" height="75"
-  style="position: absolute; bottom: -6px; left: 2px;">
+  style="position: absolute; bottom: -6px; left: 2px; pointer-events: none;">
   <defs>
     <filter x="0" y="0" width="1.05" height="1.05" id="solid">
       <feFlood flood-color="hsla(0,0%,100%,.75)" result="bg" />
@@ -202,6 +203,7 @@
   </g>
 </svg>`,
               )
+              .setLngLat(e.lngLat)
               .addTo(map);
           });