Geocoder - render a point on the map once result is selected

[KarlBarker-Ottley]

Hi,

I'm trying to get a graphic to render once a result has been selected from the new geocoder functionality in the latest Flex API. When the result is selected, the map pans to it's location - I would like to have a point shown where this is?

Any help scripting this would be appreciated.

Thanks, Karl

[IvanBespalov]

This example "Geocode an address" and function onResult(), where map pans to first candidate in results.

the same sample with some changes and function showCandidateOnMap()

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags">
 <s:layout>
  <s:VerticalLayout paddingBottom="15"
        paddingLeft="10"
        paddingRight="10"
        paddingTop="15"/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.LocatorEvent;
   import com.esri.ags.events.MapMouseEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.tasks.supportClasses.AddressCandidate;
   import com.esri.ags.tasks.supportClasses.AddressToLocationsParameters;
   import com.esri.ags.utils.WebMercatorUtil;
   
   import flashx.textLayout.conversion.TextConverter;
   
   import mx.collections.ArrayList;
   import mx.controls.Alert;
   import mx.rpc.AsyncResponder;
   import mx.utils.StringUtil;
   
   import spark.events.GridEvent;
   
   [Bindable]
   private var lastFoundAddreses:ArrayList = new ArrayList();
   
   private function onMapClick(event:MapMouseEvent):void
   {
    locateTask.locationToAddress(event.mapPoint, 100);
   }
   
   private function onLocationToAddressComplete(event:LocatorEvent):void
   {
    var candidate:AddressCandidate = event.addressCandidate;
    
    if (candidate)
    {
     showCandidateOnMap(candidate);
    }
    else
    {
     Alert.show("This location does not have a known street address.");
    }
   }
   
   private function doFind():void
   {
    var params:AddressToLocationsParameters = new AddressToLocationsParameters();
    params.address = { "StreetName": onelineaddress.text, City: "Helsinki", Country: "Finland" }; 
    params.outFields = ["*"]; //all
    // Use outFields to get back extra information
    // The exact fields available depends on the specific Locator used.
    locateTask.outSpatialReference = myMap.spatialReference;
    locateTask.addressToLocations(params, new AsyncResponder(onResultFunction, onFaultFunction));
    function onResultFunction(candidates:Array, token:Object = null):void
    {
     if (candidates.length > 0)
     {
      lastFoundAddreses.removeAll();
      var infoHtmlString:String = "";
      for (var indexer:int = 0; indexer < candidates.length; indexer++)
      {
       var nextCandidate:AddressCandidate = candidates[indexer];
       if (nextCandidate && nextCandidate.address && nextCandidate.location && nextCandidate.score && nextCandidate.score > 0)
       {
        var obj:Object = new Object();
        obj.candidate = nextCandidate;
        obj.address = StringUtil.substitute("{0}; score is >>> {1}", nextCandidate.address.toString(), nextCandidate.score.toString());
        obj.coords = StringUtil.substitute("X={0}, Y={1}", nextCandidate.location.x.toFixed(0), nextCandidate.location.y.toFixed(0));
        obj.geometry = nextCandidate.location;
        lastFoundAddreses.addItem(obj);
       }
      }
      var addressCandidate:AddressCandidate = candidates[0];
      showCandidateOnMap(addressCandidate);
     }
     else
     {
      Alert.show("Sorry, couldn't find a location for this address"
       + "\nAddress: " + onelineaddress.text);
     };
    }
    
    function onFaultFunction(info:Object, token:Object = null):void
    {
     Alert.show("Failure: \n" + info.toString());
    }
   }
   
   private function showCandidateOnMap(candidate:AddressCandidate):void
   {
    var address:Object = candidate.address;
    var candidateMapPoint:MapPoint = candidate.location;
    if (candidateMapPoint.spatialReference.wkid != myMap.spatialReference.wkid)
    {
     candidateMapPoint = WebMercatorUtil.geographicToWebMercator(candidate.location) as MapPoint;
    }
    var myGraphic:Graphic = new Graphic(candidateMapPoint, mySymbol, address);
    myGraphic.id = "graphic";
    myGraphicsLayer.clear();
    myGraphicsLayer.add(myGraphic);
    var htmlText:String = "<b>Address:</b><br>";
    if (address.hasOwnProperty("Address"))
    {
     htmlText += address.Address.toString() + "<br>";
    }
    else if (address.hasOwnProperty("StreetName"))
    {
     htmlText += address.StreetName.toString() + "<br>";
    }
    else
    {
     htmlText += address.toString() + "<br>";
    }
    textArea.textFlow = TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT);
    myMap.infoWindow.label = "Geocode an Address";
    myMap.infoWindow.show(myGraphic.geometry as MapPoint);
    
    myMap.centerAt(myGraphic.geometry as MapPoint);
    
    if (lastFoundAddreses != null)
    {
     var updatedLastFoundAddress:ArrayList = new ArrayList();
     for (var ind:int = 0; ind < lastFoundAddreses.length; ind++)
     {
      var obj:Object = lastFoundAddreses.getItemAt(ind);
      var objPoint:MapPoint = obj.geometry;
      var dX:Number = objPoint.x-candidateMapPoint.x;
      var dY:Number = objPoint.y-candidateMapPoint.y;
      var half:Number = 0.5;
      var distance:Number = Math.pow((Math.pow(dX, 2) + Math.pow(dY, 2)), half);
      var distanceToPoint:String = StringUtil.substitute(" ~ {0} m", distance.toFixed(0));
      var updatedObj:Object = new Object();
      updatedObj.address = obj.address;
      updatedObj.distance = obj.distance;
      updatedObj.distance2 = distanceToPoint;
      updatedObj.geometry = obj.geometry;
      updatedObj.coords = obj.coords;
      updatedObj.candidate = obj.candidate;
      
      updatedLastFoundAddress.addItem(updatedObj);
     }
     lastFoundAddreses.removeAll();
     lastFoundAddreses.addAll(updatedLastFoundAddress);
    }
   }
   
   
   protected function myMap_mouseMoveHandler(event:MouseEvent):void
   {
    var currentMousePoint:MapPoint = myMap.toMapFromStage(event.stageX, event.stageY);
    if (lastFoundAddreses != null)
    {
     var updatedLastFoundAddress:ArrayList = new ArrayList();
     for (var ind:int = 0; ind < lastFoundAddreses.length; ind++)
     {
      var obj:Object = lastFoundAddreses.getItemAt(ind);
      var objPoint:MapPoint = obj.geometry;
      var dX:Number = objPoint.x-currentMousePoint.x;
      var dY:Number = objPoint.y-currentMousePoint.y;
      var half:Number = 0.5;
      var distance:Number = Math.pow((Math.pow(dX, 2) + Math.pow(dY, 2)), half);
      var updatedDistance:String = StringUtil.substitute("~ {0} m", distance.toFixed(0));
      var updatedObj:Object = new Object();
      updatedObj.address = obj.address;
      updatedObj.geometry = obj.geometry;
      updatedObj.coords = obj.coords;
      updatedObj.distance2 = obj.distance2;
      updatedObj.distance = updatedDistance;
      updatedObj.candidate = obj.candidate;
      
      updatedLastFoundAddress.addItem(updatedObj);
     }
     lastFoundAddreses.removeAll();
     lastFoundAddreses.addAll(updatedLastFoundAddress);
    }
   }
   
   
   protected function lastFoundGrid_gridClickHandler(event:GridEvent):void
   {
    if (lastFoundGrid.selectedItem != null)
    {
     var selectedCandidate:AddressCandidate = lastFoundGrid.selectedItem.candidate as AddressCandidate;
     if (selectedCandidate != null)
     {
      showCandidateOnMap(selectedCandidate);
     }
    }
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:Locator id="locateTask"
       concurrency="last"
       locationToAddressComplete="onLocationToAddressComplete(event)"
       url="http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_EU/GeocodeServer"/>
  <esri:SimpleMarkerSymbol id="mySymbol"
         alpha="0.5"
         color="0xFF0000"
         size="19"
         style="circle">
   <esri:SimpleLineSymbol width="2"/>
  </esri:SimpleMarkerSymbol>
 </fx:Declarations>
 
 <s:Label fontSize="12"
    fontWeight="bold"
    text="Click on map to obtain the address of a location."/>
 <esri:Map id="myMap"
     mapClick="onMapClick(event)"
     mouseMove="myMap_mouseMoveHandler(event)"
     openHandCursorVisible="false">
  <esri:extent>
   <esri:Extent xmin="2730524.567128713" xmax="2826835.222767905" ymin="8425522.38792159" ymax="8477346.69309887"/>
  </esri:extent>
  <esri:infoWindowContent>
   <s:TextArea id="textArea"
      editable="false"
      heightInLines="4"/>
  </esri:infoWindowContent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="myGraphicsLayer"/>
 </esri:Map>
 
 <s:Panel width="100%"
    top="5"
    horizontalCenter="0"
    title="Find an address">
  <s:layout>
   <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
  </s:layout>
  <!-- Single line geocode -->
  <s:TextInput id="onelineaddress"
      width="95%"
      enter="doFind()"
      text="Koskelantie 5"/>
  <s:Button click="doFind()" label="Find Address"/>
  <s:DataGrid id="lastFoundGrid"
     width="100%"
     gridClick="lastFoundGrid_gridClickHandler(event)"
     dataProvider="{lastFoundAddreses}">
   <s:columns>
    
    <s:ArrayList>
     
     <s:GridColumn dataField="address" headerText="Address"/>
     
     <s:GridColumn dataField="distance" headerText="Distance to cursor" width="200"/>
     
     <s:GridColumn dataField="distance2" headerText="Distance to last clicked" width="200"/>
     
     <s:GridColumn dataField="coords" headerText="Coordinates" width="200"/>   
     
     
    </s:ArrayList>
    
   </s:columns>
  </s:DataGrid>
 </s:Panel>
</s:Application>

P.S. SDK 4.6, API 3.1 release 12.12.2012

[IvanBespalov · Accepted solution]

For new geocoder component, you must listen its events, to access results.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags"
      pageTitle="Geocoder Component Sample">
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.GeocoderEvent;
   import com.esri.ags.geometry.Geometry;
   import com.esri.ags.symbols.SimpleFillSymbol;
   import com.esri.ags.symbols.SimpleMarkerSymbol;
   import com.esri.ags.symbols.Symbol;
   
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;

   protected function onGeocoderResultSelected(event:GeocoderEvent):void
   {
    var symbol:Symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, 0xFF0000);
    var gr:Graphic = new Graphic(event.result.geometry, symbol);
    gr.toolTip = event.result.label + "\n(" + event.result.sourceName + ")";
    gLayer.clear();
    gLayer.add(gr);
   }

   protected function onGeocoderFault(event:FaultEvent):void
   {
    Alert.show(event.message.toString(), "Geocoder fault");
   }

   protected function onGeocoderSearchComplete(event:GeocoderEvent):void
   {
    // do something
   }

  ]]>
 </fx:Script>
 
 <esri:Map id="map">
  <esri:extent>
   <esri:WebMercatorExtent xmin="-20119163" ymin="1160734" xmax="-1333999" ymax="10416341"/>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer/>
  <esri:GraphicsLayer id="gLayer" />
 </esri:Map>
 
 <esri:Geocoder width="300" height="30"
       top="20"
       horizontalCenter="0"
       map="{map}"
       resultSelected="onGeocoderResultSelected(event)"
       fault="onGeocoderFault(event)"
       searchComplete="onGeocoderSearchComplete(event)" />
</s:Application>

P.S. SDK 4.6, API 3.2 release 19.03.2013