diff --git a/docs_source/api/marker.md b/docs_source/api/marker.md index 8de93431..89a7213e 100644 --- a/docs_source/api/marker.md +++ b/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` + +- **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` + +- **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` + +- **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 diff --git a/src/components/UI/Marker.vue b/src/components/UI/Marker.vue index 6c78af63..0c22690c 100644 --- a/src/components/UI/Marker.vue +++ b/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,7 +116,7 @@ export default { methods: { $_addMarker() { this.marker.setLngLat(this.coordinates).addTo(this.map); - + this.$_bindMarkerDOMEvents(); this.$_emitEvent("added", { marker: this.marker }); }, @@ -118,6 +124,16 @@ export default { 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");