Get coordinates of a moveable marker symbol

NickFillo — Wed, 16 Dec 2015 08:13:53 GMT

Hello,

I'm new to using the ArcGIS javascript api. I have a map where the user can drag a simple marker symbol to some location. The symbol is initially loaded centered on a default set of coordinates. The user then drags the symbol to a new location. I need to find the new center coordinates (lat & lon) of the symbol once the user releases the mouse button (not the mapPoint where the cursor is located. This is not always the same as the center of the marker symbol). If anyone can point me in the right direction, I would greatly appreciate it. Code I have so far is below, including some of the stuff I was trying without success.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        "esri/toolbars/edit",
        "esri/geometry/webMercatorUtils",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/symbols/SimpleMarkerSymbol",

        "esri/Color",
        "esri/graphic",
        "dojo/dom",
        "dojo/domReady!"
      ], function(
        Map, Edit, webMercatorUtils, Point, SpatialReference, SimpleMarkerSymbol, Color, Graphic, dom
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-97.937, 39.487],
          zoom: 4 });

editToolbar = new Edit(map);

point = new Point(-97.937, 39.487, new SpatialReference({wkid:4326}));
markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(11).setColor([255,0,0,0.5]);
pointGraphic = new Graphic(point, markerSymbol);

        map.on("load", function()
{ map.graphics.on("graphic-add", function()
          { editToolbar.activate(Edit.MOVE, pointGraphic); });//activate edit toolbar on graphic load
    map.graphics.add(pointGraphic);

          //after map loads, connect to listen to mouse move & drag events
          map.graphics.on("mouse-up", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint); //cursor location
    //var mp = webMercatorUtils.webMercatorToGeographic(pointGraphic.location); //didn't work
    var symLat = point.getLatitude(); //doesn't change
          //display mouse coordinates
          dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3) + ", " + symLat;
        }
      });
    </script>
</head>
<body>
    <div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">
      <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>
    </div>
</body>
</html>

Re: Get coordinates of a moveable marker symbol

TyroneBiggums — Wed, 16 Dec 2015 12:35:50 GMT

I would use the editToolbar events. For this, probably graphic-move-stop would work well.

Try replacing your map.graphics.on with:

editToolbar.on('graphic-move-stop', function() { var x = pointGraphic.geometry.x; var y = pointGraphic.geometry.y; });

topic Get coordinates of a moveable marker symbol in ArcGIS JavaScript Maps SDK Questions

Get coordinates of a moveable marker symbol

Re: Get coordinates of a moveable marker symbol