fix(gis): improve polygon-styling mouse positioning and event listner

jawg · Aug 17, 2023 · ef476e7 · ef476e7
1 parent 5f49193
commit ef476e7
Showing 1 changed file with 5 additions and 3 deletions.
diff --git 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);
           });