Instead of two queries, why not add an onclick event to the item in the List that zooms to the geometry? (if you showed your populatelist /showresults functions, it would help)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>State Info</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("esri.tasks.query");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.parser");
var query, queryTask, map, hapcLayer;
function init() {
//create map and add layer
map = new esri.Map("mapDiv");
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");
map.addLayer(layer);
hapcLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/NMFS/HAPC/MapServer", {
"id": "HAPC"
});
map.addLayer(hapcLayer);
hapcLayer.hide();
}
//initialize query task
queryTask = new esri.tasks.QueryTask("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/NMFS/HAPC/MapServer/0");
//initialize HAPC query
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["HAPC_Sitename","FisheryManagementCouncil"];
function executeQueryTask(fmc) {
//alert(fmc);
//set query based on what user selected in from list;
query.where = "FisheryManagementCouncil = '"+ fmc +"'";
//alert(query.where);
//execute query
queryTask.execute(query,populateList);
}
function populateList(results) {
//Populate the dropdown list box with unique values
var zone;
var values = []; //create array
var testValsEncountered={}; // create JSON object (dictionary) to hold multiple name:value pairs
//Add option to display all zoning types to the dropdown list
//values.push({name:"ALL"}); //All is not a value in the layer which is why it is being hard coded here.
var features = results.features; //features is a property of query task and has the type of 'graphic'. It is an array.
dojo.forEach (features, function(feature) { //optimized way of doing a for loop, specific to dojo, patterned after HTML5. Let's you apply a function to each element of an array. Feauture is each item in the array.
zone = feature.attributes.HAPC_Sitename; //feature in this context is a graphic and attribute is a property
if (!testValsEncountered[zone]) { //tests to see if the testval object containing the value of zone doesn't exist
testValsEncountered[zone] = true; //creates a "key" zone with a value of true
values.push({name:zone});//push the JSON pair into the values array
}
});
//sort function by Douglas Crockford, page 81, Javascript: The Good Parts
var by = function(name){
return function (o,p) {
var a,b;
if (typeof o === 'object' && typeof p === 'object' && o && p) {
a = o[name];
b = p[name];
if (a===b){
return o;
}
if (typeof a === typeof b){
return a < b ? -1 : 1;
}
return typeof a < typeof b ? -1 : 1;
}else {
throw {
name: 'Error',
message: 'Expected an object when sorting by ' + name
};
}
};
};
values.sort(by('name')); //sorts the array of unique values
values.unshift({name:"ALL"}); //ensures that an ALL option is not part of the sort and is listed first
//Create a ItemFileReadStore and use it for the ComboBox's data source
var dataItems = { //create JSON object to hold multiple name:value pairs
identifier: 'name', //optional
label: 'name', //optional
items: values
};
var store = new dojo.data.ItemFileReadStore({data:dataItems});
dijit.byId("mySelect").store = store;
}
function applyLayerDef(selItem){
map.graphics.clear();
//Filter the layer to display only the selected HAPC feature
if (selItem.value !== 'ALL') {
var layerDefs = [];
layerDefs[0] = "HAPC_Sitename = " + "'" + selItem.value + "'";
layerDefs.visibleLayers = [0];
map.getLayer("HAPC").setLayerDefinitions(layerDefs);
hapcLayer.show();
}
else {
map.getLayer("HAPC").setDefaultLayerDefinitions();
hapcLayer.show();
}
}
dojo.addOnLoad(init);
</script>
<body class="tundra">
<br/>
Select A Region :
<select name="fmc2" id="fmc2" onChange="executeQueryTask(dojo.byId('fmc2').value);">
<option value="" selected="selected">Select Region</option>
<option value="Mid-Atlantic Fishery Management Council">MAFMC</option>
<option value="Gulf of Mexico Fishery Management Council">GFMC</option>
</select>
<select id="mySelect"
dojotype="dijit.form.FilteringSelect"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select HAPC"
onChange="applyLayerDef(this)">
</select>
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>Your comment reminded me that I had something similar working the other day in another file. I've included the full file here. Except I used onChange instead of onClick. My problem is really about how to zoom into a feature or graphic that the user chooses from a list. As a beginner I've been struggling to figure out how to do this. I think I have to use a graphic but I'm not sure because this applyLayerDef function seems to have no problem displaying the individual feature. I also want the map to zoom into a predefined area with the first drop down box but that list is not getting populated from a map service. I've thought about using a JSON file.
