Robert's LayerToggleButton Widget: how to toggle a map layer(other than basemap layers)

[AlexRocco]

Hi All

I am using WAB Developer. I just had LayerToggleButton widget added to my app. Now I want to toggle a layer Aerials_MIL1 (MapServer) , which is a map service hosted on our own server.

My question is, how do I configure this layer to show in the LayerToggleButton widget configuration? Please see attached screen. The widget config screen only has the layers from my basemap, which is hosted at ArcGIS Online.

Do I need to add this layer in mapmanager.js? Where else can I add a layer programmatically? 

In mapmanager.js, I added below but no luck.

//// ....

layer.isOperationalLayer = layerConfig.isOperationalLayer;
layer.label = layerConfig.label;
layer.icon = layerConfig.icon;
map.addLayer(layer);
//BJ Start
var streetURL = "https://atlasgis.carson.ca.us/carsonserver/rest/services/Aerials_MIL1/MapServer/0";
var streetLayer = new ArcGISDynamicMapServiceLayer(streetURL);
map.addLayer(streetLayer);

//BJ End

//// .....

[AlexRocco]

Now I can add the aerial map service layer to the LocalLayer Widget. The new question is, how do I toggle this aerial map layer(added thru LocalLayer Widget)? This new layer does not show on LayerToggleButton config.  

[RobertScheitlin__GISP · Accepted solution]

Alex,

It appears that you are adding this in the createLayer method in the MapManager.js. That function is only used if your are in a 3D App. If you are in a 2D app then you have to add it to the _show2DWebMap method and add the 'esri/layers/ArcGISDynamicMapServiceLayer' require to the MapManagers reguire array

AND

Specify your layer is an operational layer (line 80).

      _show2DWebMap: function(appConfig) {
        //should use appConfig instead of this.appConfig, because appConfig is new.
        // if (appConfig.portalUrl) {
        //   var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
        //   agolUtils.arcgisUrl = url + "/sharing/content/items/";
        // }
        if(!appConfig.map.mapOptions){
          appConfig.map.mapOptions = {};
        }
        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
        mapOptions.isZoomSlider = false;

        var webMapPortalUrl = appConfig.map.portalUrl;
        var webMapItemId = appConfig.map.itemId;
        var webMapOptions = {
          mapOptions: mapOptions,
          bingMapsKey: appConfig.bingMapsKey,
          usePopupManager: true
        };

        if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
            appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
          var layerMixins = [];
          array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
            if (proxyItem.useProxy && proxyItem.proxyUrl) {
              layerMixins.push({
                url: proxyItem.sourceUrl,
                mixin: {
                  url: proxyItem.proxyUrl
                }
              });
            }
          });

          if(layerMixins.length > 0) {
            webMapOptions.layerMixins = layerMixins;
          }
        }

        var mapDeferred = this._createWebMapRaw(webMapPortalUrl, webMapItemId, this.mapDivId, webMapOptions);

        mapDeferred.then(lang.hitch(this, function(response) {
          var map = response.map;

          //hide the default zoom slider
          map.hideZoomSlider();

          // set default size of infoWindow.
          map.infoWindow.resize(270, 316);
          //var extent;
          map.itemId = appConfig.map.itemId;
          map.itemInfo = response.itemInfo;
          map.webMapResponse = response;
          // enable snapping
          var options = {
            snapKey: keys.copyKey
          };
          map.enableSnapping(options);

          html.setStyle(map.root, 'zIndex', 0);

          map._initialExtent = map.extent;

          this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);

          //save layer's original refreshInterval
          this.layerInfosObj.getLayerInfoArrayOfWebmap().forEach(function(layerInfo) {
            layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
              if(layerObject){
                lang.setObject("_wabProperties.originalRefreshinterval", layerObject.refreshInterval, layerObject);
              }
            }), lang.hitch(this, function(err){
              console.error("can't get layerObject", err);
            }));
          }, this);

          //BJ Start
          var streetURL = "https://atlasgis.carson.ca.us/carsonserver/rest/services/Aerials_MIL1/MapServer/0";
          var streetLayer = new ArcGISDynamicMapServiceLayer(streetURL);
          streetLayer.isOperationalLayer = true;
          map.addLayer(streetLayer);
          //BJ End
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AlexRocco]

Hi Robert

Thank you!   It is working exactly the way I want. I really appreciate your coding help.