Hide Table of Contents
View Query and click for info window sample in sandbox
Query and click for info window

Description

This sample shows how to configure a query task for this simple workflow:

  1. User clicks a feature to highlight it.
  2. User clicks the feature again to see an InfoWindow with attribute information.

This sample queries USA states, hence the states layer of the ESRI_StateCityHighway_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.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.22/"></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://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_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://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");

        //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_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];

        //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 Fips: ${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");

        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>