Using the Query Task Javascript API Example error

4698
7
Jump to solution
12-11-2015 06:19 AM
MatthewCieri
Occasional Contributor

Hi,

I am pretty new to javascript and web development but have been scripting in SQL and Python for a while.

I have been progressing pretty well and have been able to use, combine and modify many of the samples into a working application but I have been stuck for 2 days on using a query task. I was hoping all you guru's out there could point me in the right direction.

I have tried it on both my localhost and in the esri sandbox and I can't get anything to return.

I either get an error executeQueryTask is undefined or nothing happens.

The code is from Using QueryTask, Query, and FeatureSet | Guide | ArcGIS API for JavaScript

Thanks in advance for your assistance,

Matt

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

   

<style>

  html, body, #mapDiv {

    padding: 0;

    margin: 0;

    height: 100%;

  }

</style>

   

<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

<script src="https://js.arcgis.com/3.15/"></script>

<script>

require([

  "esri/map",

  "esri/layers/ArcGISDynamicMapServiceLayer",

  "esri/tasks/QueryTask",

  "esri/tasks/query",

  "esri/symbols/SimpleMarkerSymbol",

  "esri/InfoTemplate",

  "dojo/_base/Color",

  "dojo/domReady!"

], function(Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color) {

  //create map and add layer

  map = new Map("mapDiv");

  var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

  map.addLayer(layer);

  //initialize query task

  queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

  //initialize query

  query = new Query();

  query.returnGeometry = true;

  query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

  //initialize InfoTemplate

  infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

  //create symbol for selected features

  symbol = new SimpleMarkerSymbol();

  symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);

  symbol.setSize(10);

  symbol.setColor(new Color([255,255,0,0.5]));

  

function executeQueryTask(population) {

  //set query based on what user typed in for population;

  query.where = "POP04 > " + population;

  //execute query

  queryTask.execute(query,showResults);

}

function showResults(featureSet) {

  //remove all graphics on the maps graphics layer

  map.graphics.clear();

  //Performance enhancer - assign featureSet array to a single variable.

  var resultFeatures = featureSet.features;

  //Loop through each feature returned

  for (var i=0, il=resultFeatures.length; i<il; i++) {

    //Get the current feature from the featureSet.

    //Feature is a graphic

    var graphic = resultFeatures;

    graphic.setSymbol(symbol);

    //Set the infoTemplate.

    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.

    map.graphics.add(graphic);

  }

}

  

function executeQueryTask(population) {

  //set query based on what user typed in for population;

  query.where = "POP04 > " + population;

  //execute query

  queryTask.execute(query,showResults);

}

function showResults(featureSet) {

  //remove all graphics on the maps graphics layer

  map.graphics.clear();

  //Performance enhancer - assign featureSet array to a single variable.

  var resultFeatures = featureSet.features;

  //Loop through each feature returned

  for (var i=0, il=resultFeatures.length; i<il; i++) {

    //Get the current feature from the featureSet.

    //Feature is a graphic

    var graphic = resultFeatures;

    graphic.setSymbol(symbol);

    //Set the infoTemplate.

    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.

    map.graphics.add(graphic);

  }

  

  

  

   });

</script>

   

  </head>

 

<body>

  <br/>

  US city population greater than : <input type="text" id="population" value="500000" />

  <input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />

  <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>

  Click on a city once it's highlighted to get an InfoWindow.

</body>

  

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

   Two issues in your code:

  1. The SQL Expression is not valid for you chosen map service layer. POP04 is not a field in that layer.
  2. The button in your html is not in the same scope as your code and thus can not execute the executeQueryTask 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></title>
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.15/"></script>

  <script>
    require([
  "esri/map",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/QueryTask",
  "esri/tasks/query",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/InfoTemplate",
  "dojo/_base/Color",
  "dojo/on",
  "dojo/domReady!"
], function (Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, on) {
      //create map and add layer
      map = new Map("mapDiv");

      var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
      map.addLayer(layer);

      //initialize query task
      queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

      //initialize query
      query = new Query();
      query.returnGeometry = true;
      query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

      //initialize InfoTemplate
      infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

      //create symbol for selected features
      symbol = new SimpleMarkerSymbol();
      symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
      symbol.setSize(10);
      symbol.setColor(new Color([255, 255, 0, 0.5]));

      function executeQueryTask(population) {
        //set query based on what user typed in for population;
        query.where = "POP1990 > " + population;
        console.info(query.where);
        //execute query
        queryTask.execute(query, showResults);
      }

      function showResults(featureSet) {
        //remove all graphics on the maps graphics layer
        map.graphics.clear();
        //Performance enhancer - assign featureSet array to a single variable.
        var resultFeatures = featureSet.features;
        //Loop through each feature returned
        for (var i = 0, il = resultFeatures.length; i < il; i++) {
          //Get the current feature from the featureSet.
          //Feature is a graphic
          var graphic = resultFeatures;
          graphic.setSymbol(symbol);

          //Set the infoTemplate.
          graphic.setInfoTemplate(infoTemplate);

          //Add graphic to the map graphics layer.
          map.graphics.add(graphic);
        }
      }
      on(dojo.byId('btnExec'), 'click', function(){
        executeQueryTask(dojo.byId('population').value);
      });
    });
  </script>
</head>

