Simple Query Task Help Needed

PaulWilner_II · ‎01-24-2014

Hi All:

I really must be missing something here because I have yet to get a query task to work properly. I'm very new to both javascript and web app development and so I'm taking baby steps to build the app that my organization has requested. As a first step all I'd like to do is query my layer and return one point of 64 based upon the query. In this case based on the query, the point with the name "Albany" in the CampusName field should return the symbol specified in the query and be different than the other points.

This seems to be a simple task and I'm following the guide here:

https://developers.arcgis.com/javascript/jshelp/intro_querytask.html
and trying to apply it to my data.

Any insight would be much appreciated.

Below is my code;

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    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)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);

       queryTask=new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");

       query = new Query();
       query.returnGeometry = true;
       query.outFields = ["CampusName"];

       infoTemplate = new InfoTemplate ("${CampusName}");

       symbol=new simpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(10);
       symbol.setColor(new Color([255,255,0,0.5]));



       function executeQueryTask()
       {
         query.where = "CampusName = 'Albany' ";
         queryTask.execute(query,showResults);
       }

       function showResults(featureSet)
       {
         for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

KaitlynnDavis · ‎01-28-2014

When you use console.log(), that means that you are sending a log message to the console window. So if you are testing your app in the Firefox browser, for example, you should see your log statements in Firebug's console tab, given that you've chosen the Firebug debugger. So for "console.log("My query results:", resultFeatures);" you should see in your debugger console panel the text 'My query reults:' followed by the FeatureSet object that was returned from your query task. You could further drill down and use:

console.log("My query results:", featureSet.features);   //returns an array of your query result's features console.log("My query results:", featureSet.features.length);  //returns the length of the feature array

If your debugger does not indicate that any features are getting returned, you should probably check to make sure there is nothing wrong with your feature layer or the way you're writing your query. Try the same query you are using in your code in your REST endpoint for the layer (http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0). If you're not sure how to do this, navigate to that URL and at the bottom of the page there should be a link titled Query that leads you to a page where you can construct your query and see if it still fails

View solution in original post

ScottGunn · ‎01-24-2014

Just briefly loooking at this, but it looks like you call showResults in the queryTask but you do not have any reference to the featureSet object. Have you tried this:
function showResults(featureSet)
       {
var resultFeatures = featureSet.features;
for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

Hi All:

       function executeQueryTask()
       {
         query.where = "CampusName = 'Albany' ";
         queryTask.execute(query,showResults);
       }

       function showResults(featureSet)
       {
         for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

JohnathanBarclay · ‎01-26-2014

There are several further mistakes in your code:

I cant see where the variables queryTask, query, infoTemplate and symbol have been declared
In your for loop there is no space between var and i (In fact the "var" isn't really needed in a for loop)
You have given graphic.setInfoTemplate method an upper case "E" incorrectly

I recommend you use your browser's development tools which would have picked up on these for you.

PaulWilner_II · ‎01-27-2014

Thanks for the input. I really need to understand how queryTask works, as such I've removed the "infotemplate" portions of the code for simplicity and also took the suggestions by previous posters into account but I still don't have this working. Any further assistance by anyone would be appreciated.

Again the goal is to query a layer and change the symbol of one of the points based the query. I do realize there are probably other ways to do this task but my goal is to understand how query works with my own server and the javascriptAPI.

My current code is below

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol","dojo/_base/Color", "dojo/domReady!"],

    function(Map,ArcGISDynamicMapServiceLayer, QueryTask,Query, SimpleMarkerSymbol, Color)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);

       var queryTask=new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");
       var query = new Query();
       query.returnGeometry = true;
       query.outFields = ["CampusName"];
       query.where = "CampusName = 'Albany' ";
       queryTask.execute(query,showResults);



       var symbol=new simpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(10);
       symbol.setColor(new Color([255,255,0,0.5]));

      var resultFeatures=featureSet.features;


       function showResults(resultFeatures)

       {
         map.graphics.clear();


         for(i=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           map.graphics.add(graphic);
         }
       }
    });



</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

KaitlynnDavis · ‎01-27-2014

Make sure that when you refer to dojo modules in your code that you use the same name as the one you chose in your require callback. In your code, you use "new simpleMarkerSymbol();" but it should reflect the parameter name you originally provided, which was "SimpleMarkerSymbol". Case sensitivity matters in this regard.

Also, to ensure that your query is returning features, use a log statement in the showResults function. Just supply this

console.log("My query results:", resultFeatures);

at the beginning of the function and then check out your debugger console to see what returned from your query

PaulWilner_II · ‎01-28-2014

check out your debugger console to see what returned from your query

Thank you all for your continued patience with this newbie. When I'm a master coder I'll be sure to return the favor.

This is a great trick, I can open the debugger console.........but um, what exactly am I looking for? I don't see what was supposed to be logged. I don't see anything like:   "My query results......(results) " in the log or debugger or any of the other tabs. Can you direct me?

Changes made:
Updated field name to "CAMPUS_NAM" originally had it pointed at the wrong field.

Capitalized S in simplemarkersymbol.

Updated code follows:

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/tasks/QueryTask","esri/tasks/query","esri/symbols/SimpleMarkerSymbol","dojo/domReady!"],

    function(Map,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleMarkerSymbol)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);


       var queryTask= new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");
       var query = new Query();

       query.where = "CAMPUS_NAM = 'Albany'";
       query.outSpatialReference = map.spatialReference;
       query.returnGeometry = true;
       query.outFields = ["CAMPUS_NAM"];
       queryTask.execute(query,showResults);




       var symbol = new SimpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(50);

      var resultFeatures=FeatureSet.features;


       function showResults(resultFeatures)

       {
        console.log("My query results:", resultFeatures);

         for(i=0, i1=resultFeatures.length; i<=i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           map.graphics.add(graphic);


         }

       }

    });



