topic Robert's LayerToggleButton Widget: how to toggle a map layer(other than basemap layers) in Web AppBuilder Custom Widgets Questions

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

AlexRocco — Fri, 06 Nov 2020 00:59:26 GMT

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

//// .....

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

AlexRocco — Sun, 08 Nov 2020 04:59:47 GMT

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.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:01:53 GMT

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
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

AlexRocco — Mon, 09 Nov 2020 22:39:50 GMT

Hi Robert

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