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>
