mapbox / mapbox/mapbox-gl-js

Marker needs more events such as "click"

Open
#7,793 28 comments 19 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

api :memo: feature :green_apple: good first issue
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing Marker’s existing dragstart, drag, and dragend handling alongside the map.on and getElement entry points described here; no source file or test is named. Define the supported event list and propagation behavior, then verify click and related marker events, marker data, and stopPropagation against the stated use cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.