How to add a OGC WMS layer to application using Javascript API 4.12

1088
2
09-11-2019 11:52 PM
PieterHoltzhausen1
New Contributor II

I am trying to load the WMS layers into my JavaScript application, but I get a "failed to fetch” error message.

Her is my js code to just display the resource in an empty map:

      require([

        "esri/Map",

        "esri/views/MapView",

        "esri/layers/WMSLayer"

      ], function(Map, MapView, WMSLayer) {

        var layer = new WMSLayer({

          url:

            "http://apollo.cdngiportal.co.za/erdas-iws/ogc/wms/CDNGI_PORTAL_BACKDROP?",

          sublayers: [

            {

              name: "CDNGI_2mil_Mosaic"

            }

          ]

        });

        var map = new Map({

          layers: [layer]

        });

        var view = new MapView({

          container: "viewDiv",

          map: map,

          spatialReference: 4326,

        });

      });

Any guidance would be much appreciated,

Pieter

0 Kudos
2 Replies
DavidTshamussa
New Contributor

i'm facing same issue. any response from the community please.

0 Kudos
FC_Basson
MVP Regular Contributor

The API is forcing the request to the WMS service to be HTTPS, but the NGI server is not providing SSL connections yet.  You must redirect the request through a proxy as described in the Proxy pages with the API | ArcGIS API for JavaScript 4.13 

For the NGI server you can add this to your code:

urlUtils.addProxyRule({
urlPrefix: "http://apollo.cdngiportal.co.za/erdas-iws/ogc/wmts",
proxyUrl: "https://<server>/proxy"
});

So you'll need to setup the proxy page (if you don't have one yet, which you can configure).  Use the GitHub examples: GitHub - Esri/resource-proxy: Proxy files for DotNet, Java and PHP. 

0 Kudos