Feature/draggable markers

[ryanhamley]

Launch Checklist

• briefly describe the changes in this PR

• Adds drag functionality to markers either via a draggable option or a setDraggable method

• Adds dragstart, drag and dragend events on Marker

• Updates JSDocs

• Adds new drag-a-marker example (leaves drag-a-point example as is)

• Adds tests for dragging a marker

• Makes evented._addEventListener idempotent to avoid adding the same listener multiple times

• write tests for all new functionality

• document any changes to public APIs

• manually test the debug page

Closes #6102
Closes #3087
Closes #4597

[ryanhamley]

I am unsure about the final two tests in marker.test.js and would love some feedback on them. The idea was to have tests where we would create a marker, simulate a mouse/touch drag through the combination of mousedown, mousemove and mouseup events then compare the start and end positions to see that the marker was actually moved. The tests pass, but I'm not convinced that Marker with draggable:true moves to new position in response to a mouse-triggered drag is doing what I think it's doing. Setting clientX and clientY when creating a new mousemove event works, but is it actually moving the mouse around? AFAIK, it's not possible to move the mouse with Javascript due to a variety of security concerns. Is there a better way to write this test? Should it be included at all? Is this type of interaction really better suited for an integration test (which we don't have) than a unit test?

Note that I also deleted the equivalent TouchEvent test because TouchEvents don't have clientX and clientY properties or anything like them to set when creating the event.

[jfirebaugh]

The drag-simulation tests look fine. Yes, it's not actually moving the actual cursor on screen; it's sufficient just to provide the input events that should trigger the marker to move position.

[jfirebaugh]

Let's keep this example around; it's still useful to show how to implement draggability for symbol layers.

[jfirebaugh]

We'll need to either fix #4597 or check that this._draggable state is actually changing, so as not to register duplicate handlers if setDraggable(true) is called when the marker is already draggable.

[ryanhamley]

a5da36c addresses #4597 which would resolve this comment. Is that an acceptable solution? It definitely works.

[jfirebaugh]

Don't reference the private property here.

[jfirebaugh]

Rather than remove and re-add, make this an affirmative check for the current presence of listener, so that a redundant on doesn't change the relative order of listeners. E.g. given map.on('click', listenerA); map.on('click', listenerB); map.on('click', listenerA);, listenerA should be the first one called.

[jfirebaugh]

👌