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

MikeOnzay — Sat, 11 Dec 2021 08:53:03 GMT

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

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

JeffPace — Sat, 11 Dec 2021 08:53:07 GMT

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)

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

MikeOnzay — Sat, 11 Dec 2021 08:53:11 GMT

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.

topic zoom to graphic from drop down list that is populated with queryTask in ArcGIS JavaScript Maps SDK Questions

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

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

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