topic Re: Load a WMS map service to Map in Web AppBuilder Custom Widgets Questions

Load a WMS map service to Map

HelenZhou — Mon, 03 Feb 2020 20:16:24 GMT

I am working a customized widget usingWeb Appbuilder developer edition 2.14. One part of the code is to load a WMS map service to the map. I am able to load the WMS service in development environment. After I download the site and deploy it in an IIS server, the WMS map is not loaded to the map. Google Chrome developer tool shows the layer is added and no error at the console tab. If I put the same piece of codes to a standalone html page in an IIS server. It also works. Any help is appreciated.

Thelines of code to load WMS service is below-

if(!this.isNearmapLoaded){
wmsNearmapLayerUrl='https://api.nearmap.com/wms/v1/latest/apikey/somekey?request=GetCapabilities';

this.wmsNearmapLayer = new WMSLayer(wmsNearmapLayerUrl, {
format: "jpg",
id:"Nearmap",
visibleLayers: ["area/d1cb2895-a36f-902170/all/2016-09-19"]
});

this.map.addLayer(this.wmsNearmapLayer) ;
this.map.reorderLayer(this.wmsNearmapLayer,1);
this.isNearmapLoaded = true;
}

Re: Load a WMS map service to Map

Anonymous User — Tue, 04 Feb 2020 05:46:43 GMT

Hi Helen Zhou‌,

These two code shall not go sequentially together.

this.map.addLayer(this.wmsNearmapLayer) ;
this.map.reorderLayer(this.wmsNearmapLayer,1);

After you call addLayer, it might not be added into the map yet.

Better to register layer-add event with below code before calling addLayer

this.map.on("layer-add", lang.hitch(this, this.layerOrderChange));

at layerOrderChange method, try to find out whether your layer is already added or not.

and call the this.map.reorderLayer method.

Please import, lang package and all the accordingly, it is just based on the concept. let me know hows it is go.

Best Regards,

Re: Load a WMS map service to Map

HelenZhou — Tue, 04 Feb 2020 18:00:46 GMT

Thanks so much, Than. I have removed the line of code to reorder Layer and run code again today. The Chrome developer tool console shows error: "Access to XMLHttpRequest at 'https://api.nearmap.com/wms/v1/latest/apikey/N......jAy?SERVICE=WMS&REQUEST=GetCapabilities' from origin 'https://testserver' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute".

I am able to run the same codes in a html page deployed in the same server. The only additional code in the html page is

esriConfig.defaults.io.corsEnabledServers.push("api.nearmap.com").

So - I try to configure the proxy in the config.json for proxy:

"httpProxy": {
   "useProxy": true,
   "url": "",
   "alwaysUseProxy": false,
   "rules": [{
       "urlPrefix": "https://api.nearmap.com/",
       "proxyUrl": "https://testserver/wabsupport/proxy/proxy.ashx"
   }]
},

in the proxy.config:

Running the WAB application, the WMS is still not loaded with 500 error: https://testserver/wabsupport/proxy/proxy.ashx?https://api.nearmap.com/wms/v1/latest/apikey/N.../...

thanks so much for help

Re: Load a WMS map service to Map

HelenZhou — Wed, 05 Feb 2020 22:44:26 GMT

I have figured it out.

I download the latest proxy and deploy it in IIS server. In the config.json httpProxy section, I change the value to the latest proxy url for proxyUrl value. the latest can be downloaded here https://github.com/Esri/resource-proxy/archive/master.zip

Re: Load a WMS map service to Map

Anonymous User — Thu, 06 Feb 2020 05:12:08 GMT

That's great Helen Zhou,

Yes, that's the usual way to using esri resource proxy to solve cors issue.

So I believed your layer can be loaded already.