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. 

 

Thanks.

 

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the layers-wms sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/layers-wms/index.html
     -->
    <title>WMSLayer - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
     
     
      #titleDiv {
        padding: 10px;
        font-weight: 36;
        text-align: center;
      }
    </style>

    <link
      rel="stylesheet"
     href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      var radtime;
     
     
     
     
     
      require([
        "esri/Map",
        "esri/layers/MapImageLayer",
        "esri/views/MapView",
        "esri/layers/WMSLayer",
        "esri/Basemap",
        "esri/core/watchUtils"
      ], function(Map, MapImageLayer, MapView, WMSLayer, Basemap, watchUtils) {
        let wmsLayer = new WMSLayer({
          title: "WMS Layer",
          url: "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",
          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;
      console.log(radtime)
       
      }
     
       
     var el = document.getElementById("execute");
if (el.addEventListener)
    el.addEventListener("click", myFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', myFunction);

    
    
    </script>
  </head>
  <body>
   <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>
</select>
   
    <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>
    </div>
   
   
  
  </body>
</html>

Outcomes