Drag Graphics Point and Drop at New Location

ManishGohil · ‎04-18-2011

Hello All,
We have our application developed in .Net using WebADF Map controls.
I need help on how i can implement the "drag graphics point" functionality in our application that built using WebADF.Net controls.
I found that using dojo we can implement drag/drop but i am not able to use dojo with Map control of WebADF.
I also want to know what are the different approach/implementation for drag/drop graphics on Map?
Any help will be appreciated.

One similar post that never replied :
http://forums.esri.com/Thread.asp?c=158&f=2396&t=286884

Thanks
Lala Rabari

AshishRao · ‎02-11-2015

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ArcGIS Drag'n'drop sample</title>

<%-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" />

var map = null;

var pushpin = null;

var pushpin2 = null;

dojo.require("esri.map");

dojo.addOnLoad(function() {

dojo.style(dojo.byId("map"), { width: dojo.contentBox("map").w + "px", height: dojo.contentBox("map").h + "px" });

esriConfig.defaults.map.slider = { right: "10px", top: "10px", width: null, height: "100px" };

map = new esri.Map("map", { wrapAround180: true, nav: false });

// map = new esri.Map("map", {basemap: "topo", center: [71.55, 21.55], zoom: 5,sliderStyle: "small"});

// pushpins will be added after map layers is loaded

dojo.connect(map, "onLoad", function() {

var mapPoint = new esri.geometry.Point(-13042885, 4033247, new esri.SpatialReference({ wkid: 102100 }));

pushpin = new Pushpin(map, "http://static.arcgis.com/images/Symbols/Basic/AmberBeacon.png", 25, 25, mapPoint);

var mapPoint2 = new esri.geometry.Point(-13042885, 2033244, new esri.SpatialReference({ wkid: 102100 }));

pushpin2 = new Pushpin(map, "http://static.arcgis.com/images/Symbols/Basic/AmberBeacon.png", 25, 25, mapPoint2);

});

var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

map.addLayer(layer);

//var tmpPushpinCurretnLocation = pushpin2.GetCurrentLocation();

//pushpin.Dispose();

//pushpin2.Dispose();

});

</script>

</head>

</form>

</body>

</html>

DragAndDrop.js

// represents wrapper for graphic object to provide drag'n'drop ability

// map - instance of esri.Map

// graphic - instance of esri.Graphic

