Execute a QueryTask on page load

StevePiercy1 · ‎04-07-2015

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;
        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;
        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>

RobertScheitlin__GISP · ‎04-07-2015

Steve,

because you are using a web map you have to wait on the arcgis util to finish creating the map before you can execute the query. Here is the working code:

<!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" 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">
    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/on",
        "dojo/domReady!"
        ],
      function (
        Map,
        arcgisUtils,
        DynamicMapServiceLayer,
        ArcGISDynamicMapServiceLayer,
        Query,
        QueryTask,
        SimpleMarkerSymbol,
        InfoTemplate,
        Color,
        on
      ) {
        //create map and add layer
        arcgisUtils.createMap("bf27abedb4dd4197b0fd2237a56d1555", "mapDiv").then(function (response) {
          map = response.map;
          on(dojo.byId('queryBtn'), "click", function(){
            executeQueryTask(dojo.byId('wholesaler_id').value);
          });

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

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

          executeQueryTask(dojo.byId('wholesaler_id').value);
        });

        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>" : " "));
        }

        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(wholesaler_id) {
          //set query based on what user typed in for id;
          query.where = "wholesaler_id IN(" + wholesaler_id + ")";
          //execute query
          queryTask.execute(query,showResults);
        }
      });
  </script>
</head>

<body>
  <h1>Select Tree 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" id="queryBtn">
  <div id="mapDiv"></div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎04-07-2015

Steve,

because you are using a web map you have to wait on the arcgis util to finish creating the map before you can execute the query. Here is the working code:

<!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" 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">
    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/on",
        "dojo/domReady!"
        ],
      function (
        Map,
        arcgisUtils,
        DynamicMapServiceLayer,
        ArcGISDynamicMapServiceLayer,
        Query,
        QueryTask,
        SimpleMarkerSymbol,
        InfoTemplate,
        Color,
        on
      ) {
        //create map and add layer
        arcgisUtils.createMap("bf27abedb4dd4197b0fd2237a56d1555", "mapDiv").then(function (response) {
          map = response.map;
          on(dojo.byId('queryBtn'), "click", function(){
            executeQueryTask(dojo.byId('wholesaler_id').value);
          });

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

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

          executeQueryTask(dojo.byId('wholesaler_id').value);
        });

        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>" : " "));
        }

        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(wholesaler_id) {
          //set query based on what user typed in for id;
          query.where = "wholesaler_id IN(" + wholesaler_id + ")";
          //execute query
          queryTask.execute(query,showResults);
        }
      });
  </script>
</head>

<body>
  <h1>Select Tree 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" id="queryBtn">
  <div id="mapDiv"></div>
</body>

</html>

StevePiercy1 · ‎04-07-2015

Thank you, Robert. The modifications you provided yield the desired results. dojo/on instead of window.onload unwrapped me from the axle.

BladimirAlamilla · ‎06-08-2015

Genial me resulto muy útil, Gracias Robert.