How to Zoom to a FeatureLayer Using ArcGIS Javascript API-Collection of common programming errors
Sam007I 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)); }
Em123Thanks 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)); } } }