ThinkGeo.com    |     Documentation    |     Premium Support

Question Regarding Draggable Markers

#1

I’m trying to implement something that I feel should be fairly straightforward and a relatively common usage scenario, yet I’m having some difficulty implementing it. My goal is to allow a user to drag Marker to a new position. After they drag the marker to a new position I want to prompt them if that is what they really wanted to do, and if not re-position the marker to where it originally was.  What would be the recommended means of doing this?



I’ve tried using the OnClientMarkerDraggedEvent and the OnClientClick events of the SimpleMarkerOverlay with no success and inconsistent results. The dragged event seems to fire whether the marker was dragged or not, and the OnClientClick event seems to only fire occasionally before dragged event.  Furthermore, the marker positions don’t seem to reset in the case where I pass in the original position to my controller.  They remain at the location where the user moved them.



The following is a rough mockup of the relevant portions of my code:

RecordPos is bound OnclientClick of my SimpleMarkerOverlay, while Dragged is bound to OnClientMarkerDraggedEvent of my SimpleMarkerOverlay.

JS Code:


var lastMarkerPosition;
 
function RecordPos(e) {
    lastMarkerPosition = { “postion”: e.worldXY.lat + “,” + e.worldXY.lon, “marker”: e.markerId, “overlay”: e.overlayId };   
}
 
function Dragged(e) {
   var param = { “postion”: e.worldXY.lat + “,” + e.worldXY.lon, “marker”: e.markerId, “overlay”: e.overlayId };
   var move = confirm(“Move Marker”);
   if (move) {
       Map1.ajaxCallAction(controller, ‘UpdateMarker’, param, AddRemoveMarkerCallback);
   }
   else {
      Map1.ajaxCallAction(controller, ‘UpdateMarker’, lastMarker, AddRemoveMarkerCallback);
   }
}
function AddRemoveMarkerCallback()
{
 /*Redraw layers here*/
}

And the relevant controller code:


[HttpPost]
[MapActionFilter]
public void UpdateMarker(Map map, GeoCollection<object> args)
{
    if(args != null)
    {
        string[] latlon = args[0].ToString().Split(’,’);
        string markerId = args[1].ToString();
        string overlayId = args[2].ToString();
        double lat = double.Parse(latlon[0]);
        double lon = double.Parse(latlon[1]);
 
        SimpleMarkerOverlay overlay = (SimpleMarkerOverlay)map.CustomOverlays[overlayId];
        Marker m = overlay.Markers[markerId];
 
        m.Position.X = lon;
        m.Position.Y = lat;
    }       
}






#2

Hi Michael,



I believe the below events are what you are looking for, and the “MarkerOverlay” is the key value for your simpleMarkerOverlay:


OnMapCreated = function (map) {
        var markerLayer = Map1.getLayer(“MarkerOverlay”);
        markerLayer.events.register(“dragstart”, markerLayer, function (e) {
            lastMarkerPosition = { “postion”: e.marker.lonlat.lat + “,” + e.marker.lonlat.lon, “marker”: e.marker.id, “overlay”: e.marker.parentId };
        });
        markerLayer.events.register(“dragging”, markerLayer, function (e) {
        });
        markerLayer.events.register(“dragend”, markerLayer, function (e) {
        });
    }

Any questions, don’t hesitate to let me know.

Thanks,

Troy

#3

Thanks, this was exactly what I needed.

#4

Hi Michael, 
  
 Good to hear it is fit for you. 
 Any other questions don’t hesitate to let us know. 
  
 Troy