</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

KaitlynnDavis · ‎01-28-2014

When you use console.log(), that means that you are sending a log message to the console window. So if you are testing your app in the Firefox browser, for example, you should see your log statements in Firebug's console tab, given that you've chosen the Firebug debugger. So for "console.log("My query results:", resultFeatures);" you should see in your debugger console panel the text 'My query reults:' followed by the FeatureSet object that was returned from your query task. You could further drill down and use:

console.log("My query results:", featureSet.features);   //returns an array of your query result's features console.log("My query results:", featureSet.features.length);  //returns the length of the feature array

If your debugger does not indicate that any features are getting returned, you should probably check to make sure there is nothing wrong with your feature layer or the way you're writing your query. Try the same query you are using in your code in your REST endpoint for the layer (http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0). If you're not sure how to do this, navigate to that URL and at the bottom of the page there should be a link titled Query that leads you to a page where you can construct your query and see if it still fails

PaulWilner_II · ‎01-28-2014

When you use console.log(), that means that you are sending a log message to the console window. So if you are testing your app in the Firefox browser, for example, you should see your log statements in Firebug's console tab, given that you've chosen the Firebug debugger. So for "console.log("My query results:", resultFeatures);" you should see in your debugger console panel the text 'My query reults:' followed by the FeatureSet object that was returned from your query task. You could further drill down and use:

Ok, so now I know where to look, The odd thing here is that the debugger doesn't even show the text "My query results:" I would think no matter the state of the query itself the text would be logged. The fact that it isn't doesn't make any sense to me.

In firebug here's what it looks like under the tab console/all

.
GET http://services.arcgisonline.com/ArcGIS/rest/info?f=json

200 OK
33ms
/3.8/ (line 158)
GET http://w7hp348/arcgis/rest/info?f=json

200 OK
347ms
/3.8/ (line 158)
GET http://static.arcgis.com/attribution/World_Street_Map?f=json

200 OK
54ms
/3.8/ (line 158)
TypeError: f is undefined

The resource from this URL is not text: http://js.arcgis.com/3.8/

Any thoughts on what any of that means and why I'm not seeing the text in the console log statement?

If your debugger does not indicate that any features are getting returned, you should probably check to make sure there is nothing wrong with your feature layer or the way you're writing your query.

I have tested the query via the rest endpoint and it appears to return one point, which I would expect it to return.

KaitlynnDavis · ‎01-28-2014

I'm not sure why you're not seeing the log statement unless your code is failing before it gets to that point

I think I see an issue with your for loop though. Use this instead:

for(var i=0, i1=resultFeatures.features.length; i<i1; i++);

The FeatureSet that's returned from a querytask is an object (https://developers.arcgis.com/javascript/jsapi/featureset.html), and the length property is for an array, so you want to be applying length to the array of returned features array

PaulWilner_II · ‎01-29-2014

Thanks to everyone for continued help!

I've decided to rebuild the code line by line to determine where exactly it fails. It looks like the query is not executing because the code fails at the line queryTask.execute(query,showResults);

and has something to do with this error message:

TypeError: f is undefined

which I don't understand

I have not changed my code since that which lies above.