AnsweredAssumed Answered

Dynamic WMS Layer Properties

Question asked by whughesD3 on Jul 3, 2020
Latest reply on Jul 9, 2020 by whughesD3

I can add a wms layer to a custom web map, however is it possible to change the WMS layer properties dynamically?

For instance I'd like to pass a value from a text textbox to the the wms layer property so the users can adjust the wms layer properties. Ex. TIME or transparency percentage, etc. 


See customLayerParameters: {'TIME': datePick.value}


Trying to build an app which displays Nexrad radar reflectivity over time. 




    <meta charset="utf-8" />
     ArcGIS API for JavaScript,
     For more information about the layers-wms sample,
     read the original sample description at
    <title>WMSLayer - 4.15</title>

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      #titleDiv {
        padding: 10px;
        font-weight: 36;
        text-align: center;

    <script src=""></script>

      var radtime;
      ], function(Map, MapImageLayer, MapView, WMSLayer, Basemap, watchUtils) {
        let wmsLayer = new WMSLayer({
          title: "WMS Layer",
          url: "",
          sublayers: [
              name: "nexrad-n0r-wmst"
          //customLayerParameters: {'TIME': '2020-06-29T23:45'}
          customLayerParameters: {'TIME': datePick.value}
        var map = new Map({
          basemap: "streets",
          layers: [wmsLayer]
        var view = new MapView({
          map: map,
          // zoom: initZoom,   
          // center: initPosition
          container: "viewDiv",
          zoom: 3,
          center: [-98, 37]
        // add the UI for titles, stats and chart.
        view.ui.add("titleDiv", "top-right");

     function myFunction() {
      window.radtime = document.getElementById("datePick").value;
     var el = document.getElementById("execute");
if (el.addEventListener)
    el.addEventListener("click", myFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', myFunction);

   <select name="datePick" id="datePick">
    <option value="2020-04-01T00:00">2020-04-01T00:00</option>
    <option value="2020-05-01T00:00">2020-05-01T00:00</option>
    <option value="2020-06-01T00:00">2020-06-01T00:00</option>
    <input name="textbox1" id="textbox1" type="dropdown" value="2020-06-01T00:00"/>
    <input id="execute" input name="buttonExecute" onclick="myFunction();"                                  type="button"     value="Execute" />
    <div id="viewDiv">
       <div id="titleDiv" type=textbox value=test>title</div>