<body>
  <br/> US city population greater than :
  <input type="text" id="population" value="500000" />
  <input type="button" value="Get Details" id="btnExec"/>
  <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
  Click on a city once it's highlighted to get an InfoWindow.
</body>

</html>

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

   Two issues in your code:

  1. The SQL Expression is not valid for you chosen map service layer. POP04 is not a field in that layer.
  2. The button in your html is not in the same scope as your code and thus can not execute the executeQueryTask 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></title>
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.15/"></script>

  <script>
    require([
  "esri/map",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/QueryTask",
  "esri/tasks/query",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/InfoTemplate",
  "dojo/_base/Color",
  "dojo/on",
  "dojo/domReady!"
], function (Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, on) {
      //create map and add layer
      map = new Map("mapDiv");

      var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
      map.addLayer(layer);

      //initialize query task
      queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

      //initialize query
      query = new Query();
      query.returnGeometry = true;
      query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

      //initialize InfoTemplate
      infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

      //create symbol for selected features
      symbol = new SimpleMarkerSymbol();
      symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
      symbol.setSize(10);
      symbol.setColor(new Color([255, 255, 0, 0.5]));

      function executeQueryTask(population) {
        //set query based on what user typed in for population;
        query.where = "POP1990 > " + population;
        console.info(query.where);
        //execute query
        queryTask.execute(query, showResults);
      }

      function showResults(featureSet) {
        //remove all graphics on the maps graphics layer
        map.graphics.clear();
        //Performance enhancer - assign featureSet array to a single variable.
        var resultFeatures = featureSet.features;
        //Loop through each feature returned
        for (var i = 0, il = resultFeatures.length; i < il; i++) {
          //Get the current feature from the featureSet.
          //Feature is a graphic
          var graphic = resultFeatures;
          graphic.setSymbol(symbol);

          //Set the infoTemplate.
          graphic.setInfoTemplate(infoTemplate);

          //Add graphic to the map graphics layer.
          map.graphics.add(graphic);
        }
      }
      on(dojo.byId('btnExec'), 'click', function(){
        executeQueryTask(dojo.byId('population').value);
      });
    });
  </script>
</head>

<body>
  <br/> US city population greater than :
  <input type="text" id="population" value="500000" />
  <input type="button" value="Get Details" id="btnExec"/>
  <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
  Click on a city once it's highlighted to get an InfoWindow.
</body>

</html>
MatthewCieri
Occasional Contributor

Awesome that worked perfectly.

In a prior version of the code i did change the field but never thought of the scope issue.

Lost for a few hours for a 10 second fix.  Good thing this is for my own education at the moment. LOL!

Thanks for your assistance!!

Matt

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

   There are other ways to make the onClick in the html code has access (scope) to the code but I prefer to use dojo on in the code to handle events for html elements.

MatthewCieri
Occasional Contributor

Hi Robert Scheitlin, GISP​,

Thanks again for your help this morning I have one other question for you if you have a minute.

Do you have any recommended resources on javascript with esri development.  I am really interested in learning how to organize an application. Everything i have done to this point has been one file applications.

I have been reading and I am experiencing that this is probably not going to be the best method.

I would like to learn how to have an html page that calls various javascript files.  I believe this is done in require but I haven't been able to find a good resource that describes the best practices for setting up a web app.

Thanks for your time,

Matt

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Matt,

   Unfortunately I don't have any resources to recommend. All the multi-file JS stuff I learned, was from tearing apart the AGOL templates and large apps like Web AppBuilder.

0 Kudos
MatthewCieri
Occasional Contributor

No problem thought I would ask. That is how I have been trying to learn also but those large apps are really large.

I have only been working on web development for about week so I am pretty happy with where I am.  I just prefer to figure out best practices before i go to far and learn bad habits.

Thanks again.

Zhu_AnLim
New Contributor

Hi, i am having similar issue where my attribute query is not returning any features. i tried direct query from the arcgis rest service and the where clause returns the object correctly. 

When i log the results, it only shows information about the layer im querying, but no features. therefore the results.features returns no value.

Would like to understand where i made a mistake. 

Thanks in advance

The query code is shown below:

                        task.layersId = identifyParamsLayersId;
                        task.featureLayer = layer;
                        // task.isFeatureLayer = true;
                        task.queryTask = new QueryTaskthis.validateUrlToken.addTokenIfApplicablelayerUrl ) );
                        task.query = new Query();
                        task.query.outFields = [
                            "*"
                        ];
                        task.query.returnGeometry = true;
                        task.query.outSpatialReference = this.map.map.spatialReference;
                        var whereclause = "LK_ID_NUM = " + gislink ;
                        task.query.where = whereclause;    //only query features that has same LinkID
                        console.log("query condition: "whereclause);
                        tasks.pushtask );
                        console.log("Query Tasks captured: ",task);
                        

                        var defferedTask = task.queryTask.executetask.query );
                        this.aDeferreds.pushdefferedTask );

                        promises = allthis.aDeferreds );
                        promises.thenlang.hitchthisthis.handlelinkResults ), lang.hitchthisfunction ( err ) {
                        console.error'query error'err );
                        this.map.hideLoadingImg();
                        this.stopTimeout = true;
                        if ( this.errorType == null ) {
                            var errorMessage;
                            if ( err.message ) {
                                errorMessage = err.message;
                                console.log(errorMessage);
                            } else {
                                errorMessage = err;
                                console.log(errorMessage);
                            }
                        }

                    } ) );
0 Kudos