This sample demonstrates how to create a custom dynamic layer with a WMS service. The Cadastre en Bretagne - Parcelles data can be found through the République Française and is accessible as a WMS service (https://cms.geobretagne.fr/).

To create a custom dynamic layer, you must call createSubclass() on BaseDynamicLayer. We’ll call the custom dynamic layer CustomWMSLayer and give it two public properties that can be watched for changes. They are used to generate a URL to request an image from a WMS server. The properties are:

• mapUrl - specifies the URL to a WMS service
• mapParameters - specifies query parameters that will be used when fetching an image from the server

const CustomWMSLayer = BaseDynamicLayer.createSubclass({
  properties: {
    mapUrl: null,
    mapParameters: null,
  },
  // ...
});

The CustomWMSLayer implements the getImageUrl() method to generate the URL to an image for a given extent, width, and height. This method manipulates values of the mapUrl and mapParameters properties to generate the URL to an image which will be displayed in the view.

// Override getImageUrl() method to generate URL
// to an image for a given extent, width and height.
getImageUrl(extent, width, height) {
  const urlVariables = this._prepareQuery(this.mapParameters, extent, width, height);
  const queryString = this._joinUrlVariables(urlVariables);
  return this.mapUrl + "?" + queryString;
}

The custom layer is added to a map and assigned to the map component. The Layer List component displays the custom layer in the map.

const wmsLayer = new CustomWMSLayer({
  mapUrl: "https://geobretagne.fr/geoserver/cadastre/ows",
  mapParameters: {
    SERVICE: "WMS",
    REQUEST: "GetMap",
    FORMAT: "image/png",
    TRANSPARENT: "TRUE",
    STYLES: "",
    VERSION: "1.3.0",
    LAYERS: "CP.CadastralParcel",
    WIDTH: "{width}",
    HEIGHT: "{height}",
    CRS: "EPSG:{wkid}",
    BBOX: "{xmin},{ymin},{xmax},{ymax}",
  },
  minScale: 20000,
  title: "Cadastral Parcel",
});

viewElement.map = new Map({
  basemap: "topo-vector",
  layers: [wmsLayer],
});