user3032373 user3032373 - 6 months ago 79
Javascript Question

How to get marker drag event on dragging marker with mapbox LeafLet

I have created custom create Marker button and onClick of that i am adding marker on map.

I can drag that map but I am lot getting it's LatLng on dragging.
I want to get latlng on marker drag event.Below is my code for creating marker.

this.map.on('draw:created', function(e) {
e.layer.options.draggable = true;
this.drawnItems.addLayer(e.layer);
this.props.markerCoordinates(e.layer._latlng);
this.mapState = MAP_STATE.NONE;
mapSearch.searchByLocation(e.layer._latlng, this.getLocation);
this.setState({
drawActiveClass: 'polygonAction clearfix',
});
}.bind(this));

drawMarker: function() {
if(this.mapState === MAP_STATE.DRAW) {
return;
}
this.drawnItems.clearLayers();
this.mapState = MAP_STATE.DRAW;
this.drawHandler = new L.Draw.Marker(this.map,this.drawControl.options.draw.marker);
this.drawHandler.enable();
this.setState({
drawActiveClass: 'polygonAction clearfix active',
createMarkerErrorClass: 'hide'
});
}

render: function() {
<li className={this.state.drawActiveClass} ref="drawMarker" onClick={this.drawMarker}>
<span className="drawAction">{this.props.drawAction}</span>
</li>
}


On marker create I am making it draggable.
But how to add drag event for it.

Answer

I have just added dragend event listner inside created event.

  this.map.on('draw:created', function(e) {
        e.layer.options.draggable = true;
        e.layer.on('dragend',function(e) {
            mapSearch.searchByLocation(e.target.getLatLng(),this.getLocation);
        }.bind(this));
        this.drawnItems.addLayer(e.layer);
        this.props.markerCoordinates(e.layer._latlng);
        this.mapState = MAP_STATE.NONE;
        mapSearch.searchByLocation(e.layer._latlng, this.getLocation);
        this.setState({
            drawActiveClass: 'polygonAction clearfix',
        });
    }.bind(this));