Hide Table of Contents
Analysis
Data Reviewer
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
Share
View live sample
Download as a zip file
Description
This sample demonstrates how to immediately open an InfoWindow when a feature is queried. The InfoWindow can be used to format the attributes of the feature in an easily-readable, dismissable format.
In this sample, both the map and the query task use the service KGS_OilGasFields_Kansas on the ESRI sample server.
The following event listener calls the function executeQueryTask after a map click:
dojo.connect(map, "onClick", executeQueryTask);The query task behaves differently depending on whether the user clicked no polygon, one polygon, or multiple overlapping polygons:
queryTask.execute(query, function(fset) {if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} else if (fset.features.length !== 0) {
showFeatureSet(fset,evt);
}
});
If just one feature was clicked, the function showFeature is called. The function formats the InfoWindow, displays a graphic of the feature using map.graphics.add() , and shows the InfoWindow immediately using the map.infoWindow.show method. This overrides the default behavior of the graphic waiting for a second click before showing the InfoWindow.
If multiple features were clicked, the function showFeatureSet is called.This function loops through each feature and adds its name and a hyperlink to an InfoWindow. The user can choose which feature to highlight using the resulting list of links. If the user clicks a highlighted feature, the default behavior is for the graphic to show an InfoWindow.
Note that the result of the QueryTask is always a FeatureSet. In this sample, only one of the items in the FeatureSet (the only item) is passed to the showFeature function, whereas the entire FeatureSet is passed to theshowFeatureSet function.
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, queries with multiple results at the same location are displayed in an InfoWindow</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script src="https://js.arcgis.com/3.24/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query;
var featureSet;
function init() {
map = new esri.Map("mapDiv", {
basemap: "satellite",
center: [-98.481, 38.52],
zoom: 8
});
//create and add new layer
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
map.addLayer(dynamicLayer);
//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
dojo.connect(map, "onClick", executeQueryTask);
//Listent for infoWindow onHide event
dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
//build query task
queryTask = new esri.tasks.QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");
//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.outSpatialReference = {"wkid":102100};
query.returnGeometry = true;
query.outFields = ["FIELD_NAME", "FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];
}
function executeQueryTask(evt) {
map.infoWindow.hide();
map.graphics.clear();
featureSet = null;
//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, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} else if (fset.features.length !== 0) {
showFeatureSet(fset,evt);
}
});
}
function showFeature(feature,evt) {
map.graphics.clear();
//set symbol
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
feature.setSymbol(symbol);
//construct infowindow title and content
var attr = feature.attributes;
var title = attr.FIELD_NAME;
var content = "Field ID : " + attr.FIELD_KID
+ "<br />Produces Gas : " + attr.PROD_GAS
+ "<br />Produces Oil : " + attr.PROD_OIL
+ "<br />Status : " + attr.STATUS;
map.graphics.add(feature);
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
(evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;
}
function showFeatureSet(fset,evt) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
var screenPoint = evt.screenPoint;
featureSet = fset;
var numFeatures = featureSet.features.length;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the infowindow.
var title = "You have selected " + numFeatures + " fields.";
var content = "Please select desired field from the list below.<br />";
for (var i=0; i<numFeatures; i++) {
var graphic = featureSet.features[i];
content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
}
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Click on a petrolueum field to get more info. If mulitple fields are selected then you can select the field to display.
<div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
</body>
</html>