function DragableGraphic(map, graphic) {

this._map = map; // parent map

this._graphic = graphic; // moveable graphic object

this._currentLocation = graphic.geometry; // current location of graphic object

this._isInUse = false; // true if graphic object is in dragging

this._onMouseDownHandler = null; // pointer to onMouseDown event handler

this._onMouseUpHandler = null; // pointer to onMouseUp event handler

this._onMouseDragHandler = null; // pointer to onMouseDrag event handler

this._onMouseDragEndHandler = null; // pointer to onMouseDragEnd event handler

// initializes object

this._init = function () {

// bind to onMouseDown that fires when graphic object is clicked on

if (this._onMouseDownHandler == null)

dojo.connect(this._map.graphics, "onMouseOver",this, function (evt) {

if (evt.graphic === this._graphic) {

evt.graphic.getDojoShape().moveToFront();

}

}); //End onMouseOver //added

dojo.connect(this._map.graphics, "onMouseOut", this, function (evt) {

if (evt.graphic === this._graphic) {

evt.graphic.getDojoShape().moveToBack();

}

}); //End onMouseOut //added

this._onMouseDownHandler = dojo.connect(this._map.graphics, "onMouseDown", this, this.onMouseDown);

}

// releases resources used by object

this.Dispose = function() {

// disconnect from onMouseDown

if (this._onMouseDownHandler != null) {

dojo.disconnect(this._onMouseDownHandler);

this._onMouseDownHandler = null;

}

// if graphic object is in use, release it

if (this._isInUse) {

this._map.enableMapNavigation(); // enable default left button behavior

this.unbindDragNDropEvents(); // disconnect from drag'n'drop events

this._isInUse = false; // mark graphic object as not in use

}

// binds to drag'n'drop events

this.bindToDragNDropEvents = function() {

// bind to onMouseDrag that fires when graphic object is being dragged

if (this._onMouseDragHandler == null)

this._onMouseDragHandler = dojo.connect(this._map, "onMouseDrag", this, this.onMouseDrag);

// bind to onMouseDragEnd that fires when graphic object is dropped

if (this._onMouseUpHandler == null)

this._onMouseUpHandler = dojo.connect(this._map.graphics, "onMouseUp", this, this.onMouseUp);

}

// unbinds from drag'n'drop events

this.unbindDragNDropEvents = function() {

// disconnect from onMouseDrag

if (this._onMouseDragHandler != null) {

dojo.disconnect(this._onMouseDragHandler);

this._onMouseDragHandler = null;

}

// disconnect from onMouseUp

if (this._onMouseUpHandler != null) {

dojo.disconnect(this._onMouseUpHandler);

this._onMouseUpHandler = null;

}

// fires when graphic object is clicked on

this.onMouseDown = function (event) {

// if graphic object isn't in use yet, start using it

this._isInUse = false; //added

if (!this._isInUse) {

this._isInUse = true; // mark graphic object as in use

this._map.disableMapNavigation(); // prevent default left button behavior

if (event.graphic == this._graphic) { //added

this.bindToDragNDropEvents(); // connect to drag'n'drop events

}

if (event.button != 0) //old is 1 ,0 is added// ignore if clicked button is not a left one

return;

// ignore if clicked graphic object is not an object contained in the current DragableGraphic-object

if (event.graphic != this._graphic)

return;

}

// fires when graphic object is dropped

this.onMouseUp = function (event) {

// if graphic object is in use, release it

if (this._isInUse) {

this._currentLocation = event.mapPoint; // preserve end graphic object location

this._graphic.setGeometry(event.mapPoint); // move graphic object to the end location

this._map.enableMapNavigation(); // enable default left button behavior

if (event.graphic == this._graphic) { //added

this.unbindDragNDropEvents(); // disconnect from drag'n'drop events

}

this._isInUse = false; // mark graphic object as not in use

}

if (event.button != 0) //old is 1 ,0 is added// ignore if clicked button is not a left one

return;

// ignore if clicked graphic object is not an object contained in the current DragableGraphic-object

if (event.graphic != this._graphic)

return;

}

// fires when graphic object is being dragged

this.onMouseDrag = function(event) {

if (this._isInUse) {

this._currentLocation = event.mapPoint; // preserve a new graphic object location

this._graphic.setGeometry(event.mapPoint); // move graphic object to the new location

}

this._init(); // initialize object

}

// represents wrapper for DragableGraphic

// map - instance of esri.Map

// imgUrl - string-based image url

// height - image height in pixels

// height - image width in pixels

// mapPoint - instance of esri.geometry.Point

function Pushpin(map, imgUrl, height, width, mapPoint) {

this._map = map; // parent map

this._initialLocation = mapPoint; // initial location of pushpin

this._height = height; // pushpin image height

this._width = width; // pushpin image width

this._imgUrl = imgUrl; // pushpin image url

this._dragableGraphic = null; // reference to DragableGraphic object

// initializes object

this._init = function () {

// create PictureMarkerSymbol

var symbol = new esri.symbol.PictureMarkerSymbol(this._imgUrl, this._width, this._height);

// create graphic object based on symbol

var graphic = new esri.Graphic(this._initialLocation);

graphic.setSymbol(symbol);

// add graphic object to the map

this._map.graphics.add(graphic);

// create DragableGraphic object to provide drag'n'drop ability for graphic object

this._dragableGraphic = new DragableGraphic(this._map, graphic);

}

// releases resources used by object

this.Dispose = function() {

if (this._dragableGraphic != null) {

// remove graphic object from the map

this._map.graphics.remove(this._dragableGraphic._graphic);

// call Dispose of DragableGraphic

this._dragableGraphic.Dispose();

}

// returns the current location of Pushpin on the map

this.GetCurrentLocation = function() {

if (this._dragableGraphic != null)

return this._dragableGraphic._currentLocation;

else

return null;

}

this._init(); // initialize object

}

Joachim_EckboJuell · ‎07-09-2011

Hi Bjørn,

Yes, you're right. The "moveable" part disappear when the graphic leaves the visible area, and then enters again. That is probably because the API does some internal optimization(?) when graphics are not visible.

I tried to set the dojo shape moveable on "mouse over" on the graphics layer, and then remove the moveable stuff on "mouse out". But I was never able to remove the moveability of the shape (the only method I found was destroy, but that didn't seem to work). So the graphic just started moving x times faster than the mouse for each time I hovered the graphic.

So I ended up with a similar code as above, but with the graphic moving when the mouse moves. This is probably more CPU-heavy, and the code has some weeknesses (eg. if the mouse up event is never fired due to the mouse moving too fast). But its a starting point.

 dojo.connect(this._glStops, "onMouseDown", this, function (event) {
            this._moveableStop = event.graphic;
            this.map.disableMapNavigation();

            this._moveableStopLink = dojo.connect(this.map, "onMouseDrag", this, function (event) {
                this._moveableStop.setGeometry(event.mapPoint);
            });
        });

        dojo.connect(this._glStops, "onMouseUp", this, function (event) {
            this._moveableStop.setGeometry(event.mapPoint);
            this.map.enableMapNavigation();

            if (this._moveableStopLink) {
                dojo.disconnect(this._moveableStopLink);
                this._moveableStopLink = null;
            }
        });

Good luck with the travel planner.

Roman_Net_Follower · ‎07-15-2011

Hi, everyone!
In my project I've had to implement the drag'n'drop functionality for graphic object using ArcGIS JavaScript API. Probably it will be useful for somebody. It's shown in my blog here - http://dotnetfollower.com/wordpress/2011/07/arcgis-javascript-api-how-to-implement-dragndropping-of-...
Thanks!

JohnCorrea · ‎07-31-2012

Hey nice work on this example. There are some annoying discrepancies that can be easily fixed with an extra variable and a control statement. This will allow the user to go pack to panning after clicking and dragging while also not moving the point when they are off the graphic when actually attempting to pan.

At the top add

var clicked = false;

Then for the holdGraphic and releaseGraphic methods add

function holdGraphic(evt) {
    clicked = true;
    map.disablePan();
    graphic = evt.graphic;
    graphic.setSymbol(dragSymbol);
    }

function releaseGraphic(evt) {
    if (clicked == true) {
    graphic.geometry = evt.mapPoint;
    graphic.setSymbol(symbol);
    map.disablePan();


    /* code here is not relevant
    formPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint);
    document.getElementById("Longitude").value = Math.round(formPoint.x * 100000) / 100000;
    document.getElementById("Latitude").value = Math.round(formPoint.y * 100000) / 100000;
    * /
    }

clicked = false;
map.enablePan();

}

AdrianMarsden · ‎10-02-2012

Arrggh, I bookmarked this thread because the demo http://help.arcgis.com/en/webapi/javascript/arcgis/samples/graphics/graphics_extent_query.html mentioned earlier seemed useful, but that is now 404ing. Anyone know what has happened to it?

KenMorefield · ‎10-03-2012

Anyone know what has happened to it?

I believe the sample you are referring to is found here: SAMPLE

Ken

AdrianMarsden · ‎10-04-2012

That's it - Cheers.

Vermiedelos_reyes · ‎11-18-2012

Hi guys,

Glad to see this thread. Its very informative especially to newbies like me. Can you also help me with my problem? I need to create a Marker graphics with label on it. I understand that to be able to do these, I need to create two graphic object to be added to the map graphic layer. But my problem is i need to place several 'marker' graphics and its corresponding 'text' graphics inside the map. Can you please tell me how to work on this. I badly need your help.