Custom Images in Direction Widget

[SivaramKrishnan2]

Hello,

I'm using the Directions widget present in javascript api 3.23, I'm getting the result, but i want to place my custom images for the stops.

Here i'm trying to change the red point to blue point for the destination stop by using the mentioned styles, but it is not working 

Can anyone help me out to put the custom images for the destination stops?

Regards

Siva

[RobertScheitlin__GISP]

Siva,

   You should use:

.esriDMTStopDestination .esriRouteIcon {
    background-image: url(/images/bluePoint.png) !important;
}‍‍‍‍‍‍‍‍‍‍‍‍

[SivaramKrishnan2]

Robert

Thank you for the reply.

Even i put the important keyword over there it is not showing the custom image.

It will be very much helpful for me if you could provide exactly which style is changing the image of the destination stop.

Thanks

Siva

[RobertScheitlin__GISP]

Siva,

  Here is what I tested and it worked for me. This is configure for the bluePoint.png to be in this directory

[install dir]\server\apps\[app#]\widgets\Directions\images

and the css rule to be at the end of the [install dir]\server\apps\[app#]\widgets\Directions\css\style.css file.

.simpleDirections .esriStopDestination .esriStopIcon {
  background-image: url(../images/bluePoint.png);
}‍‍‍‍‍‍

[SivaramKrishnan2]

Robert,

Thank you for this snippet.

I can change the image in one of the stops as mentioned in the below screenshot

there that location 3 is having blue pin in the widget but red pin remains unchanged in the map.

it will be very much helpful for me if you could provide the area where i should make changes to get the desired blue pin on the direction showing within the map too.

Regards

Siva

[RobertScheitlin__GISP · Accepted solution]

Siva,

   For that you have to modify the Widget.js file (lines 5, 9, 31, 32 and 41). Also add this css rule with the earlier one:

.esriDMTStopDestination .esriRouteIcon {
  background-image: url(../images/bluePoint.png);
}‍‍‍

...
    'dojo/Deferred',
    'dojo/promise/all',
    'jimu/portalUtils',
    'esri/symbols/PictureMarkerSymbol'
  ],
  function(declare, BaseWidget, Directions, Locator, RouteParameters, esriRequest, graphicsUtils,
    ArcGISDynamicMapServiceLayer, on, lang, html, array, dojoConfig, Deferred, all, portalUtils,
    PictureMarkerSymbol) {
...
      startup: function(){
        this.inherited(arguments);
        this.portal = portalUtils.getPortal(this.appConfig.portalUrl);

        this._preProcessConfig().then(lang.hitch(this, function(){
          var routeParams = new RouteParameters();
          var routeOptions = this.config.routeOptions;
          if(routeOptions){
            if(routeOptions.directionsLanguage){
              routeParams.directionsLanguage = routeOptions.directionsLanguage;
            }
            else{
              routeParams.directionsLanguage = dojoConfig.locale || "en_us";
            }
            routeParams.directionsLengthUnits = routeOptions.directionsLengthUnits;
            routeParams.directionsOutputType = routeOptions.directionsOutputType;
            if(routeOptions.impedanceAttribute){
              routeParams.impedanceAttribute = routeOptions.impedanceAttribute;
            }
          }
          var toSym = new PictureMarkerSymbol('https://js.arcgis.com/3.23/esri/dijit/images/Directions/bluePoint.png', 21, 29);
          toSym.setOffset(0,12);
          var options = {
            map: this.map,
            searchOptions: this.config.searchOptions,
            routeParams: routeParams,
            routeTaskUrl: this.config.routeTaskUrl,
            dragging: true,
            showClearButton: true,
            mapClickActive: true,
            toSymbol: toSym
          };
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[SivaramKrishnan2]

Robert

Thank you so much, it is working for me.

Regards

Siva