mapbox/mapbox-gl-js

Marker needs more events such as "click"

Open

#7,793 opened on Jan 21, 2019

View on GitHub
 (28 comments) (19 reactions) (0 assignees)JavaScript (2,203 forks)batch import
api :memo:feature :green_apple:good first issue

Repository metrics

Stars
 (10,532 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Motivation

Marker has only three events "dragstart", "drag", "dragend". What if you want to get something from marker when it's cliked? You can use addEventListener on its element from getElement but the data from DOM Listener doesn't include what Marker object has. e.g. position of Marker, its draggability, etc.

So, it needs more event types including "click", "dblclick", "mouseenter", etc. Then we can get what we want when we need.

Design Alternatives

I'm not so sure about inner-logic how it implements for now. But I can guess, the whatever events are added into map's container. image

I tried to use preventDefault and stopPropagation but it does not work because it actually does not have a event on it.

  • Use case for needs of prevendDefault, stopPropagation thing
    1. There are two markers on map.
    2. Add event on each marker but second marker should not trigger map's event.

Mock-Up

The look should be like: marker.on(type, listener, stopPropagation); stopPropagation for prevent map's event.

Implementation

Following is the workaround:

// for map
map.on("click", function(e) {
  if (e.originalEvent.target !== marker.getElement()) {
    // it's map!
  }
});

// for marker
map.on("click", function(e) {
  if (e.originalEvent.target === marker.getElement()) {
    // it's marker!
  }
});

It seems good when we have only one marker, but if we have lots of markers, we can not use condition like:

if (e.originalEvent.target !== marker.getElement() &&
   e.originalEvent.target !== marker2.getElement() &&
  ... ) {

Sorry about mixing up with adding click event and needs of stopPropagation thing, I think it should be considered when the event things are implemented.

here is fiddle: https://jsfiddle.net/roqh9gjw/4/

Contributor guide