AnsweredAssumed Answered

Get coordinates of a moveable marker symbol

Question asked by Toolman101 on Dec 16, 2015
Latest reply on Dec 16, 2015 by processing...

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>

Attachments

Outcomes