Add "draggable" property to "Marker" class

[mb12]

mapbox-gl-js version:Master

Steps to Trigger Behavior

It would be really nice if there were a draggable property on ui/marker.js. Would make it easy porting over web apps reliant on G Maps. Adding a geojson source and using setData every time a move event is emitted for modeling dragging is unacceptably slow. It looks like Geojsonsources aren't able to handle data that changes as frequently as the mouse move event.

Markers that are regular html divs would likely be more performant (for a small number of them) since they can just translate the position themselves upon dragging.

Here is the specific property I am referring to.

https://developers.google.com/maps/documentation/javascript/markers#draggable

Expected Behavior

Actual Behavior

[keyofj]

This is an extremely important feature for us to convert from Google as our users readjust markers frequently.

[peterqliu]

we have an example illustrating how to do this, but it would indeed be nice to just bundle this into a draggable parameter when instantiating the marker.

[keyofj]

Thanks Peter. I saw an example that used d3.js to manage the drag and drop. In our application we are already using Kendo UI so I decided to use that and appears to work fine. Still would be nice to have this native on the marker class though. Michael

…

________________________________ From: Peter Liu <[email protected]> Sent: Wednesday, April 5, 2017 4:03 PM To: mapbox/mapbox-gl-js Cc: keyofj; Comment Subject: Re: [mapbox/mapbox-gl-js] Add "draggable" property to "Marker" class (#3087) we have an example illustrating how to do this<https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/>, but it would indeed be nice to just bundle this into a draggable parameter when instantiating the marker. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#3087 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AHoyQFKMGAzFKn52zVfTCQeRCTkjiPDFks5rs_OEgaJpZM4Ju9_W>.

[bartcorremans]

To improve performance of the current (non-marker) implementation for sources/layers with a lot of data we use a custom solution that goes like this:

• On drag start, create a new temporary source, and copy the dragged feature to this source
• Create a new temporary layer, using this temporary source, that looks just like the original layer
• Apply a filter to the original layer to hide the feature being dragged in that layer (this requires the feature to have a usable identifier)
• On mouse move, call setData() on the temporary source instead of the original one. This is much faster, because the source/layer only has a single feature.
• On drag end, update the original source, remove the filter from the original layer, and destroy (or hide) the temporary source/layer.

Of course this adds a fair bit of complexity and we've not managed to account for some edge cases. The majority of the time a "draggable marker" alternative would be more than sufficient.

[EgaK]

How about it like this?
It was made with only HTML 5 standard D&D.

https://codepen.io/egak/pen/ZogMKo

[ryanhamley]

Hi @EgaK Thanks for the demo! It works well and if that meets your needs, definitely feel free to use it. Draggable markers of the Marker class will be included in the next release of GL-JS and are currently in the master branch if you absolutely need them right now.

[EgaK]

@ryanhamley
Thank you for the reply.
I tried to use draggable marker of master branch.
I have thought that it was not in the standard function, so I am glad that it already exists.
Standard features are better at all, so I use this.

[hduchesn]

How to enable the Draggable capability of Marker with the latest release (0.45.0) ? is draggable an option of the Marker or a function to call? do you have a cope snippet ?

[ryanhamley]

Hi @hduchesn Draggable markers were added after 0.45.0 was released so they are not available in that version. If you would like to use them now, you can target the master branch of GL-JS. Otherwise, they will be available in the next release.

The next release includes a draggable marker example, but they can be implemented with a simple option to the Marker constructor.

var marker = new mapboxgl.Marker({
    draggable: true
});

[rivka-ungar]

Hi, I updated my mapbox version to 0.48.0 and am using the setDraggable on a marker. The issue is that once I add setDraggable and I bind the drag event to it the event doesn't work. how can I listen to the dragging of the marker and get its new coordinate? thanks

[ryanhamley]

You can use the dragend event to get a marker's new coordinates as seen in this example.

[rivka-ungar]

Thanks for the quick reply, it is working now!

[rivka-ungar]

The draggable marker is working. However I am saving the new coordinates to the server after every drag, and sometimes while trying to drag get errors:

mapbox-gl.js:33 Uncaught TypeError: Cannot read property 'unproject' of undefined
at EventedMarker.n._onMove (mapbox-gl.js:33)
at o.O.fire (mapbox-gl.js:29)
at HTMLDivElement. (mapbox-gl.js:33)

mapbox-gl.js:29 Uncaught TypeError: Cannot read property 'x' of null
at o._sub (mapbox-gl.js:29)
at o.sub (mapbox-gl.js:29)
at EventedMarker.n._onMove (mapbox-gl.js:33)
at o.O.fire (mapbox-gl.js:29)
at HTMLDivElement. (mapbox-gl.js:33)

And then the marker becomes un-draggable.

[ryanhamley]

@Rebeccau is there a consistent way to reproduce this? a particular action or sequence of actions that causes it? it sounds like a possible race condition

[hmendezm]

Hi Guys,

is there a way to have mousemove and mouseleave event in the maker with draggable = true as we do with dragend and dragStart?

this.marker = new mapboxgl.Marker({ element: markerdiv, draggable: true })
.setLngLat(coords)
// .setPopup(popup) // sets a popup on this marker
.addTo(this._map);
this.marker.on('dragend', this.onDragEnd);
this.marker.on('dragstart', this.onDragStart);
Best
Hmendezm