Directions Widget WAB Customize

954
3
Jump to solution
09-06-2017 01:14 AM
AlbertoLópez
New Contributor III

Hello;

I have to make some modifications to the WAB 2.3  Developer Edition Directions widget and I do not know if it is possible.

The URL of the route tasks web service is set into  the options parameter of the constructor of the directions class:

 var options = {

...

routeTaskUrl: this.config.routeTaskUrl,

...

} 

this._dijitDirections = new Directions (options, directionContainer);

 

After of  the creation of the widget with this._dijitDirections.startup (); the travel modes select element is displayed and you can select diferents travel models: driving distance, driving time, rural driving time, etc.

 

I need to change the URL of the Route Task service depending on which travel mode has been selected in the select element, but I do not know if it is possible because the ULR is set into the widget before the select element is displayed.

Any ideas?.

Best regards.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Alberto,

   I have not tested this but this should work in theory (added lines 64 thru 69 in the Widget.js):

      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 options = {
            map: this.map,
            searchOptions: this.config.searchOptions,
            routeParams: routeParams,
            routeTaskUrl: this.config.routeTaskUrl,
            dragging: true,
            showClearButton: true,
            mapClickActive: true
          };

          //set units on root for API-3.20
          if(this.config.routeOptions && this.config.routeOptions.directionsLengthUnits) {
            options.directionsLengthUnits = this.config.routeOptions.directionsLengthUnits;
          }
          if(this.config.trafficLayerUrl){
            this._trafficLayer = new ArcGISDynamicMapServiceLayer(this.config.trafficLayerUrl);
            options.trafficLayer = this._trafficLayer;
            options.traffic = true;
          }else{
            options.traffic = false;
            options.showTrafficOption = false;
          }

          this.setDoNotFetchTravelModes(options).then(lang.hitch(this, function() {
            html.empty(this.directionController);
            var directionContainer = html.create('div', {}, this.directionController);
            //Only init Directions dijit when we can access the route task url.
            esriRequest({
              url: options.routeTaskUrl,
              content: {
                f: 'json'
              },
              handleAs: 'json',
              callbackParamName: 'callback'
            }).then(lang.hitch(this, function() {
              this._dijitDirections = new Directions(options, directionContainer);
              //html.place(this._dijitDirections.domNode, this.directionController);
              this._dijitDirections.startup();
              console.info(this._dijitDirections);

              this.own(on(this._dijitDirections, 'load', lang.hitch(this, this._onDirectionsActivate)));

              this.own(on(this._dijitDirections._travelModeSelector, 'change', lang.hitch(this, function(evt){
                //Now destroy the this._dijitDirections
                this.config.routeTaskUrl = "ypur new url";
                this.destroy();
                this.startup();
              })));
......

:

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Alberto,

   I have not tested this but this should work in theory (added lines 64 thru 69 in the Widget.js):

      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 options = {
            map: this.map,
            searchOptions: this.config.searchOptions,
            routeParams: routeParams,
            routeTaskUrl: this.config.routeTaskUrl,
            dragging: true,
            showClearButton: true,
            mapClickActive: true
          };

          //set units on root for API-3.20
          if(this.config.routeOptions && this.config.routeOptions.directionsLengthUnits) {
            options.directionsLengthUnits = this.config.routeOptions.directionsLengthUnits;
          }
          if(this.config.trafficLayerUrl){
            this._trafficLayer = new ArcGISDynamicMapServiceLayer(this.config.trafficLayerUrl);
            options.trafficLayer = this._trafficLayer;
            options.traffic = true;
          }else{
            options.traffic = false;
            options.showTrafficOption = false;
          }

          this.setDoNotFetchTravelModes(options).then(lang.hitch(this, function() {
            html.empty(this.directionController);
            var directionContainer = html.create('div', {}, this.directionController);
            //Only init Directions dijit when we can access the route task url.
            esriRequest({
              url: options.routeTaskUrl,
              content: {
                f: 'json'
              },
              handleAs: 'json',
              callbackParamName: 'callback'
            }).then(lang.hitch(this, function() {
              this._dijitDirections = new Directions(options, directionContainer);
              //html.place(this._dijitDirections.domNode, this.directionController);
              this._dijitDirections.startup();
              console.info(this._dijitDirections);

              this.own(on(this._dijitDirections, 'load', lang.hitch(this, this._onDirectionsActivate)));

              this.own(on(this._dijitDirections._travelModeSelector, 'change', lang.hitch(this, function(evt){
                //Now destroy the this._dijitDirections
                this.config.routeTaskUrl = "ypur new url";
                this.destroy();
                this.startup();
              })));
......

:

RobertScheitlin__GISP
MVP Emeritus

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

RufusBobcat
New Contributor II

Perhaps this is not entirely related to the original post, but I am going to attempt to piggyback on this:

Are you able to limit which modes of travel are available on the directions widget?

0 Kudos