Support click event on marker instance (#167)

* support click handlers on markers * log map click * force popup on click
radarlabs · Jun 3, 2024 · 97867c5 · 97867c5
1 parent d26931f
commit 97867c5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/demo/views/add-a-marker.hbs b/demo/views/add-a-marker.hbs
@@ -47,6 +47,10 @@
                 .setLngLat([lng, lat])
                 .addTo(map);
 
+              marker.on('click', (e) => {
+                console.log('MARKER CLICK', e);
+              });
+
               // use custom marker from URL
               $('#imageUrl').on('change', (e) => {
                 const url = e.target.value;
@@ -60,9 +64,17 @@
                 })
                   .setLngLat([lng, lat])
                   .addTo(map);
+
+                marker.on('click', (e) => {
+                  console.log('MARKER CLICK', e);
+                });
               });
             });
 
+            map.on('click', (e) => {
+              console.log('MAP CLICK', e);
+            });
+
             map.on('error', (err) => {
               console.error(err);
               $('#error-alert').show();

diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts
@@ -29,6 +29,7 @@ const createImageElement = (options: RadarMarkerImage) => {
   }
   return element;
 }
+
 class RadarMarker extends maplibregl.Marker {
   _map!: RadarMap;
   _image?: RadarMarkerImage;
@@ -105,7 +106,7 @@ class RadarMarker extends maplibregl.Marker {
 
     // set popup text or HTML
     if (markerOptions.popup) {
-      const popup = new maplibregl.Popup(markerOptions.popup)
+      const popup = new maplibregl.Popup(markerOptions.popup);
 
       if (markerOptions.popup.text) {
         popup.setText(markerOptions.popup.text);
@@ -116,6 +117,18 @@ class RadarMarker extends maplibregl.Marker {
 
       this.setPopup(popup);
     }
+
+    // pass-through click event from element to marker
+    const element = this.getElement();
+    if (element) {
+      element.addEventListener('click', (e) => {
+        e.stopPropagation(); // stop propagation to map
+        if (this._popup) {
+          this.togglePopup();
+        }
+        this.fire('click', e);
+      });
+    }
   }
 
   addTo(map: RadarMap) {