How to Zoom to a FeatureLayer Using ArcGIS Javascript API-Collection of common programming errors


  • Sam007

    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));
        }
    

  • Em123

    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!

     
      var djConfig = { 
        parseOnLoad: true 
      }; 
      
      
    
     
    
    
         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));
            }
    
    
    }
    
    }