change Web Appbuilder map zoom slider buttons

2763
1
Jump to solution
08-10-2015 10:54 AM
JosephRogan
New Contributor III

I am wondering show to change the map zoom slider buttons from the two  + - to the large vertical slider.  in the javascript api it was as simple as using sliderStyle: "large" in the map constructor.  I can't seem to find where I can configure this, there is no widget for it.  I am using Web AppBuilder 1.1 (Developer Edition).  Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Joseph,

  This is something that is not configurable in WAB in version 1.2 at lest you can turn the zoom slider off but there is no other configuration for it.  You can manually add the the change in the MapManager.js file, Just make this change (line 23):

      _processMapOptions: function(mapOptions) {
        if (!mapOptions) {
          return;
        }

        if(!mapOptions.lods){
          delete mapOptions.lods;
        }
        if(mapOptions.lods && mapOptions.lods.length === 0){
          delete mapOptions.lods;
        }

        var ret = lang.clone(mapOptions);
        if (ret.extent) {
          ret.extent = new Extent(ret.extent);
        }
        if (ret.center && !lang.isArrayLike(ret.center)) {
          ret.center = new Point(ret.center);
        }
        if (ret.infoWindow) {
          ret.infoWindow = new InfoWindow(ret.infoWindow, html.create('div', {}, this.mapDivId));
        }
        ret.sliderStyle = "large";
        return ret;
      },

Looks like you will have to do some css work as well as the are only accounting for the small slider.

View solution in original post

1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

Joseph,

  This is something that is not configurable in WAB in version 1.2 at lest you can turn the zoom slider off but there is no other configuration for it.  You can manually add the the change in the MapManager.js file, Just make this change (line 23):

      _processMapOptions: function(mapOptions) {
        if (!mapOptions) {
          return;
        }

        if(!mapOptions.lods){
          delete mapOptions.lods;
        }
        if(mapOptions.lods && mapOptions.lods.length === 0){
          delete mapOptions.lods;
        }

        var ret = lang.clone(mapOptions);
        if (ret.extent) {
          ret.extent = new Extent(ret.extent);
        }
        if (ret.center && !lang.isArrayLike(ret.center)) {
          ret.center = new Point(ret.center);
        }
        if (ret.infoWindow) {
          ret.infoWindow = new InfoWindow(ret.infoWindow, html.create('div', {}, this.mapDivId));
        }
        ret.sliderStyle = "large";
        return ret;
      },

Looks like you will have to do some css work as well as the are only accounting for the small slider.