Locator results to data grid / table?

[ChrisBuckmaster1]

Hi


I am working with a locator but would prefer the results to be outputted to a data grid / table for the user to select their desired address (if more than 1 is returned).

Cannot seem to find any samples that have implemented this, not too sure if there is anyone out there who has coded something like this?

I was thinking of using a dojo data grid (much like the find task sample) but cannot figure out how to pass the candidate results into a grid.

Any help? 🙂


Thanks

[ManishkumarPatel]

Were you able to find any solution to this?

[ChrisBuckmaster1]

Hi Manish,

I only recently posted this (around an hour ago) so am still waiting for a response 🙂

[HemingZhu]

Hi Manish,

I only recently posted this (around an hour ago) so am still waiting for a response 🙂

There is a ESRI sample which binding an identify results to a data grid(http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map_datagrid.html). The process is pretty similar. 1. map each of your AddressCandidate.attributes to items(an array). 2. Create a data object that contains items. 3. Create data store and bind to grid.
Note: When you create a locator in ArcMap Desktop, check the "Reference data ID" checkbox under Output Fields. In doing so, you can assign this Reference data ID as identifier in your data object. Later on when interact your datagrid and map, you can use this ID to connect the address points on the map with the records on the datagrid. Hope my explaination makes sense to you.

[ChrisBuckmaster1]

Hi Heming

Thanks for your response.

Yes I was looking at this sample and wondering how it can be implemented for a locator.

I was confused as to how you would list the data in the grid particularly with the field headings as they are defined differently.

[HemingZhu]

Hi Heming

Thanks for your response.

Yes I was looking at this sample and wondering how it can be implemented for a locator.

I was confused as to how you would list the data in the grid particularly with the field headings as they are defined differently.

If you look at this sample locator: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer,
AddressCandidate's attributes are came from Candidate Fields(or InterSection Candidate Fields) depending upon your address and outFields in addressToLocations(address, outFields?, callback?, errback?). So when you binding addresscandidate to data store, its fileds will automate populate in the data grid except for the identifier field which should be unique and explicitly specify(as i suggested using Reference data ID field(whichever that name is)....

[ChrisBuckmaster1]

Thanks Heming that was very helpful, I have now managed to get my candidate addresses into the data grid with my desired fields!

Using the find sample I would now like to be able to zoom to each individual feature from the grid but am having some problems here.

In the original find sample the variable 'graphic' is defined as the result.feature of the find task which has attributes assigned to it already.

I have assigned attributes to the 'graphic' variable in my code but it does not seem to work.

Is there anything obviously wrong with the below code as to why it might not zoom to each address point?


//CODE

function locate() {
        map.graphics.clear();
  var searchResult = dijit.byId("addressSearch").value;
        var address = {"Single Line Input": searchResult};
  locator.addressToLocations(address,["Ref_ID, Score, Match_addr"]);
      }

      function showResults(candidates) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setColor(new dojo.Color([153,0,51,0.75]));

  //create array of attributes
        var items = dojo.map(candidates,function(candidate){
            var geom = esri.geometry.Point(candidate.location);
   var attributes = {IDENT:candidate.attributes.Ref_ID};
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;
        });

       var data = {
          identifier: "Ref_ID",  //This field needs to have unique values
          label: "Ref_ID", //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);
      }
  
   function onRowClickHandler(evt){
        var clickedAddressId = grid.getItem(evt.rowIndex).Ref_ID;
        var selectedAddress;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
            selectedAddress = graphic;
            return;
          }
        });
        map.centreAndZoom(selectedAddress,7);
      }

//FINISH CODE

[HemingZhu]

Thanks Heming that was very helpful, I have now managed to get my candidate addresses into the data grid with my desired fields!

Using the find sample I would now like to be able to zoom to each individual feature from the grid but am having some problems here.

In the original find sample the variable 'graphic' is defined as the result.feature of the find task which has attributes assigned to it already.

I have assigned attributes to the 'graphic' variable in my code but it does not seem to work.

Is there anything obviously wrong with the below code as to why it might not zoom to each address point?


//CODE

function locate() {
        map.graphics.clear();
  var searchResult = dijit.byId("addressSearch").value;
        var address = {"Single Line Input": searchResult};
  locator.addressToLocations(address,["Ref_ID, Score, Match_addr"]);
      }

      function showResults(candidates) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setColor(new dojo.Color([153,0,51,0.75]));

  //create array of attributes
        var items = dojo.map(candidates,function(candidate){
            var geom = esri.geometry.Point(candidate.location);
   var attributes = {IDENT:candidate.attributes.Ref_ID};
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;
        });

       var data = {
          identifier: "Ref_ID",  //This field needs to have unique values
          label: "Ref_ID", //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);
      }
  
   function onRowClickHandler(evt){
        var clickedAddressId = grid.getItem(evt.rowIndex).Ref_ID;
        var selectedAddress;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
            selectedAddress = graphic;
            return;
          }
        });
        map.centreAndZoom(selectedAddress,7);
      }

//FINISH CODE

Replace the statement: var attributes = {IDENT:candidate.attributes.Ref_ID}
with var attributes = candidate.attributes and tried again.

[ChrisBuckmaster1]

Hi Heming

I put an alert in the onrowclick function to write the attributes of graphic just to see what I would get.

Before it was just saying undefined but it now successfully shows the Ref_ID value of the row I clicked on which means the code you provided has worked.

The problem now is I do not have the X,Y coordinates to use in the attributes to do a zoom to point (I do not have X,Y coordinates available in the candidate fields to use so will have to use the candidate.location values somehow).

[HemingZhu]

Hi Heming 

I put an alert in the onrowclick function to write the attributes of graphic just to see what I would get. 

Before it was just saying undefined but it now successfully shows the Ref_ID value of the row I clicked on which means the code you provided has worked. 

The problem now is I do not have the X,Y coordinates to use in the attributes to do a zoom to point (I do not have X,Y coordinates available in the candidate fields to use so will have to use the candidate.location values somehow).

dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
selectedAddress = graphic;
return;
}
});
//map.centreAndZoom(selectedAddress,7);
map.centreAndZoom(selectedAddress.geometry,7);
}