nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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).

All comments

raffia

Greetings!

To add to this thread, I am using a direct feed from a vehicle modem and just needed to use the coordinates or a MapPoint to create driving directions. Instead of using the searchTerm of the stopProvider for the coordinates, I set the location property of the stopProvider and use the searchTerm as a descriptor. This works very well.

            
// create directions from the mobile vehicles current location to the selected call.
var fromVehicle:DirectionsStop = drivingDirections.stopProvider[0];
fromVehicle.editable = false;
var vehPT:MapPoint = vehGraphic.geometry as MapPoint;
fromVehicle.location = vehPT;
fromVehicle.searchTerm = "My Current Vehicle Location...";
// now get the call point
var call:Call = ItemRenderer(event.target).data as Call;
var toLocation:DirectionsStop = drivingDirections.stopProvider[1];
toLocation.editable = false;
toLocation.searchTerm = call.address;
toLocation.location = call.geometry;
drivingDirections.getDirections();

This is great, thanks Tom

TomSellsted

   
// create directions from the mobile vehicles current location to the selected call.
var fromVehicle:DirectionsStop = drivingDirections.stopProvider[0];
fromVehicle.editable = false;
var vehPT:MapPoint = vehGraphic.geometry as MapPoint;
fromVehicle.location = vehPT;
fromVehicle.searchTerm = "My Current Vehicle Location...";
// now get the call point
var call:Call = ItemRenderer(event.target).data as Call;
var toLocation:DirectionsStop = drivingDirections.stopProvider[1];
toLocation.editable = false;
toLocation.searchTerm = call.address;
toLocation.location = call.geometry;
drivingDirections.getDirections();

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;
 
}

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 🙂

RobertScheitlin__GISP

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

Raffi,

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

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 🙂

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.

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';

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.

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>

KomanDiabate

Excellent,
Now I understand why you declare the first two stops and just instantiate the third one. I will experiment with this on Tuesday at the office and see if I can make it work using a collection of address. I appreciate your help on this.
Thanks a bunch.

RobertScheitlin__GISP

Koman,

The directions component always begins with two stops in the dataprovider so that is why I create explicit vars for those stops so that I can just manipulate them. One you have those two set then you can just add more the way I did for my third stop.

KomanDiabate

Hi Robert,
This is just brilliant. Thanks a bunch.
In my particular case, I have a list of addresses that I have to pass to the stopProvider.
I think I will have to loop the arrayCollection list and while looping add them to thestopProvider.
But I see you have explicitly name the stops(stop1, stop2 etc.) not sure if they need to be named as such in my implementation ?
I am not in front of a computer right now, but do think the logic below will work?
While looping the arrayCollection:

PseudoCde
For(var i:int=0; i<arrayCollection.length; i++)
{
      var stop:DirectionStop=new DirectionStop();
      stop.searchterm=arrayCollection.Address,
      Dir.stopProvider.aadItem(stop);
}

Not sure if I need to explicitly declare the stops such as stop1, stop2 etc:
Var stop:DirectionStop=dir.stopProvider[1];
Hope you can enlighten me on that portion.
Just love the way you put your code together, brilliant.

Thanks in bunch.

RobertScheitlin__GISP

Guys,

Here is a sample seting the stops searchTerm to be geocoded.

<?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="Directions component sample">
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.SpatialReference;
            import com.esri.ags.components.supportClasses.DirectionsStop;
            
            import mx.events.FlexEvent;
            
            protected function dir_creationCompleteHandler(event:FlexEvent):void
            {
                var stop:DirectionsStop = dir.stopProvider[0];
                stop.editable = false;
                stop.searchTerm = '1123 Island Ave, San Diego, California, 92102';
                
                var stop2:DirectionsStop = dir.stopProvider[1];
                stop2.editable = false;
                stop2.searchTerm = '924 S 16th St, San Diego, California, 92102';
                
                var stop3:DirectionsStop = new DirectionsStop();
                stop3.searchTerm = '2025 L St, San Diego, California, 92102'
                dir.stopProvider.addItem(stop3);
            }
            
        ]]>
    </fx:Script>
    
    <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>

KomanDiabate

Hi Raffi,
I started researching a bit this weekend, I came across these two ESRI docs, you may have seen these also. Maybe interesting...
They are passing xy values somehow manually to a graphic stops / featureset. I am assuming you could do the following:
If you have your xy in an arraCollection, you could loop the arrayCollection and add them directly to the graphic named stops

var stops:Graphic = new Graphic(new MapPoint(arraCollection.X, arrayCoolection.Y);
var stopsFS:FeatureSet = new FeatureSet([stops]);

// See first link

Routing task:
https://developers.arcgis.com/en/flex/guide/routing-tasks.htm

https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/supportClasses/RouteParameters.html#includeExamplesSummary

Thanks

raffia

Hello Koman;

Thanks for the post. Am planning to dive into this myself in two or three days, and will update here for sure as well.

Regards;
Raffi

KomanDiabate

Hi Robert and Raffi,
That will be so so cool. This is exactly what I am trying to do right now -- what a coincidence. I will definitely post an update if I come accross anything exciting or interesting.
Thanks.

raffia

Thank you Robert for the reply. I will give that a shot and update this post.

RobertScheitlin__GISP

Raffi,

I don't have a sample for this but the documentation says that the stopProvider is an object (ArrayCollection) of DirectionsStop objects. So just create some DirectionStop objects and add them to an array collection and pass that to the Directions component.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.