Select to view content in your preferred language

Help Zoom to selected features in JS

6524
4
09-01-2010 01:36 PM
AlejandroMorales
Emerging Contributor
Hi guys, I was wondering If anyone of you know how to do this...

I have a query results, I want to make zoom to that query results, I think the properly name of it is Zoom to selected features ... please if anyone knows how to do it help me

By the way: In the results I told you about, I receive the X,Y, of what I'm trying to zoom.
Any code for it? in JavaScript

Alex,
0 Kudos
4 Replies
AndrewClark
Deactivated User
See esri.graphicsExtent Javascript API reference (see esri.Namespace methods)



Basically, the returned extent can then be used to set the map extent (see this)


Hi guys, I was wondering If anyone of you know how to do this...

I have a query results, I want to make zoom to that query results, I think the properly name of it is Zoom to selected features ... please if anyone knows how to do it help me

By the way: In the results I told you about, I receive the X,Y, of what I'm trying to zoom.
Any code for it? in JavaScript

Alex,
0 Kudos
BarryGuidry
Regular Contributor
For the life of me, I cannot figure this out. I have a function in my Javascript code (below snippet) that does select features returned from search, and will even zoom to single (selected) record rows in the datagrid, but I'd like to have it zoom to all selected features first (from the search). The current functionality is derived from the example here. Sorry I cannot include all of the code, due to reasons for restrictions, but think the included code should contain all needed for the appropriate function. I imagine it should be a simple addition to the code, but I have been researching how to do it, am not a programmer, and could use some help please.
dojo.connect(grid, "onRowClick", onRowClickHandler);

function doFind() { 
        //Set the search text to the value in the box 
        findParams.searchText = dojo.byId("BUILDING").value; 
  esri.show(datagrid); //shows the entire datagrid ContentPane upon selecting the "Search" button
  dojo.style(dojo.byId("map"), "height", "78%"); //resizes the map (center) pane to manually fit
        findTask.execute(findParams,showResults); 
      } 
 
      function showResults(results) { 
        //This function works with an array of FindResult that the task returns 
        map.graphics.clear(); 
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5])); 
 
        //create array of attributes 
        var items = dojo.map(results,function(result){ 
          var graphic = result.feature; 
          graphic.setSymbol(symbol); 
          map.graphics.add(graphic); 
          return result.feature.attributes; 
        }); 
   
        //Create data object to be used in store 
        var data = { 
          identifier: "BUILDING",  //This field needs to have unique values 
          label: "BUILDING", //Name field for display. Not pertinent to a grid but may be used elsewhere. 
          items: items 
        }; 
 
         //Create data store and bind to grid. 
        store = new dojo.data.ItemFileReadStore({ data:data }); 
        var grid = dijit.byId('grid'); 
        grid.setStore(store); 
 
        //Zoom back to the initial map extent 
        map.setExtent(initExtent); 
      } 
    
      //Zoom to the parcel when the user clicks a row 
      function onRowClickHandler(evt){ 
        var clickedBuilding = grid.getItem(evt.rowIndex).BUILDING; 
        var selectedBuilding; 
  esri.hide(datagrid); //Re-hides the entire datagrid ContentPane after selecting a row in the datagrid
  dojo.style(dojo.byId("map"), "height", "98%");
 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((graphic.attributes) && graphic.attributes.BUILDING === clickedBuilding){ 
            selectedBuilding = graphic; 
            return; 
          } 
        }); 
        var BuildingExtent = selectedBuilding.geometry.getExtent(); 
        map.setExtent(BuildingExtent); 
  }
0 Kudos
JeffPace
MVP Alum
not sure if this is too late, but

you are adding all your findtask results as graphics.

Once the are added, you have an array of Graphics in a GraphicsLayer.

so

//get extent of graphicsLayer's array of graphics using esri.namespace, 
var extent = esri.graphicsExtent(map.graphics.graphics);
map.setExtent(extent, true);

0 Kudos
BarryGuidry
Regular Contributor
Yes, Jeff, we got it. Thanks.
0 Kudos