zoom to graphic from drop down list that is populated with queryTask

MikeOnzay · ‎11-23-2011

I want to zoom to a feature (graphic) when a user selects it from a dojo filtering select list. This list is populated using a queryTask. Is it okay to execute a second queryTask that takes the same results and does something else with it?

function HAPCexecuteQueryTask(fmc) {
         HAPCquery.where = "FisheryManagementCouncil = '"+ fmc +"'";
  HAPCqueryTask.execute(HAPCquery,populateList);
  HAPCqueryTask.execute(HAPCquery,showResults);
  }

I have been looking at this example and it seems to be pretty close to what I want to do (see last entry for solution.
http://forums.arcgis.com/threads/36317-Zoom-to-Graphic?highlight=graphics

JeffPace · ‎11-23-2011

I want to zoom to a feature (graphic) when a user selects it from a dojo filtering select list. This list is populated using a queryTask. Is it okay to execute a second queryTask that takes the same results and does something else with it?
function HAPCexecuteQueryTask(fmc) {
         HAPCquery.where = "FisheryManagementCouncil = '"+ fmc +"'";
  HAPCqueryTask.execute(HAPCquery,populateList);
  HAPCqueryTask.execute(HAPCquery,showResults);
  }
I have been looking at this example and it seems to be pretty close to what I want to do (see last entry for solution.
http://forums.arcgis.com/threads/36317-Zoom-to-Graphic?highlight=graphics

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)

MikeOnzay · ‎11-23-2011

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.