Directions Component Stops Provider

[raffia]

Hello;

I am trying to provide a "Directions from here" and ..to here functionality, so I want to use the stopProvider property in the Directions Component. I tried passing an XY from the map point, but to no success. Any sample one line of code showing how to pass the stopProver please?

Raffi

[KomanDiabate]

Hi Raffi,
Going from Robert help, I was able to implement the routing through arrayCollection and sending a list of addresses to the direction component, this is pretty cool. Thanks Robert for help and clarification on routing and directions.
I am posting the code just in case someone else need to do the same thing.

<?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"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      pageTitle="Directions component sample">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.SpatialReference;
   import com.esri.ags.components.supportClasses.DirectionsStop;
   import mx.events.FlexEvent;
   
   [Bindable]
   private var stop0:int=0;
   
   [Bindable]
   private var stop0Address:String="401 B Street, San Diego, California, 92101";
   
   protected function dir_creationCompleteHandler(event:FlexEvent):void
   {
    
    var stop:DirectionsStop = dir.stopProvider[stop0];
    stop.editable = false;
    stop.searchTerm = stop0Address;
 
    var i:int;
    var value:Object;
    var value2:Object;
    var stopCount:int=1;
     for (i=0; i<theAddress.length; i++)
     {
      value=theAddress.getItemAt(i);
      if(value.count==1)
      {
      var stop1:DirectionsStop = dir.stopProvider[1];
      //set editable
      stop1.editable = true;
      stop1.searchTerm = value.addr; 
      trace("Hello"+ value.addr);
      }      
      if(value.count>1)
      {
       stopCount+=stopCount+1;
       //trace(value.addr);
       var st:DirectionsStop = new DirectionsStop();
       st.stopId=stopCount;
       st.searchTerm = value.addr;
       dir.stopProvider.addItem(st);
      }      
     }    
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <mx:ArrayCollection id="theAddress">
   <fx:Object addr="1702 India St, San Diego, CA 92101" count="1" />
   <fx:Object addr="1123 Island Ave, San Diego, California, 92102" count="2" />
   <fx:Object addr="924 S 16th St, San Diego, California, 92102" count="3" />
   <fx:Object addr="2025 L St, San Diego, California, 92102" count="4" />
  </mx:ArrayCollection>
  
 </fx:Declarations>
 <s:layout>
  <s:HorizontalLayout paddingLeft="2"/>
 </s:layout>
 
 <esri:Directions width="320" height="100%"
      map="{map}"
      id="dir"
      creationComplete="dir_creationCompleteHandler(event)"
      url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/NetworkAnalysis/SanDiego/NAServer/Route"/>
 <esri:Map id="map">
  <esri:extent>
   <esri:WebMercatorExtent xmin="-13055785" ymin="3848161" xmax="-13025898" ymax="3866239"
         spatialReference="{new SpatialReference(102100)}"/>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer/>
 </esri:Map>
 
</s:Application>

[raffia]

Hello Koman and Robert, many many thanks for the posts and help.

Am still working on this on my end. We have a tiny bit different setup. We right now are using the default geocoder, but we are using our own street network for Egypt. ESRI does have a bit of coverage, but ours is a bit expanded. We will have our own geo coder service soon...anyways so I cant pass addresses to the component, just map points for now. The other thing is I want to pass one stop only and the user selects the other (for the drive To or From here functionality). I tried a few things, and each one acts up differently...this one throws "RangeError: Index '0' specified is out of bounds." at runtime

private function launchLandmarkDirections():void{
 var landmarkStopProvider = new DirectionsStop();
 landmarkStopProvider.location = landmarkMapPoint;
 var stop2:DirectionsStop = new DirectionsStop();


 trace(landmarkStopProvider.location);


 
 landmarkDirectionComponent = new Directions;
 landmarkDirectionComponent.url = "http://tela.roktech.net/arcgis/rest/services/DigitalEgypt/EGIPA_NetworkStreet/NAServer/Route";
 landmarkDirectionComponent.addEventListener(DirectionsEvent.DIRECTIONS_COMPLETE, landmarkDirectionsCompleteHandler);
 landmarkDirectionComponent.map = myMap;


 landmarkDirectionComponent.stopProvider[0] = landmarkStopProvider; 
 
}

the trace statement above gives "MapPoint[x=31.41189186200006,y=30.01863021300005,SpatialReference[wkid=4326]]"

Then when I remove the 0 index, making the stopprovider line like this

landmarkDirectionComponent.stopProvider = landmarkStopProvider;

it actually works a little, it adds a point on the map, but like it doesnt commit the value, so the geocoder is blank even though the point is placed. You have to click and drag the point and then the value commits and the geocoder gets filled. You can see this in action on the Beta app, http://www.digitaleg.com/Digital_Egypt/EGIPA/Map_English.html . besides food, click on any type, then from the list on the left select a landmark then select drive to or from, they both are identical now.

[RobertScheitlin__GISP]

Raffi,

   Don't create a new directionsStop just set the search term on the first one in the directions component.

                var stop:DirectionsStop = dir.stopProvider[0];
                stop.editable = false;
                stop.searchTerm = '31.41189186200006,30.01863021300005';

[KomanDiabate]

Wow, Great App Raffi.
Its good to know that you can just send the XY to the stop provider. One of my requirement in the future will be to capture the mobile device location and use that as a stop -- stop[0]. This is going to come handy for me also in the near future.

[raffia]

Wow, Great App Raffi.
Its good to know that you can just send the XY to the stop provider. One of my requirement in the future will be to capture the mobile device location and use that as a stop -- stop[0]. This is going to come handy for me also in the near future.

Hi Koman, thank you for your kind words...and good luck with the task on hand 🙂

[RobertScheitlin__GISP]

Raffi,

   Did that work for you? If so please mark this post as answered.

[raffia]

Raffi,

   Don't create a new directionsStop just set the search term on the first one in the directions component.

                var stop:DirectionsStop = dir.stopProvider[0];
                stop.editable = false;
                stop.searchTerm = '31.41189186200006,30.01863021300005';

Hello Robert, thank you very much for the help...

I tried it and still got the out of bounds runtime error

"RangeError: Index '0' specified is out of bounds. at mx.collections::ListCollectionView/getItemAt()
at mx.collections::ListCollectionView/http://www.adobe.com/2006/actionscript/flash/proxy::getProperty()
at Map_English/launchLandmarkDirections()
at Map_English/setLandmarkDirectionsTo()

here is the code

private function launchLandmarkDirections():void
{


 landmarkDirectionComponent = new Directions;
 landmarkDirectionComponent.url = "http://tela.roktech.net/arcgis/rest/services/DigitalEgypt/EGIPA_NetworkStreet/NAServer/Route";
 landmarkDirectionComponent.addEventListener(DirectionsEvent.DIRECTIONS_COMPLETE, landmarkDirectionsCompleteHandler);
 landmarkDirectionComponent.map = myMap;
 
 var stop:DirectionsStop = landmarkDirectionComponent.stopProvider[0];
 stop.editable = false;
 stop.searchTerm = '31.41189186200006,30.01863021300005';


}

"

[RobertScheitlin__GISP · Accepted solution]

Raffi,

   Is there a reason you are creating the Direction component programatically and not in the MXML markup? It is likely that the Directions component is not finished creating before you attempt to access it's stopprovider (timing issue).

[raffia]

Raffi,

   Is there a reason you are creating the Direction component programatically and not in the MXML markup? It is likely that the Directions component is not finished creating before you attempt to access it's stopprovider (timing issue).

That very well could be it Rober. Just most of the app uses little mxml.  Maybe I can call a function that listens to the creation complete event from the dir component and in that function assign the stop, if that doesnt work, I will try an mxml component. Thank you 🙂

[raffia]

This is great, listening to the creation complete event of the directions component did the trick. Thank you 🙂

Last brush up I need to do is that the graphic of the first stop doesn't get added until the directions are generated, I think I have to create a graphic var, but for now this is awesome.

private function launchLandmarkDirections():void
{ 
 landmarkDirectionComponent = new Directions;
 landmarkDirectionComponent.url = "http://tela.roktech.net/arcgis/rest/services/DigitalEgypt/EGIPA_NetworkStreet/NAServer/Route";
 
 
 landmarkDirectionComponent.addEventListener(DirectionsEvent.DIRECTIONS_COMPLETE, landmarkDirectionsCompleteHandler);
 landmarkDirectionComponent.map = myMap;


 
 landmarkDirectionComponent.addEventListener(FlexEvent.CREATION_COMPLETE, setUpDirections)
 
}


private function setUpDirections(event:FlexEvent):void 
{
 var stop:DirectionsStop = landmarkDirectionComponent.stopProvider[0];
 var driveString:String = new String;
 driveString = landmarkMapPoint.x + "," + landmarkMapPoint.y;
 trace(driveString);
 stop.searchTerm = driveString;
 
}