AnsweredAssumed Answered

Using the Query Task Javascript API Example error

Question asked by mcieri on Dec 11, 2015
Latest reply on Dec 11, 2015 by mcieri

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

  map.addLayer(layer);

 

  //initialize query task

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

 

  //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[i];

    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[i];

    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>

Outcomes