topic Custom Images in Direction Widget in ArcGIS JavaScript Maps SDK Questions

Custom Images in Direction Widget

SivaramKrishnan2 — Tue, 20 Mar 2018 10:22:06 GMT

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

Re: Custom Images in Direction Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:59:39 GMT

Siva,

You should use:

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

Re: Custom Images in Direction Widget

SivaramKrishnan2 — Fri, 30 Mar 2018 05:45:01 GMT

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

Re: Custom Images in Direction Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:59:42 GMT

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

Re: Custom Images in Direction Widget

SivaramKrishnan2 — Tue, 03 Apr 2018 10:47:29 GMT

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

Re: Custom Images in Direction Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:59:45 GMT

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.

Re: Custom Images in Direction Widget

SivaramKrishnan2 — Wed, 04 Apr 2018 06:22:16 GMT

Robert

Thank you so much, it is working for me.

Regards

Siva