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">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create Map Display Mouse Coordinates</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map;
require([
"esri/map",
"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>
