Hide Table of Contents
View Show x,y coordinates sample in sandbox
Show x,y coordinates

Description

This sample reports the coordinates of the mouse pointer as the user hovers or drags the mouse across the map. This is made possible by event listeners that update the the x and y coordinates whenever the mouse moves.

The following line creates the map:

var map = new esri.Map("map");

"Map" appears three times in the above line. The first (var map) is the name of the object, the second (esri.Map) is the name of the class, and the third ("map") is the name of the div which will contain the map.

This sample adds an ArcGISTiledMapServiceLayer to the map, representing a cached ArcGIS Server map service, but you could also use an ArcGISDynamicMapServiceLayer. The way that you retrieve the coordinates is the same.

Notice that the constructor for the tiled map service layer requires the URL of the service's REST endpoint (http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer). You can use the Services Directory to find out the URLs for your map services.

These two lines add event listeners to the map. One listens for onMouseMove and the other listens for onMouseDrag, but they both call the function showCoordinates:

dojo.connect(map, "onMouseMove", showCoordinates);
dojo
.connect(map, "onMouseDrag", showCoordinates);

These events both pass map point coordinates to the showCoordinates function. Since the map data is in Web Mercator the resulting coordinates will display in Web Mercator. To display the coordinates in geographic, use the esri.geometry.webMercatorToGeographic utility object to perform the conversion. Following is how the function gets the coordinates and writes them to the "info" tag:

var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
dojo
.byId("info").innerHTML = mp.x + ", " + mp.y;

Code

<!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.22/esri/css/esri.css">
    
    <script src="https://js.arcgis.com/3.22/"></script>
    <script> 
      var map;
      require([
        "esri/map", "esri/geometry/webMercatorUtils", "dojo/dom", 
        "dojo/domReady!"
      ], function(
        Map, webMercatorUtils, dom
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-47.109, 14.945],
          zoom: 2
        });
        map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move", showCoordinates);
          map.on("mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
        }
      });
    </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>