Show x,y Coordinates in UTM

08-10-2016 01:38 PM
Occasional Contributor III

It seems this isn't possible using webMercatorUtils.project(), I'm just wondering if anyone has found a way to successfully convert a point to UTM? I'm trying to have the mouse coordinates show in UTM (NAD 83 Zone 10), but the following doesn't pass webMercatorUtils.canProject():

var utmSR = new SpatialReference(102410);

var Point = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);

        if (webMercatorUtils.canProject(utmPoint, utmSR)) {

            var utmPoint = webMercatorUtils.project(Point, utmSR);

            console.log(utmPoint.x.toFixed(3) + ", " + utmPoint.y.toFixed(3));


The API reference doesn't say anything about why something might not pass canProject()

A jsfiddle here

0 Kudos
7 Replies
MVP Esteemed Contributor


The WebMercatorUtils are only for converting webmercator to geographic and vice versa.

esri/geometry/webMercatorUtils | API Reference | ArcGIS API for JavaScript 3.17

Convert Web Mercator coordinates to geographic and vice versa.

Occasional Contributor III

Ah, thanks - my oversight!

0 Kudos
Frequent Contributor

This might be of some use to you. I'm using the USNG library to display USNG values for the cursor's current location in one of my apps. There's some reference to it also supporting UTM so you might be able to use it for your current issue.

Occasional Contributor III

Steve, that's very helpful thank you - we're looking to add MGRS conversion eventually as well.

Frequent Contributor

No problem! Conversion to UTM will be a little awkward but should be (relatively) easy. It looks like you need to go Lat/Long->MGRS->UTM.

FWIW, here's my code using that library:

        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);

          u = new USNG2();

          var theLatLong = [];

          theLatLong["lon"] = mp.x;

          theLatLong["lat"] = mp.y;

          var theUSNG = u.fromLonLat(theLatLong,5).toString();


          //display mouse coordinates

          dom.byId("lblCurCoords").innerHTML = "<span style=\"font-weight:bold;\">Lat/Long:</span> " + mp.y.toFixed(4) + ", " + mp.x.toFixed(4) + "<br/>" + "<span style=\"font-weight:bold;\">USNG:</span> " + theUSNG;



New Contributor

Hi everyone, 

I need to display the coordinates in UTM on a map like this: Intro to popups | ArcGIS API for JavaScript 4.10 

Here is the code:

view.popup.autoOpenEnabled = false;
view.on("click", function(event) {

// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;{
// Set the popup's title to the coordinates of the location
title: "Reverse geocode: [" + lon + ", " + lat + "]",
location: event.mapPoint // Set the location of the popup to the clicked location

// Display the popup
// Execute a reverse geocode using the clicked location
response) {
// If an address is successfully found, show it in the popup's content
view.popup.content = response.address;
}).catch(function(error) {
// If the promise fails and no result is found, show a generic message
view.popup.content =
"No address was found for this location";

Can anyone help me with that? Thank you.

0 Kudos
Esri Regular Contributor

In 3.x, you can use coordinateFormatter. This sample shows how it can be used.

In 4.x, you can use CoordinateConversion widget.

0 Kudos