[GIS] ArcGIS JavaScript API Graphic doesn’t Display

arcgis-javascript-api

I am using map.graphic layer to present a query result, which is a featureset. I assigned symbol and template to the graphics and added them to map.graphics. However, when I apply the function, it doesn't display the graphics. I added another single graphic to the map and it presents well. Can anybody help me with the issue?
Here is the webpage:
http://www.public.asu.edu/~jzhan300/HCIC/HCICInteractiveMap.html
When you hit the select, and then click the apply it will execute the function.
Here is the query and display part of code: 

var whereExpression = "";
myQueryTask = new QueryTask("http://arcgis-cabhpgis-2026970499.us-west-1.elb.amazonaws.com/arcgis/rest/services/HCIC/160524_interactive_map_jzz_v02/MapServer/0");
myQuery = new Query();
myQuery.returnGeomery = true;
myQuery.outFields=["*"];
on(dom.byId("applyServiceSelection"),"click",executeQuery);
function executeQuery(){
    console.log("executequery started");
    whereExpression = "";
    for(i=0;i<serviceList.length;i++){
        if(i==0) {
            whereExpression += ("ServiceProvided LIKE '%" + serviceList[i] + "%'");
        }
        else{
            whereExpression += (" AND ServiceProvided LIKE '%" + serviceList[i] + "%'");
        }
    }
    myQuery.where = whereExpression;
    console.log("where statement completed in executequery function");
    myQueryTask.execute(myQuery,showResults);
    console.log("myquerytask completed in executequery function");
}
var symbolPoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 10,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1),
    new Color([0, 255, 0, 0.25]));
function showResults (results) {
    console.log("showresults started");
    console.log("total graphics in graphics layer: " +mainMap.graphics.graphics.length);
    //mainMap.graphics.clear();
    dom.byId("info").innerHTML = results.features.length;
    for (var i=0; i<results.features.length; i++){
        var aGraphic = results.features[i];
        aGraphic.setSymbol(symbolPoint);
        aGraphic.setInfoTemplate(BHInfoTemplate);
        mainMap.graphics.add(aGraphic);
        console.log("one feature launched, total graphics in graphics layer: " +mainMap.graphics.graphics.length);
        console.log(aGraphic.attributes);
    }
    console.log("showresults finished");
}
mainMap.on("load", function () {
    var point = new Point([-112,34.3]);
    var pointGraphic = new Graphic(point, symbolPoint);
    mainMap.graphics.add(pointGraphic);
    console.log("one feature launched, total graphics in graphics layer: " +mainMap.graphics.graphics.length);
});

You can check the full code from the link.

Best Answer

you don't have graphics on map because :

1-the service returns feature without geometry attribute .

and this is due to a typing error in your above code :

Just rectify the line myQuery.returnGeomery = true; ( t letter missed ) to this myQuery.returnGeometry = true;

2- in the showResults function : inside the loop you didn't make instanciation of the Graphic object you are adding a feature object to map :

use esri/graphic to instanciate new graphic objectfor each returned feature :

function showResults (results) {
    mainMap.graphics.clear();
    dom.byId("info").innerHTML = results.features.length;
    var aGraphic
    for (var i=0; i<results.features.length; i++){
         aGraphic = new Graphic( results.features[i].geometry, //assigning geometry
                                 symbolPoint, //assigning symbol
                                 results.features[i].attributes, //assigning attributes
                                 BHInfoTemplate );//assigning template to graphic
        mainMap.graphics.add(aGraphic);
        console.log("one feature launched, total graphics in graphics layer: " +mainMap.graphics.graphics.length);
        console.log(aGraphic.attributes);
    }
    console.log("showresults finished");
}
Related Question