Select to view content in your preferred language

Need to show route with different color for Distance Covered and Remaining

907
5
09-01-2022 06:24 AM
bkolliboina
Emerging Contributor

Hi,

Need to show the route with two different colors for distance covered and distance remaining on map, but facing some challenges to show multi colors on route.

Below sample code I am using  with RouteLayer,

defaultSymbols: {
    directionLines: {
       type: "simple-line",
       color: [256, 256, 256, 256],
       width: 3,
      cap: "round",
       join: "round"
    },
    directionPoints: null,
    routeInfo: null,

}

If we have any sample CODE/URL/Approach, please suggest.

Thanks in advance.

0 Kudos
5 Replies
Noah-Sager
Esri Regular Contributor

Hi @bkolliboina, are you trying to update the route symbology and the user travels across the route? Or are you just having issues changing the symbology for the route line?

In this blog, there is an example of how to change the symbology for the route line: https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/changing-directions/

 

0 Kudos
bkolliboina
Emerging Contributor

Hi @Noah-Sager , 

Thanks for the quick response. 

I am trying to update the route symbology and the user travels across the route. And need to show the route with two different colors.

1. Completed distance (White Color)

2. Remaining distance (Orange Color)

In the give below, I am bale to show only one color but needs to show two different colors

bkolliboina_1-1662044730636.png

 

 

0 Kudos
EdwardSheehan
New Contributor

Could you use 2 route layers. 1 from the original point to where you are currently and 1 from where you are currently to the destination point?

0 Kudos
Noah-Sager
Esri Regular Contributor

Hmm, I'm not sure how possible this is currently. You have a way to track the user and get their location along the route? Or is this app to be used on a mobile device, and you want the route symbology to update in real time?

0 Kudos
bkolliboina
Emerging Contributor

This is for web application not mobile app and I can get the current location along with route from API.

0 Kudos