Marker DOM events implementation

docs_source/api/marker.md

@@ -75,14 +75,62 @@
 ### `@drag`
 
 - **Description:** Fires when marker dragged if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
 
 ### `@dragstart`
 
 - **Description:** Fires when marker dragging starts if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
 
 ### `@dragend`
 
 - **Description:** Fires when marker dragging ends if marker `draggable` prop is `true`
-- **Payload** `{ component: MarkerComponent, map: Map, MapEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+- **Payload** `{ component: MarkerComponent, map: Map, mapboxEvent: Event }` Object with `Marker` component, parent map and original MapboxGl event
+
+### `@click` <Badge text="experimental" type="warn"/>
+
+- **Description:** Fires marker is clicked.
+- **Payload**
+
+```
+    {
+        component: MarkerComponent,
+        map: Map,
+        mapboxEvent: DOMEvent,
+        marker: Marker
+    }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event
+
+### `@mouseenter` <Badge text="experimental" type="warn"/>
+
+- **Description:** Fires when mouse cursor enters marker area.
+- **Payload**
+
+```
+    {
+        component: MarkerComponent,
+        map: Map,
+        mapboxEvent: DOMEvent,
+        marker: Marker
+    }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event
+
+### `@mouseleave` <Badge text="experimental" type="warn"/>
+
+- **Description:** Fires when mouse cursor leaves marker area.
+- **Payload**
+
+```
+    {
+        component: MarkerComponent,
+        map: Map,
+        mapboxEvent: DOMEvent,
+        marker: Marker
+    }
+```
+
+Object with `Marker` component, parent map and original MapboxGl event

src/components/UI/Marker.vue

@@ -17,6 +17,12 @@ const markerEvents = {
   dragend: "dragend"
 };
 
+const markerDOMEvents = {
+  click: "click",
+  mouseenter: "mouseenter",
+  mouseleave: "mouseleave"
+};
+
 export default {
   name: "MapMarker",
   mixins: [withEvents, withSelfEvents],
@@ -110,14 +116,24 @@ export default {
   methods: {
     $_addMarker() {
       this.marker.setLngLat(this.coordinates).addTo(this.map);
-
+      this.$_bindMarkerDOMEvents();
       this.$_emitEvent("added", { marker: this.marker });
     },
 
     $_emitSelfEvent(event) {
       this.$_emitMapEvent(event, { marker: this.marker });
     },
 
+    $_bindMarkerDOMEvents() {
+      Object.keys(this.$listeners).forEach(key => {
+        if (Object.values(markerDOMEvents).includes(key)) {
+          this.marker._element.addEventListener(key, event => {
+            this.$_emitSelfEvent(event);
+          });
+        }
+      });
+    },
+
     remove() {
       this.marker.remove();
       this.$_emitEvent("removed");