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.

ManjariGoyal · ‎05-09-2017

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

LloydBronn · ‎05-09-2017

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.

ManjariGoyal · ‎05-09-2017

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

Anonymous User · ‎05-11-2017

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>

ManjariGoyal · ‎05-11-2017

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

Anonymous User · ‎05-11-2017

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