Adding WMS layer (basemap) to ArcGIS Javascript API?

Question

I am totally new to javascript and using the ArcGIS API for JavaScript 3.19.

I am writing a script to add a map to our gazetteer search web page where the address searched / found can be displayed as a pin on a map. I managed so far to do it pointing to our Basemap cache on our internal ArcGIS rest services but I have no idea how to replace this cache with a WMS layer that we use as a service which has a much better coverage (whole of UK) - i.e. external url with a username and password in it (sorry - I can't share the url as it is a paid service)

I have looked at the resources and samples on ArcGIS API for JavaScript site but I'm still confused as it seems to refer to layers when our service is a composite of various layers.

Answer 1

When you query a map service end point, the result is one image. That is what ArcGIS will consider as your layer.

From a WMS standpoint, you can generate that image using one or more layer from your WMS Service.

When referring to the doc on https://developers.arcgis.com/javascript/3/jsapi/wmslayer-amd.html#wmslayer1, this is what you see at the definition of the constructor: new WMSLayer(url, options?)

In the following example: https://developers.arcgis.com/javascript/3/jssamples/layers_wmsresourceinfo.html

The following is the info (options parameter)from your WMS Service you choose to display:

  var layer1 = new WMSLayerInfo({
    name: '1',
    title: 'Rivers'
  });
  var layer2 = new WMSLayerInfo({
    name: '2',
    title: 'Cities'
  });
  var resourceInfo = {
    extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {
      wkid: 4326
    }),
    layerInfos: [layer1, layer2]
  };

Then you use your WMS Service URL and your options to add the view of your WMS endpoint to ArcGIS JS API:

      var wmsLayer = new WMSLayer('https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {
    resourceInfo: resourceInfo,
    visibleLayers: ['1', '2']
  });
  map.addLayers([wmsLayer]);