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 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.
<!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>