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

ShaningYu · ‎11-01-2016

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

RobertScheitlin__GISP · ‎11-01-2016

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-01-2016

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ShaningYu · ‎11-01-2016

Robert: Thanks a lot.

LloydBronn · ‎01-05-2017

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!

RobertScheitlin__GISP · ‎01-05-2017

Lloyd,

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

LloydBronn · ‎01-05-2017

OK, thanks.

LloydBronn · ‎01-05-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MichaelAugust · ‎01-05-2017

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!

RobertScheitlin__GISP · ‎01-05-2017

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.

MichaelAugust · ‎01-06-2017

Great idea, thanks Robert I will check that out!