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
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample performs a query task and loads the results before you begin interacting with the map. This allows you to click any county and immediately see an info window.
The QueryTask constructor takes the URL of the layer to be queried, namely the counties layer (index number 3) of theUSAservice on theESRI sample server. Notice that this is not the same service that the map uses.
The query's where clause limits the results to counties in South Carolina. Also notice that returnGeometry is set to true so that the features can be displayed on the map.
//build query filtervar query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
query.where = "STATE_NAME = 'South Carolina'";
The InfoTemplate defines how the attribute information will be formatted in the InfoWindow. Notice that you can use HTML in the info template content. Also, you can use the syntax ${fieldName} to show the value of a field for a given record. Example: ${POP2000}.
There's no code to explicitly show the InfoWindow because the default behavior of a graphic is to display an InfoWindow when clicked. However, you do have to call graphic.setInfoTemplate() in order to apply your template to the InfoWindow. This method is called for each graphic after the query task has completed.
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 onClick</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;
function init() {
map = new esri.Map("mapDiv",{
basemap: "streets-vector",
center: [-80.94, 33.646],
zoom: 7
});
dojo.connect(map, "onLoad", initFunctionality);
}
function initFunctionality(map) {
//build query task
var queryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3");
//build query filter
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["name", "pop2000", "pop00_sqmi"];
query.where = "state_name = 'South Carolina'";
query.outSpatialReference = {"wkid":102100};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("${name}");
infoTemplate.setContent( "<b>2000 Population: </b>${pop2000}<br/>"
+ "<b>2000 Population per Sq. Mi.: </b>${pop00_sqmi}<br/>");
map.infoWindow.resize(245,105);
//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
dojo.connect(queryTask, "onComplete", function(featureSet) {
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
//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);
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
});
});
queryTask.execute(query);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Single click a county in South Carolina to get more information.
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>