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?
- Map Feature Layer Service
- Im using the arcgis recreation feature layer as an example…Hopefully this doesnt move and break my example
- http://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/FeatureServer/0
- Know the Basics of the JavaScript Arcgis Online service
- Find a simple starting example
- I used this http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/fl_ondemand
- If it moves, you can download it here.
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.
Mediocre Developer 