Hide Table of Contents
View Query and immediately open info window sample in sandbox
Query and immediately open info window


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) {
} else if (fset.features.length !== 0) {

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>
    <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.30/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.30/"></script>

      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");

        //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) {
        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) {
          } else if (fset.features.length !== 0) {

      function showFeature(feature,evt) {

        //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]));

        //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;


        (evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;

      function showFeatureSet(fset,evt) {
        //remove all graphics on the maps graphics layer
        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/>";


  <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>
Show Modal