Is it possible to change this sample that it will be show x,y coordinates in wkid:5514 ?

<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>
  var map;
    "esri/map", "esri/geometry/webMercatorUtils", "dojo/dom", 
  ], 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);


You can use the Geometry service project method to do this projection. Since it is an asynchronous call, it will not be as responsive as the example (which is being calculated in the browser). The core code to change is in showCoordinates:

Working example: https://jsfiddle.net/gavinr/f8e62ajc

Edit: John Gravois has a blog post explaining this exact problem and solution of doing the reproject in the browser using Proj4JS. This is a better solution since it will be fast and responsive because it is in doing everything in the browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.