{"id":3041,"date":"2014-03-15T02:03:43","date_gmt":"2014-03-15T02:03:43","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/15\/how-to-zoom-to-a-featurelayer-using-arcgis-javascript-api-collection-of-common-programming-errors\/"},"modified":"2014-03-15T02:03:43","modified_gmt":"2014-03-15T02:03:43","slug":"how-to-zoom-to-a-featurelayer-using-arcgis-javascript-api-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/15\/how-to-zoom-to-a-featurelayer-using-arcgis-javascript-api-collection-of-common-programming-errors\/","title":{"rendered":"How to Zoom to a FeatureLayer Using ArcGIS Javascript API-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/Z4kkc.gif?s=32&amp;g=1\" \/><br \/>\nSam007<\/p>\n<p>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 <code>selectedTaxLot is undefined<\/code>. Do you have any insight why this might be occuring?<\/p>\n<pre><code>\/\/Zoom to the parcel when the user clicks a row \nfunction onRowClickHandler(evt) {\n  if (searchType == \"selControl2\") {\n    var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME;\n    var selectedTaxLot;\n    alert(featureLayer.geometry);\n    var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25, 50, 225, 0.3]));\n    dojo.forEach(map.graphics.graphics, function (graphic) {\n      if ((graphic.attributes) &amp;&amp; graphic.attributes.POINT_NAME === clickedTaxLotId) {\n        selectedTaxLot = graphic;\n        graphic.setSymbol(highlightSymbol);\n\n        return;\n      }\n    });\n\n    if (selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point') {\n      map.centerAndZoom(taxLotExtent, 11)\n      var sp = map.toScreen(selectedTaxLot.geometry);\n\n    } else {\n      var taxLotExtent = selectedTaxLot.geometry.getExtent();\n      var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());\n      var mappoint = map.toMap(screenpoint);\n      map.setExtent(taxLotExtent, true);\n      map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));\n    }\n<\/code><\/pre>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/e0ea1e7ee89987c1c4ade4f450a3f60b?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nEm123<\/p>\n<p>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!<\/p>\n<pre><code> \n  var djConfig = { \n    parseOnLoad: true \n  }; \n  \n  \n\n \n\n\n     var idTask, idParams;\n   var grid, store, toolBar;\n\n\n\n\n\n  var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features; \n   searchType = \"\";\n  function init() { \n\n   dojo.connect(map, 'onLoad', function(theMap) {\n     \/\/initialize the toolbar\n      toolBar = new esri.toolbars.Draw(map);\n      dojo.connect(toolBar, \"onDrawEnd\",onDrawEnd);          \n      toolBar.deactivate();\n\n  \/\/resize the map when the browser resizes\n  dojo.connect(dijit.byId('map'), 'resize', map,map.resize);\n   navToolbar.deactivate();\n featureLayerUrl = \"http:\/\/slcarcgisdev1\/SLCOGIS\/rest\/services\/public\/SurveyorFS\/MapServer\/2\";\n\n  featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{\n      mode:esri.layers.FeatureLayer.MODE_ONDEMAND,\n      outFields:[\"*\"]\n    });\n\n function onDrawEnd(extent){\n  navToolbar.deactivate();\n  \/\/id = \"control\";\n  \/\/select features within the draw extent\n  var query = new esri.tasks.Query();\n  query.geometry = extent;\n  featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){\nvar items = dojo.map(features,function(feature){\n     return feature.attributes;\n});\n\n\n    \/\/add selected features to the grid\n    if (document.getElementById(\"contSel\").checked){\n        showPointNameGrid();\n\n\n    } else if(document.getElementById(\"survSel\").checked){\n        showSurveysNameGrid();\n\n    }\n    var items = dojo.map(features,function(feature){\n      return feature.attributes;\n    });\n  if(document.getElementById(\"contSel\").checked){\n    \/\/showPointNameGrid();\n      searchType=\"selControl2\";\n    var data = {identifier:\"POINT_NAME\", items:items};\n    var store = new dojo.data.ItemFileReadStore({data:data});\n    var grid = dijit.byId('grid4'); \n    grid.setStore(store);\n   featureLayer.selectFeatures.clear;\n\n\n  } else if (document.getElementById(\"survSel\").checked){\n     \/\/showSurveysNameGrid();\n      searchType=\"selSurveys2\";\n    var data = {identifier:\"doc_id\", items:items};\n    var store = new dojo.data.ItemFileReadStore({data:data});\n    var grid = dijit.byId('grid5'); \n    grid.setStore(store);\n    featureLayer.selectFeatures.clear;\n\n  }     \n  });\n\n  }\n\n\nfunction toggleSelect (el) \n {\n\nnavToolbar.deactivate();\nalert(el.checked);\nif (el.checked)\n{\n    switch (el.id)\n\n    {\n    case 'survSel': \n\n        searchType=\"selSurveys2\";\n        document.getElementById('contSel').checked = false;\n        featureLayerUrl = \"http:\/\/slcarcgisdev1\/SLCOGIS\/rest\/services\/public\/SurveyorFS\/MapServer\/2\";\n        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{\n        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,\n        outFields:[\"*\"]\n        });\n\n        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5]))); \n        map.addLayer(featureLayer);\n        featureLayer.selectFeatures.clear;\n        break;          \n\n    case 'contSel': \n        searchType=\"selControl2\";\n        document.getElementById('survSel').checked = false;\n        featureLayerUrl = \"http:\/\/slcarcgisdev1\/SLCOGIS\/rest\/services\/public\/SurveyorFS\/FeatureServer\/0\";\n        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{\n        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,\n        outFields:[\"*\"]\n        });\n        featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));\n        map.addLayer(featureLayer);\n        featureLayer.selectFeatures.clear;\n        break;\n    }\n } else\n  {\n\n    switch (el.id)\n    {\n    case 'survSel': \n        document.getElementById('contSel').checked = true;\n        break;\n\n    case 'contSel': \n        document.getElementById('survSel').checked = true;\n        break;\n    }\n  }\n }\n\n     var items = dojo.map(features,function(feature){\n     return feature.attributes;\n});\n\n\n    \/\/add selected features to the grid\n    if (document.getElementById(\"contSel\").checked){\n        showPointNameGrid();\n\n\n    } else if(document.getElementById(\"survSel\").checked){\n        showSurveysNameGrid();\n\n    }\n    var items = dojo.map(features,function(feature){\n      return feature.attributes;\n    });\n  if(document.getElementById(\"contSel\").checked){\n    \/\/showPointNameGrid();\n      searchType=\"selControl2\";\n    var data = {identifier:\"POINT_NAME\", items:items};\n    var store = new dojo.data.ItemFileReadStore({data:data});\n    var grid = dijit.byId('grid4'); \n    grid.setStore(store);\n   featureLayer.selectFeatures.clear;\n\n\n  } else if (document.getElementById(\"survSel\").checked){\n     \/\/showSurveysNameGrid();\n      searchType=\"selSurveys2\";\n    var data = {identifier:\"doc_id\", items:items};\n    var store = new dojo.data.ItemFileReadStore({data:data});\n    var grid = dijit.byId('grid5'); \n    grid.setStore(store);\n    featureLayer.selectFeatures.clear;\n\n  }     \n  });\n\n  }\n\n  \/\/Zoom to the parcel when the user clicks a row \n  function onRowClickHandler(evt){ \n  if (searchType == \"selControl2\") { \n        var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME; \n        var selectedTaxLot; \n    alert(featureLayer.name);\n         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); \n        dojo.forEach(map.graphics.graphics,function(graphic){ \n          if((feature.attributes) &amp;&amp; feature.attributes.POINT_NAME === clickedTaxLotId){ \n            selectedTaxLot = graphic;\n            graphic.setSymbol(highlightSymbol);\n            \/\/added this part to build infotemplate\n             map.infoWindow.setTitle(graphic.getTitle()); \n             map.infoWindow.setContent(graphic.getContent());\n\n\n            return; \n          } \n    }); \n\n        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {\n        map.centerAndZoom(taxLotExtent, 11)\n        var sp = map.toScreen(selectedTaxLot.geometry);\n\n        } else {\n\n        var taxLotExtent = selectedTaxLot.geometry.getExtent(); \n        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());\n        var mappoint = map.toMap(screenpoint);\n        map.setExtent(taxLotExtent,true);\n        map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));\n        }\n\n\n\n\n} else if (searchType == \"selSurveys2\") { \n        var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N; \n        var selectedTaxLot; \n    alert(featureLayer.name);\n         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); \n        dojo.forEach(map.graphics.graphics,function(graphic){ \n          if((graphic.attributes) &amp;&amp; graphic.attributes.DOCUMENT_N === clickedTaxLotId){ \n\n            selectedTaxLot = graphic;\n            graphic.setSymbol(highlightSymbol);\n            \/\/added this part to build infotemplate\n             map.infoWindow.setTitle(graphic.getTitle()); \n             map.infoWindow.setContent(graphic.getContent());\n\n            return; \n          } \n    }); \n\n        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {\n        map.centerAndZoom(taxLotExtent, 11)\n        var sp = map.toScreen(selectedTaxLot.geometry);\n\n        } else {\n\n        var taxLotExtent = selectedTaxLot.geometry.getExtent(); \n        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());\n        var mappoint = map.toMap(screenpoint);\n        map.setExtent(taxLotExtent,true);\n        map.infoWindow.show(taxLotExtent.getCenter(),    map.getInfoWindowAnchor(screenpoint));\n        }\n\n\n}\n\n}  \n \n<\/code><\/pre>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3041","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3041"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3041\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}