Using the Query Task Javascript API Example error

MatthewCieri · ‎12-11-2015

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>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

</style>

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

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

</body>

</html>

RobertScheitlin__GISP · ‎12-11-2015

Matthew,

Two issues in your code:

The SQL Expression is not valid for you chosen map service layer. POP04 is not a field in that layer.
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

RobertScheitlin__GISP · ‎12-11-2015

Matthew,

Two issues in your code:

The SQL Expression is not valid for you chosen map service layer. POP04 is not a field in that layer.
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 · ‎12-11-2015

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

RobertScheitlin__GISP · ‎12-11-2015

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 · ‎12-11-2015

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

RobertScheitlin__GISP · ‎12-11-2015

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.

MatthewCieri · ‎12-11-2015

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 · ‎05-11-2021

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 QueryTask( this.validateUrlToken.addTokenIfApplicable( layerUrl ) );

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.push( task );

console.log("Query Tasks captured: ",task);

var defferedTask = task.queryTask.execute( task.query );

this.aDeferreds.push( defferedTask );

promises = all( this.aDeferreds );

promises.then( lang.hitch( this, this.handlelinkResults ), lang.hitch( this, function ( 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);

}

} ) );