4

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));
    }
1
  • 3
    I cleaned up your code a bit but it's still not 100% clear what the problem is. You haven't posted a complete function and there are references to global variables so it's not possible to know what everything means. If you can post a full repro case, that would be ideal so we can see the failure in action. My guess is that selectedTaxLot is not being defined in your dojo.forEach because there is not a graphic with a POINT_NAME attribute that equals your clickedTaxLotId variable. More code will help us figure this out. Commented Feb 22, 2012 at 5:24

1 Answer 1

1

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> 
5
  • Even with the additional code, this is still difficult to debug. The first thing I noticed is that you have "featureLayer.selectFeatures.clear;" several places. This won't actually clear features. To figure out the why your not seeing your feature selected after a click, put some console.log() statements in your if and else blocks. Specifically, look at the value for selectedTaxLot. I don't see us quickly getting to a resolution on this. If you can, please contact Esri support for additional help. Commented Feb 24, 2012 at 5:46
  • 1
    The final thing I'd like to add is that this isn't really how stack exchange works. Unless you're answering your own question, you shouldn't post an answer to your question. You should edit your original question when providing more info. Commented Feb 24, 2012 at 5:47
  • Thanks again Derek! I will take your advice and see what I can do with the code. Also, sorry about answering my own question, I thought this was wrong, but I could not post the code in my comment. Now I know to edit the original question..sorry I am really new to this:)
    – Em123
    Commented Feb 24, 2012 at 15:11
  • One more question. Is a feature layer a graphic? If I have selectedTaxLot = graphic, will that even work for a featureLayer?
    – Em123
    Commented Feb 24, 2012 at 16:01
  • featureLayer is graphic with extra functionality. Or if put plainly, featureLayer is graphics on steroids
    – Sam007
    Commented Feb 15, 2013 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.