AnsweredAssumed Answered

LayerList modification:  AG Server feature services not showing in map

Question asked by 304699 on Apr 5, 2018

I am new to working with AG Javascript API and working with widgets.  I am modifying the LayerList widget to access secure layer services (Map and Feature layers) on our local AG Server similar to the code show here Customize Layer List Widget for ArcGIS Web App Builder · GitHub .  I am using WAB 2.7 to load and test the widget within Chrome.  My web app contains a web map application from my AGOL which comprises a few map layers.  The map layers from the AGOL web map app are listed in the LayerList widget and they display in the web app map and toggle on/off just fine.  However, I'm also trying to access a couple of our feature services directly from our AG Server, list them in the widget and display/toggle in my map.  I'm using token authentication within the widget startup, and I'm able to obtain a token.  The two feature service layers from AG Server are listed in the widget panel and I can check/uncheck them, but the layers will not display in my map.  Interestingly, I do not have any errors/warnings showing up in my browser console. 

 

Here is what my LayerList widget looks like when I launch my web app:

 

 

The pertinent code snippet from the LayerList widget that I'm modifying is shown below.  Perhaps I'm just going about the authentication and access to the feature layers in our AG Server all wrong in the context of the widget.  Pieces of it seem to make sense and seem to work...just can't get the feature layers to display in my map. 

 

Any hints/insight are appreciated.

 

Cheers,

DeWayne

 

define([

    'jimu/BaseWidget',

    'dojo/_base/declare',

    'dojo/_base/lang',

    'dojo/_base/array',

    'dojo/_base/html',

    'dojo/dom',

    'dojo/on',

    'dojo/query',

    'dijit/registry',

    './LayerListView',

    './NlsStrings',

    'jimu/LayerInfos/LayerInfos',

    "esri/request",

    "esri/config",

    "esri/IdentityManager",

    "esri/layers/ArcGISDynamicMapServiceLayer"

  ],

  function(BaseWidget, declare, lang, array, html, dom, on,

  query, registry, LayerListView, NlsStrings, LayerInfos, esriRequest, esriConfig,

  esriId, DLayer) {

 

    var clazz = declare([BaseWidget], {

      //these two properties is defined in the BaseWiget

      baseClass: 'jimu-widget-layerList',

      name: 'layerList',

      _denyLayerInfosReorderResponseOneTime: null,

      _denyLayerInfosIsVisibleChangedResponseOneTime: null,

      //layerListView: Object{}

      //  A module is responsible for show layers list

      layerListView: null,

 

      //operLayerInfos: Object{}

      //  operational layer infos

      operLayerInfos: null,

 

      startup: function() {

        this.inherited(arguments);

        NlsStrings.value = this.nls;

        this._denyLayerInfosReorderResponseOneTime = false;

        this._denyLayerInfosIsVisibleChangedResponseOneTime = false;

        // summary:

        //    this function will be called when widget is started.

        // description:

        //    according to webmap or basemap to create LayerInfos instance

        //    and initialize operLayerInfos;

        //    show layers list;

        //    bind events for layerLis;

        console.log("this map itemid",this.map.itemId);

        if (this.map.itemId) {

          LayerInfos.getInstance(this.map, this.map.itemInfo)

            .then(lang.hitch(this, function(operLayerInfos) {

              this.operLayerInfos = operLayerInfos;

 

              esri.config.defaults.io.corsEnabledServers.push("mygis.mydomain.com");

              esri.config.defaults.io.proxyUrl = "http://localhost";

              var ObsFeatSvc = "https://mygis.mydomain.com/arcgis/rest/services/Obs/FeatureServer/0";

            

              var layer1 = new esri.layers.FeatureLayer("https://mygis.mydomain.com/arcgis/rest/services/Obs/FeatureServer/0");           

                  layer1.setDefinitionExpression("LayerDef1='1'");

                  layer1.title = "Layer1";

               

              var layer2 = new esri.layers.FeatureLayer("https://mygis.mydomain.com/arcgis/rest/services/Obs/FeatureServer/1");

                  layer2.setDefinitionExpression("LayerDef2='01'");

                  layer2.title = "Layer2"; 

              var allLayers = [layer1, layer2];

             

              this.operLayerInfos.addFeatureCollection(allLayers, "AllLayers");

                     

              // Get token

 

              esriRequest({

                url: "https://mygis.mydomain.com/arcgis/tokens/",

                //These are the minimum parameters required to generate a token

                content: {

                  request: "getToken",

                  username: "myuser",

                password: "mypassword",

                expiration: 59, // Minutes

                f: "json"

              },

                handleAs: "json",

                load: tokenObtained,

                error: tokenRequestFailed

              }, {

                //Send request as a POST

                usePost: true

              });

              //After the request to get a token has successfully returned a response

              function tokenObtained(response) {

               

                console.log("token obtained", response.token);

                registerToken(response);

               

              }

             

              //The request failed to generate a token

              function tokenRequestFailed(error) {

                console.log("error: ", error);

              }

 

              //Register the token

              function registerToken(tokenInfo) {

                //The parameters required are not documented. This is why this sample is helpful ;)

                var credentialsJSON = {

                  serverInfos: [{

                    server: "https://mygis.mydomain.com",

                    tokenServiceUrl: "https://mygis.mydomain.com/arcgis/tokens/",

                    adminTokenServiceUrl: "https://mygis.mydomain.com/arcgis/admin/generateToken",

                    shortLivedTokenValidity: 60,

                    currentVersion: 10.41,

                    hasServer: true

                  }],

                  oAuthInfos: [],

                  credentials: [{

                    userId: "myuser",

                    server: "https://mygis.mydomain.com/arcgis",

                    token: tokenInfo.token,

                    expires: tokenInfo.expires,

                    validity: 60,

                    isAdmin: false,

                    ssl: false,

                    //Calculate when the token was created by subtracting 60 minutes from the expiration time

                    creationTime: tokenInfo.expires - (60000 * 60),

                    scope: "server",

                    resources: [

                      ObsFeatSvc,layer1,layer2

                    ]

                  }]

                };

                //Initialize the IdentityManager with the credentials object created above

                console.log("initialize ID manager with creds");

                esriId.initialize(credentialsJSON);

              }

                                                                                         

               this.showLayers(); 

              //this.bindEvents(); 

 

              this.own(on(this.operLayerInfos, 

                          'layerInfosChanged', 

                          lang.hitch(this, this._onLayerInfosChanged))); 

              dom.setSelectable(this.layersSection, false); 

            }));

          } else { 

            var itemInfo = this._obtainMapLayers(); 

            LayerInfos.getInstance(this.map, itemInfo) 

            .then(lang.hitch(this, function(operLayerInfos) { 

              this.operLayerInfos = operLayerInfos; 

              //this.showLayers(); 

              //this.bindEvents(); 

              console.log("Accessing other layer services");

              this.own(on(this.operLayerInfos, 

                          'layerInfosChanged', 

                          lang.hitch(this, this._onLayerInfosChanged))); 

              dom.setSelectable(this.layersSection, false); 

            }));            

        }

      },

Outcomes