topic Mouse click to get Map Point (or X/Y) in ArcGIS JavaScript Maps SDK Questions

Mouse click to get Map Point (or X/Y)

ShaningYu — Tue, 01 Nov 2016 11:14:01 GMT

I try to get a piece of code sample for obtaining X/Y though a mouse-click. Appreciate if you can share yours.

Re: Mouse click to get Map Point (or X/Y)

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:32:12 GMT

Shaning,

Here is a sample for that:

<!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>Get Map Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, Color, dom
      ) {


        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });


        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );

        //when the map is clicked create a buffer around the click point of the specified distance.
        map.on("click", function(evt){
          map.graphics.clear();
          map.graphics.add(new Graphic(evt.mapPoint, symbol));
          map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
          map.infoWindow.show(evt.mapPoint)
        });

      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to get the coordinates.</span>
    <div id="mapDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Mouse click to get Map Point (or X/Y)

ShaningYu — Tue, 01 Nov 2016 14:35:14 GMT

Robert: Thanks a lot.

Re: Mouse click to get Map Point (or X/Y)

LloydBronn — Thu, 05 Jan 2017 17:19:06 GMT

Robert,

Could you provide an example of how these x y coordinate strings could be used as inputs for a geoprocessing tool? I'm trying to create a tool that takes xy inputs and kicks off a Python script that creates a chart from raster and/or database data.

Thanks!

Re: Mouse click to get Map Point (or X/Y)

RobertScheitlin__GISP — Thu, 05 Jan 2017 17:27:04 GMT

Lloyd,

Sorry I do not have an example for that or work with GPs much at all.

Re: Mouse click to get Map Point (or X/Y)

LloydBronn — Thu, 05 Jan 2017 17:36:20 GMT

OK, thanks.

Re: Mouse click to get Map Point (or X/Y)

LloydBronn — Sat, 11 Dec 2021 22:32:14 GMT

I just altered this example to convert web Mercator (x,y) to lat/lon coordinates using webMercatorUtils:

<!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>Get Map Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/geometry/webMercatorUtils",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, webMercatorUtils,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, Color, dom
      ) {


        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });


        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );

        //when the map is clicked create a buffer around the click point of the specified distance. 
        map.on("click", function(evt){
            var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          map.graphics.clear();
          map.graphics.add(new Graphic(evt.mapPoint, symbol));
          map.infoWindow.setContent("Longitude: " + mp.x.toString() + ", <br>Latitude: " + mp.y.toString());
          map.infoWindow.show(evt.mapPoint)
        });

      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to get the coordinates.</span>
    <div id="mapDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Mouse click to get Map Point (or X/Y)

MichaelAugust — Thu, 05 Jan 2017 18:12:23 GMT

Do you guys have any suggestions on how I could modify this page to include elevation(z) inside that popup derived from the Terrain Layer service? Essentially I'm trying to make that x/y, lat/long popup, except with an elevation from the best source possible, I was thinking the terrain service, but if there's another good elevation source (open source, etc.) that would work in this context I'd love to hear about it - thanks in advance for any ideas!

Re: Mouse click to get Map Point (or X/Y)

RobertScheitlin__GISP — Fri, 06 Jan 2017 01:30:55 GMT

Michael,

I would likely use an ImageServiceIdentifyTask for that:

ImageServiceIdentifyTask | API Reference | ArcGIS API for JavaScript 3.19

and once that deferred is return then show the popup with the xy and z.

Re: Mouse click to get Map Point (or X/Y)

MichaelAugust — Fri, 06 Jan 2017 17:41:04 GMT

Great idea, thanks Robert I will check that out!

Re: Mouse click to get Map Point (or X/Y)

ManjariGoyal — Tue, 09 May 2017 20:45:43 GMT

Is there any way we can add address also along with longitude and latitude. Below is the script I wrote for address but don't know how add XY info in it.

map = new Map("mapDiv", {
      basemap: "topo",
      center: [-95.249, 38.954],
      zoom: 5,
      sliderStyle: "large"
     });
     // Set up a locator task using the world geocoding service
     var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
     var infoTemplate = new InfoTemplate("Location", "Address: ${Address}<br/>" +
     "City: ${City}<br/>" +
     "State: ${Region}<br/>");
     var symbol = new SimpleMarkerSymbol().setStyle(
      SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
      new Color([0,0,255,0.5])
      );

     locator.on("location-to-address-complete", function(evt) {
      map.graphics.clear();
      console.log(evt);
       if (evt.address.address) {
      var address = evt.address.address;
      var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
      var graphic = new Graphic(location, symbol, address, infoTemplate);
      map.graphics.add(graphic);
      map.infoWindow.setTitle(graphic.getTitle());
      map.infoWindow.setContent(graphic.getContent());
      //display the info window with the address information
      var screenPnt = map.toScreen(location);
      map.infoWindow.resize(300,100);
      map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt), evt.mapPoint);
       }
     });
     map.on("click", function(evt) {
       map.graphics.clear();
       var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
       locator.locationToAddress(mp, 100);

     });

Thanks

Re: Mouse click to get Map Point (or X/Y)

LloydBronn — Sat, 11 Dec 2021 22:32:17 GMT

Not sure exactly what you're trying to accomplish here. This is the simplest way to pull XY values from a mouse click:

map.on("click", function(evt){
                     var mp = webMercatorUtils.webMercatorToGeographic(evt);
                     var x = mp.x.toFixed(3);
                     var y = mp.y.toFixed(3);
               })‍‍‍‍‍

If you console.log(); x and y, you'll get latitude and longitude coordinates to three digits.

Re: Mouse click to get Map Point (or X/Y)

ManjariGoyal — Tue, 09 May 2017 21:14:08 GMT

I am trying to add XY coordinates as well as address of that location. And if there is no address then it should show no address found for this location.

Thanks

Manjari Goyal

Re: Mouse click to get Map Point (or X/Y)

Anonymous User — Thu, 11 May 2017 17:47:58 GMT

Hey,

Try this sample-

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

map = new Map("mapDiv", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
slider: false
});

// selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);

//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function(evt){
map.graphics.clear();
map.graphics.add(new Graphic(evt.mapPoint, symbol));
map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
map.infoWindow.show(evt.mapPoint)
});

});
</script>
</head>

<body>
<span id="messages">Click on the map to get the coordinates.</span>
<div id="mapDiv"></div>
</body>
</html>

Re: Mouse click to get Map Point (or X/Y)

ManjariGoyal — Thu, 11 May 2017 18:25:06 GMT

Hi Harsh,

I have tried this script and the problem , I am having is to add the address also if there is one otherwise it should give the coordinates and “no address is at this location”

Thanks

Manjari Goyal

Re: Mouse click to get Map Point (or X/Y)

Anonymous User — Thu, 11 May 2017 18:33:27 GMT

hello,

I think if you want to display address too then that becomes a service related query that the mouse event has to fire at the time of click.

These are the two links that might be helpful to you. Second link would be more helpful.

ArcGIS API for JavaScript Sandbox

Harsh