[GIS] How to Zoom to a FeatureLayer Using ArcGIS Javascript API

arcgis-javascript-apifeature-layerjavascriptweb-mapping

I am making a web application using the Javascript API and am trying to zoom to a feature layer from a row click in a dojo data grid. I have this working for a dynamic layer, but am having issues with feature layers. I am getting a Firebug error that says selectedTaxLot is undefined. Do you have any insight why this might be occuring?

//Zoom to the parcel when the user clicks a row 
function onRowClickHandler(evt) {
  if (searchType == "selControl2") {
    var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME;
    var selectedTaxLot;
    alert(featureLayer.geometry);
    var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25, 50, 225, 0.3]));
    dojo.forEach(map.graphics.graphics, function (graphic) {
      if ((graphic.attributes) && graphic.attributes.POINT_NAME === clickedTaxLotId) {
        selectedTaxLot = graphic;
        graphic.setSymbol(highlightSymbol);

        return;
      }
    });

    if (selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point') {
      map.centerAndZoom(taxLotExtent, 11)
      var sp = map.toScreen(selectedTaxLot.geometry);

    } else {
      var taxLotExtent = selectedTaxLot.geometry.getExtent();
      var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
      var mappoint = map.toMap(screenpoint);
      map.setExtent(taxLotExtent, true);
      map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
    }

Best Answer

Thanks so much Derek!! Here is the relevant code, it is quite a mess as I am still learning this whole Javascript thing. Please forgive me :)I did not attach the whole thing because it is over 2000 lines, but hopefully I got all the right pieces. The main issue I am trying to solve now is zooming to a single feature from a row click in a datagrid that is generated after features are manually selected. Hope this makes sense.I really appreciate your help with this!

<script type="text/javascript"> 
  var djConfig = { 
    parseOnLoad: true 
  }; 
 </script> 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script> 

<script type="text/javascript"> 


     var idTask, idParams;
   var grid, store, toolBar;





  var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features; 
   searchType = "";
  function init() { 

   dojo.connect(map, 'onLoad', function(theMap) {
     //initialize the toolbar
      toolBar = new esri.toolbars.Draw(map);
      dojo.connect(toolBar, "onDrawEnd",onDrawEnd);          
      toolBar.deactivate();

  //resize the map when the browser resizes
  dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
   navToolbar.deactivate();
 featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";

  featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
      mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields:["*"]
    });

 function onDrawEnd(extent){
  navToolbar.deactivate();
  //id = "control";
  //select features within the draw extent
  var query = new esri.tasks.Query();
  query.geometry = extent;
  featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){
var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }


function toggleSelect (el) 
 {

navToolbar.deactivate();
alert(el.checked);
if (el.checked)
{
    switch (el.id)

    {
    case 'survSel': 

        searchType="selSurveys2";
        document.getElementById('contSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });

        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5]))); 
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;          

    case 'contSel': 
        searchType="selControl2";
        document.getElementById('survSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/FeatureServer/0";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });
        featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;
    }
 } else
  {

    switch (el.id)
    {
    case 'survSel': 
        document.getElementById('contSel').checked = true;
        break;

    case 'contSel': 
        document.getElementById('survSel').checked = true;
        break;
    }
  }
 }

     var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }

  //Zoom to the parcel when the user clicks a row 
  function onRowClickHandler(evt){ 
  if (searchType == "selControl2") { 
        var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((feature.attributes) && feature.attributes.POINT_NAME === clickedTaxLotId){ 
            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());


            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
        }




} else if (searchType == "selSurveys2") { 
        var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((graphic.attributes) && graphic.attributes.DOCUMENT_N === clickedTaxLotId){ 

            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());

            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(),    map.getInfoWindowAnchor(screenpoint));
        }


}

}  
</script>
Related Question