How to Clear Barriers in Direction Widget ?

[SivaramKrishnan2]

Hi

When i tried the clear button available in the Direction widget of WAB, it is clearing all the Graphics (Routes and Barriers). But i want to clear only the Barriers, is there any possibilities to do so. If yes, please help me on this.

before clicking the clear button(with barriers)

After clicking the clear button for one time. all the graphics has gone, but i want to clear only barriers.

Thanks & Regards

Siva

[RobertScheitlin__GISP · Accepted solution]

Siva,

   Here is what you need to customize the directions widget to do that:

In the Widget.js (lines 3-17 need to be added to the _onDirectionsActivate)

      _onDirectionsActivate: function () {
        //Add the clear barrier button
        require(['dojo/query', 'dojo/dom-construct'], lang.hitch(this, function(query,domConstruct){
          var clearLink = query('.esriStopsAddDestination')[0];
          var clearBarLink = domConstruct.create('div', {
            'class':'esriClearBarrierButton esriDirectionsButton esriDirectionsTabButton',
            title: 'Clear Barriers',
            style: 'display: inline-block;'
          }, clearLink);
          on(clearBarLink, 'click', lang.hitch(this, function(){
            if(this._dijitDirections.routeParams.polylineBarriers){
              this._dijitDirections.routeParams.polylineBarriers.features = [];
            }
            this._dijitDirections._polylineBarriersLayer.clear();
            this._dijitDirections.getDirections();
          }));
        }));

        if (this.config.defaultLocations &&
          this.config.defaultLocations.length && this.config.defaultLocations.length > 0 &&
          false === this._isInitPresetStopsFlag) {

          this._isInitPresetStopsFlag = true;
          this._dijitDirections.addStops(this.config.defaultLocations);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the css/style.css add this rule at the very bottom of that file:

.jimu-widget-directions .simpleDirections .esriClearBarrierButton {
  background-image: url(../../../jimu.js/css/images/rubbish_bin.png);
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}‍‍‍‍‍

[SivaramKrishnan2]

Robert,

Thank you so much for the response,

It is working without any issue at my end when i implement this code snippet into my application.

Regards

Siva