How to grab user's mouse click (coordinates) in Javascript

Question

I am just getting to grips with using ArcGIS Server 9.3.1. I am developing in .NET with a very basic Web app in C# - it has the standard ESRI web ADF ASP controls in the web page (Default.aspx) including a map and toolbar with some out of the box nav buttons. I have also made some custom tools on the toolbar.

I am interested in working with the Web ADF Javascript libraries not the ArcGIS JavaScript API - a subtle but important differnce I believe.

How would I go about doing the following (bearing in mind I want to be firing the JavaScript via the ClientAction property - custom):

1. I need some javascript to work out where on the Map control the user has clicked and get a hold of the xy coordinates.

2. Send these coordinates to a web service (I already have a web service set up to accept coordinates and send XML back).

3. Parse the XML from the web service and put in a table.

Cheers

Answer 1

I can't help you with steps 2 and 3, but those are javascript / AJAX calls that you can deal with once you have figured out where the map was clicked.

To set up a client-side handler in the .NET ADF, first configure a Tool that will call some javascript when you click on it:

<esri:Tool 
    ClientAction="setupCustomTool('%toolbarItem%');"  
    JavaScriptFile="" Name="ClientTest" />

Then add the handler that tells the Map to get a Point from the map:

<script type="text/javascript">
    var map;
    var mapID = 'Map1';


    function clickHandler(inputGeometry) {
        alert ('You clicked ' + 
            inputGeometry.get_x() + ', ' + 
            inputGeometry.get_y());
    }

    function setupCustomTool(name) {
        map = $find(mapID);            
        map.set_mouseMode(ESRI.ADF.UI.MouseMode.Custom);             
        if (name == 'ClientTest') {
            map.getGeometry(
                ESRI.ADF.Graphics.ShapeType.Point,
                clickHandler, 
                null,
                null,
                null,
                'pointer',
                true);
        }
    }
</script>

This will give you a point in map units. If you want lat/long, and your map units aren't already lat/long, you will need to reproject them. Proj4JS is the simplest way to do that.

With your favorite javascript debugger you can set a breakpoint inside the clickHandler function to inspect the inputGeometry, which will tell you more about what it contains and the methods it exposes.

This code is adapted from the example provided by ESRI with ArcGIS Server:

C:\Program Files\ArcGIS\developerkit\samplesnet\server\Web_Applications\Common_CustomJavaScriptCSharp.zip

Answer 2

This is from a page I set up using ESRI's Javascript API. Basically I'm letting the user search for an address, then confirming the address with a mouse click. Then grabbing coordinates on the mouse click and passing them to some text boxes on my page. I then have some code behind that moves the coordinates to a SQL table.

script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"    type="text/javascript"script

script type="text/javascript"
dojo.require("esri.map");
dojo.require("esri.tasks.geometry");

var map = null;
var gsvc = null;
var pt = null;
var findTask, findParams;

function initialize() {
  map = new esri.Map("map");
  var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://service name");
  map.addLayer(dynamicMapServiceLayer);

  gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  dojo.connect(map, "onClick", projectToWebMercator);

  //Create Find Task using the URL of the map service to search
  findTask = new esri.tasks.FindTask("http://service name");

  //Create the find parameters
  findParams = new esri.tasks.FindParameters();
  findParams.returnGeometry = true;
  findParams.layerIds = [10];
  findParams.searchFields = ["ADDRESS"];

}

function projectToWebMercator(evt) {
  map.graphics.clear();
  var point = evt.mapPoint;
  var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE);
  var graphic = new esri.Graphic(point, symbol);
  var outSR = new esri.SpatialReference({ wkid: 2264});
  map.graphics.add(graphic);

  gsvc.project([ graphic ], outSR, function(features) {
    pt = features[0].geometry;
    Form1.TextBox1.value = pt.x
    Form1.TextBox2.value = pt.y
    //graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
      //"<p>&nbsp;X: " + pt.x +
      //"<br/>&nbsp;Y: " + pt.y +
      //"</p>"  +
      //"<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />" +
      //"<div id='latlong'></div>"));
    //map.infoWindow
      //.setTitle(graphic.getTitle())
      //.setContent(graphic.getContent())
      //.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});

}

function projectToLatLong() {
  var symbol = new esri.symbol.SimpleMarkerSymbol();
  var graphic = new esri.Graphic(pt, symbol);
  var outSR = new esri.SpatialReference({ wkid: 4326});

  gsvc.project([ graphic ], outSR, function(features) {
    pt = features[0].geometry;
    dojo.byId("latlong").innerHTML = "&nbsp;Latitude = " + pt.y + "<br/>&nbsp;Longitude = " + pt.x;
  });
 }

function doFind() {
    //Set the search text to the value in the box
    findParams.searchText = dojo.byId("ownerName").value;
    findTask.execute(findParams,showResults);
  }

  function showResults(results) {
      //find results return an array of findResult.
      map.graphics.clear();
      var dataForGrid = [];

      for (var i = 0, il = results.length; i < il; i++) {
          var curFeature = results[i];
          var graphic = curFeature.feature;
          var layerName = curFeature.layerName;
          var layerId = curFeature.layerId;
          var foundFieldName = curFeature.foundFieldName;
          var foundFieldValue = graphic.attributes[foundFieldName];

          var attValues = [layerName, layerId, foundFieldName, foundFieldValue];
          dataForGrid.push(attValues);


          switch (graphic.geometry.type) {
              case "point":
                  var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  break;
              case "polyline":
                  var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  break;
              case "polygon":
                  var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                  break;
          }
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
          var pt = graphic.geometry
          var factor = 50; //some factor for converting point to extent
          var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.SpatialReference);
          map.setExtent(extent.expand(2));

      }
  }
dojo.addOnLoad(initialize);

I basically started with this sample and went from there.

http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm

Maybe not the whole answer, but hopefully a pointer in the right direction.