AnsweredAssumed Answered

Execute a QueryTask on page load

Question asked by stevepiercy on Apr 7, 2015
Latest reply on Jun 8, 2015 by bladam

How does one execute a QueryTask on page load?

 

I've created two example pages. The first one is close to my goal, but requires user-submitted data. It creates a web map, then the user can submit a form input to execute a QueryTask, which selects data from an associated table and displays tree nurseries on the map.

 

<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,body,#mapDiv,.map.container{
    padding:20;
    margin:;
    height:650px;
    width:650px;
}
</style>
<script src="http://js.arcgis.com/3.13compact/"></script>
<script type='text/javascript'>
window.onload=function(){
    require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/layers/DynamicMapServiceLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "dojo/_base/Color",
        "dojo/domReady!"
        ], function(Map, arcgisUtils, DynamicMapServiceLayer, ArcGISDynamicMapServiceLayer, Query, QueryTask, SimpleMarkerSymbol, InfoTemplate, Color){
        //create map and add layer
        arcgisUtils.createMap("bf27abedb4dd4197b0fd2237a56d1555", "mapDiv").then(function (response) {
            map = response.map;
        });


        //initialize query task
        queryTask = new esri.tasks.QueryTask("https://services1.arcgis.com/0j6vZbECadDEXdAS/arcgis/rest/services/Retail_Nurseries/FeatureServer/0");


        //initialize query
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["name","street_address","city","state","zip_code","telephone","website"];


        //initialize InfoTemplate
        infoTemplate = new InfoTemplate();
        infoTemplate.setTitle(getTextTitle);
        infoTemplate.setContent(getTextContent);


        function getTextTitle(graphic) {
            return graphic.attributes.name;
        }


        function getTextContent(graphic) {
            return (graphic.attributes.street_address + "<br/>"
            + graphic.attributes.city + ", "
            + graphic.attributes.state + " "
            + graphic.attributes.zip_code + "<br/>"
            + graphic.attributes.telephone
            + (String(graphic.attributes.website).length > 0
                & graphic.attributes.website !== null
                ? "<br/><a href=\"" + graphic.attributes.website + "\" target=\"_blank\">website</a>"
                : " "));
        }


        //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(wholesaler_id) {
    //set query based on what user typed in for id;
    query.where = "wholesaler_id = " + wholesaler_id;


    //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>
<h1>SelecTree Web Map</h1>
Enter wholesaler_id (0, 1, 2, or 3): <input type="text" id="wholesaler_id" value="1">
<input type="button" value="Get Nurseries" onclick="executeQueryTask(dojo.byId('wholesaler_id').value);">
    <div id="mapDiv"></div>
</body>
</html>

In my second attempt I want the QueryTask to execute when the page loads, instead of when the user submits input. In Chrome Developer Tools javascript console, the following error appears.

 

ReferenceError: map is not defined

 

I've tried about a half-dozen permutations of the following code, but I can't figure out the combination of events that would make this work. It's probably something simple that I've overlooked.

 

My theory is that the map has not yet loaded into the DOM, so the attempt to run a QueryTask on the map will fail.

 

Thanks for any help.

 

<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,body,#mapDiv,.map.container{
    padding:20;
    margin:;
    height:650px;
    width:650px;
}
</style>
<script src="http://js.arcgis.com/3.13compact/"></script>
<script type='text/javascript'>
window.onload=function(){
    require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/layers/DynamicMapServiceLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "dojo/_base/Color",
        "dojo/ready",
        "dojo/domReady!"
        ], function(Map, arcgisUtils, DynamicMapServiceLayer, ArcGISDynamicMapServiceLayer, Query, QueryTask, SimpleMarkerSymbol, InfoTemplate, Color, ready){
        //create map and add layer
        arcgisUtils.createMap("bf27abedb4dd4197b0fd2237a56d1555", "mapDiv").then(function (response) {
            map = response.map;
        });


        //initialize query task
        queryTask = new esri.tasks.QueryTask("https://services1.arcgis.com/0j6vZbECadDEXdAS/arcgis/rest/services/Retail_Nurseries/FeatureServer/0");


        //initialize query
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["name","street_address","city","state","zip_code","telephone","website"];


        //initialize InfoTemplate
        infoTemplate = new InfoTemplate();
        infoTemplate.setTitle(getTextTitle);
        infoTemplate.setContent(getTextContent);


        function getTextTitle(graphic) {
            return graphic.attributes.name;
        }


        function getTextContent(graphic) {
            return (graphic.attributes.street_address + "<br/>"
            + graphic.attributes.city + ", "
            + graphic.attributes.state + " "
            + graphic.attributes.zip_code + "<br/>"
            + graphic.attributes.telephone
            + (String(graphic.attributes.website).length > 0
                & graphic.attributes.website !== null
                ? "<br/><a href=\"" + graphic.attributes.website + "\" target=\"_blank\">website</a>"
                : " "));
        }


        //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]));


        ready(function(){
            executeQueryTask(dojo.byId('wholesaler_id').value);
        // This function won't run until the DOM has loaded and other modules that register have run.
        });


    });
}
function executeQueryTask(wholesaler_id) {
    //set query based on what user typed in for id;
    query.where = "wholesaler_id IN(" + wholesaler_id + ")";
//    query.where = "wholesaler_id = " + wholesaler_id;
//     query.where = "wholesaler_id IN (1,2,3)";


    //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>
<h1>SelecTree Web Map</h1>
Enter wholesaler_id (0, 1, 2, or 3): <input type="text" id="wholesaler_id" value="1,2,3">
<input type="button" value="Get Nurseries" onclick="executeQueryTask(dojo.byId('wholesaler_id').value);">
    <div id="mapDiv"></div>
</body>
</html>

Outcomes