Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Query and click for info window
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to configure a query task for this simple workflow:
- User clicks a feature to highlight it.
- User clicks the feature again to see an InfoWindow with attribute information.
This sample queries USA states, hence the states layer of the this USA service is passed to the QueryTask constructor.
The first mouse click is captured by the following event listener:
dojo.connect(map, "onClick", executeQueryTask);When the click occurs, the executeQueryTask function is called, which executes the query, followed by theshowResults function, which adds the graphic.
The second mouse click is captured by default when the user clicks a highlighted graphic. To format the InfoWindow, the application uses the InfoTemplate applied when the showResults function calls graphic.setInfoTemplate().
Code
<!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>QueryTask with geometry, results as an InfoWindow</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query;
var symbol, infoTemplate;
function init() {
//create map
map = new esri.Map("mapDiv");
//create and add new layer
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/");
map.addLayer(layer);
//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
dojo.connect(map, "onClick", executeQueryTask);
//build query task
queryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2");
//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
//dojo.connect(queryTask, "onComplete", showResults);
//build query filter
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["state_name", "state_abbr", "pop2000"];
//create the infoTemplate to be used in the infoWindow.
//All ${attributeName} will be substituted with the attribute value for current feature.
infoTemplate = new esri.InfoTemplate(
"${state_name}",
"State abbreviation: ${state_abbr}<br />Population (2000): ${pop2000}"
);
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
}
function executeQueryTask(evt) {
//onClick event returns the evt point where the user clicked on the map.
//This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
query.geometry = evt.mapPoint;
//Execute task and call showResults on completion
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Click on a State to get more info. When State is highlighted, click State again to get infoWindow.
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>