fix: use L.DomUtil.create() instead of L.popup()

Author: Gugustinette

playground/pages/map/markercluster.client.vue

@@ -79,7 +79,11 @@ const onMapReady = async () => {
     markers: locations
   });
   // Access the markers
-  markers[3].bindPopup('Hello Pornic');
+  markers[3].bindPopup('<h1>Hello Pornic</h1><button type="button" style="background: black; color: white;">Click me</button>');
+  const popupDiv = markers[2].getPopup()?.getContent() as HTMLElement;
+  popupDiv.addEventListener('click', () => {
+    console.log("click")
+  });
   // Access the markerCluster
   markerCluster.on('clusterclick', (event: any) => {
     console.log('Cluster clicked', event);

src/runtime/composables/useLMarkerCluster.ts

@@ -40,7 +40,9 @@ export const useLMarkerCluster = async (props: Props) => {
 
     // If a popup is provided, bind it to the marker
     if (location.popup) {
-      marker.bindPopup(L.popup().setContent(location.popup))
+      const popup = L.DomUtil.create('div', 'popup')
+      popup.innerHTML = location.popup
+      marker.bindPopup(popup)
     }
 
     // Add the marker to the cluster