Need information on displaying routes

[androidparth90]

This is not a bug

Need some help on the below:

how to Display routes between two points using Angular + esri

I can't find any information on this over here?

Basically I need an equivalent of the below code

var directions = new Directions({
map: map,
routeTaskUrl : "https://x.x.x.x/SomeRoutePoint",
stops : facilitiesGraphicsLayer.graphics,
showOptimalRouteOption : true,
optimalRoute : true,
showClearButton : false
// --------------------------------------------------------------------
// New constuctor option and property showSaveButton added at version
// 3.17 to allow saving route. For more information see the API Reference.
// https://developers.arcgis.com/javascript/3/jsapi/directions-amd.html#showsavebutton
//
// Uncomment the line below to add the save button to the Directions widget
// --------------------------------------------------------------------
// , showSaveButton: true
},"dir");
directions.startup();

[jwasilgeo]

Looks like you're using Esri JSAPI version 3.x with Angular version 1.x, correct?

You can definitely accomplish this--no problem--and we have provided documented patterns and workflows that are highly recommended to look at if you haven't had a chance to absorb them yet:

https://arcgis.github.io/angular-esri-map-site-v1/#/patterns (also look at the sub-topic patterns pages there)

Then I'd recommend reviewing this sample for inspiration: https://arcgis.github.io/angular-esri-map-site-v1/#/examples/other-esri-modules

[androidparth]

Hi.

Thanks for your quick reply.
I am using Esri version 3.x with Angular version 4.x

I am unable to find any information on use Esri with Angular 2/4 especially when it comes to display direction routes between two points.

What I need is basically an Angular version of https://developers.arcgis.com/javascript/3/jssamples/widget_directions_basic.html

[jwasilgeo]

In that case what you’re looking for is discussed here:

• https://github.com/Esri/angular-esri-map/blob/master/README.md#status

• https://github.com/Esri/angular-esri-map/blob/master/README.md#what-about-angular-2

Ultimately “esri-loader” is what you’ll want to use to get Esri JSAPI inside of an Angular 2+ app.

When it comes specifically to routing, drawing points, and other GIS functionality, it’ll be best to rely on the official Esri docs and samples.

[androidparth90]

Hi,

Ok. I will try using the "esri-loader". The Esri docs have samples (link I shared above) but those are for pure JavaScript. Do you think those can easily be ported to Angular 2+ ?

Is there any major or drastic difference at the API levels or is the same with just a difference of names of API?
Please provide your views on the same

[andygup]

Here's an example of using esri-loader with Angular 2+ https://github.com/andygup/angular-cli-esri. This sample is in the process of being moved over to github.com/esri.

[androidparth90]

Hi Andy,

Thanks to your awesome example, I was able to load an Esri map using Angular 4.

Here is what I exactly need:

I have created an HTML page already that displays an Esri map with pre-loaded points and draws the route between pre-defined points. I have attached the same for your reference.

If you can help me convert this Esri JS API 3.x code into an Angular 2+ equivalent then that would be very helpful. I need to use the same version 3.x for project support purposes and can't move to 4.x. However, if the same is possible in 4.x then its not a problem migrating.

Thanks once again!

test.zip

[andygup]

@androidparth90 Glad the sample helped! I just took a quick glance at your code, everything you need for that app is in the 4.x API.

Directions Widget: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Directions.html

SimpleRenderer: https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html

SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html

Also, be sure to read these two handy pages on migrating from 3.x to 4.x https://developers.arcgis.com/javascript/latest/guide/migrating/index.html and https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html