« Posts under Arcgis

Arcgis, How to Find the Point User Clicked On

About This Post

The main goal of this post is to explain how I figured out finding which point a user clicked on in an arcgisonline.com generated map.  You would think the API would cover this, but unfortunately it is a problem that others found.  Here is thread about the problem.  I spent considerable time trying to solve this problem.  Because I knew it was possible, but why wasn’t it in the javascript API?

Goals

  • Load a Feature Layer with your data
  • Listen for a map click and identify which point the user clicked on.

Simple goal right?  You wouldn’t believe that this was actually quite difficult.  If there is now a simple solution in the API, I swear as of 1/1/2013 there was not.

Side Note:
The infoTemplate is passed the data, but I couldnt figure out for the life of me how to get this content.  We know its there, but I didn’t want to spend forever unraveling the arcgis code base looking for a way to do this.  I never ended up being able to do it this way, so I had to force it with the arcgis javascript API.  We could wait till the infoTemplate loaded and then parse its HTML elements, but that isn’t a very good solution either.

What we need?

Solution / Example

1. Setup Our Feature Layer

Lets example this part of the code in initOperationalLayer function from the downloaded example above.

featureLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{

mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});

We want to replace our feature layer in bold and underlined above with the our recreational one I referenced above.

Replace

http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2

with

http://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/FeatureServer/0

If you run this, you will now see our map shows the available recreation centers that were in our feature layer map.

2. Lets Hook into the Map onClick Event

So at the bottom of the initOperationalLayer function we want to add the following code:

//hook into the onClick event
dojo.connect(featureLayer, "onClick", function(evt){

	//we need to query the feature layer for this point
	var query = new esri.tasks.Query();

	//get the location of mouse click..The API doesnt tell you about this.  This is the magic part
	//I stumbled across this value by using debugger and console.log(evt) and searching the object.
	query.geometry = evt.graphic.geometry;
	query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;

	//select the actual point
	featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW,
		function(features){
			//user clicked on something, then we should have features
			if(features.length > 0){
				var data = "";
				for(var x in features){
					data = "Feature "+x+":n";

					//building a string of the queried data
					for(var y in featureLayer.fields){
						var name = featureLayer.fields[y].name;
						data+= name+" : "+features[x].attributes[name]+"n";
					}
			}
				alert(data);
			}else{
				alert("Failed to select the feature");
		}
	});

});

The special part is this line:

query.geometry = evt.graphic.geometry;

This gives the query the “spatial reference” (I guess that is what you might call it) to perform query on Feature Layer for.

3.  That it, we are done.  You can get the solution here.