Dynamic WMS Layer Properties

WillHughes · ‎07-03-2020

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

SrinivasVinnakota · ‎07-05-2020

I reworked your code snippet so that it picks up datetime value from the dropdown.

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>WMSLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
var radtime;

require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMSLayer"
], function(Map, MapView, WMSLayer) {
let layer = 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': datePick.value}
});
var map = new Map({
basemap: "streets",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-98,37]
});

window.myFunction = function() {
window.radtime = document.getElementById("datePick").value;
console.log(window.radtime);
var wmsLayer = map.layers.items[0];
wmsLayer.customLayerParameters.TIME = window.radtime;
wmsLayer.refresh();
}
});
</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>
</body>
</html>

View solution in original post

SrinivasVinnakota · ‎07-05-2020

I reworked your code snippet so that it picks up datetime value from the dropdown.

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>WMSLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
var radtime;

require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMSLayer"
], function(Map, MapView, WMSLayer) {
let layer = 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': datePick.value}
});
var map = new Map({
basemap: "streets",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-98,37]
});

window.myFunction = function() {
window.radtime = document.getElementById("datePick").value;
console.log(window.radtime);
var wmsLayer = map.layers.items[0];
wmsLayer.customLayerParameters.TIME = window.radtime;
wmsLayer.refresh();
}
});
</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>
</body>
</html>

WillHughes · ‎07-09-2020

Thanks for the help. Working great!