topic Re: WMSLayer event visible-layers-change in ArcGIS JavaScript Maps SDK Questions

WMSLayer event visible-layers-change

deleted-user-Rnbhf4vMniAn — Mon, 25 Nov 2019 14:24:35 GMT

Hi,

I am incredibly new so I am walking in all the traps that exist at the moment for GIS development. I am wondering how I can capture the action of toggling the visibility in a sublayer of the WMSLayer type.

esri/map/Map

esri/dijit/LayerList

esri/layers/WMSLayer

and using ArcGIS API for JavaScript

I have created a map, layerlist and added a WMSLayer. When the visibility of the layer changes I have used visibility-change event to take action. However, when one of the sublayers is toggled. It's o so quiet, it's oh so still. I can not seem to find any event handling this action.

The map ArcGISDynamicMapServiceLayer for example has this event :

visible-layers-change

Is there anybody who can push me in the right direction ?

Re: WMSLayer event visible-layers-change

Noah-Sager — Sun, 12 Dec 2021 15:58:14 GMT

Looks like it should work, try this as a proof-of-concept:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List WMS</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">

<style>
html, body, .container, #map {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
 margin:0;
 font-family: "Open Sans";
}
#map {
 padding:0;
}
#layerListPane{
 width:25%;
}
.esriLayer{
 background-color: #fff;
}
.esriLayerList .esriList{
 border-top:none;
}
.esriLayerList .esriTitle {
 background-color: #fff;
 border-bottom:none;
}
.esriLayerList .esriList ul{
 background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.30/"></script>
<script>
require([
 "esri/map",
 "esri/dijit/LayerList",
 "esri/layers/WMSLayer",
 "esri/layers/WMSLayerInfo",
 "esri/geometry/Extent",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane",
 "dojo/domReady!"
], function(
 Map,
 LayerList,
 WMSLayer,
 WMSLayerInfo,
 Extent
) {

 var map = new Map('map', {
 basemap: 'streets',
 center: [-96, 37],
 zoom: 4
 });

 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]
 };

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

 var counter = 0;

 wmsLayer.on('visibility-change', function(layer) {
 console.log ('The layer changed. layer.id: ', layer.target.id);
 console.log ('counter: ', counter);
 counter++;
 });

 map.addLayers([wmsLayer]);
 
 var myWidget = new LayerList({
 map: map,
 layers: [wmsLayer]
 },"layerList");
 myWidget.startup();


});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
 <div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

Re: WMSLayer event visible-layers-change

deleted-user-Rnbhf4vMniAn — Tue, 28 Jan 2020 21:54:04 GMT

Hi Noah,

The question was about the sublayers of a WMSLayer type.

visibility-change

Is triggered when the layer itself has become visible/invisible.

Re: WMSLayer event visible-layers-change

Noah-Sager — Tue, 28 Jan 2020 22:23:08 GMT

Can you post a simple repro case on codepen or some other hosting site so I can see exactly what you're doing with the WMS sublayer visibility?

Re: WMSLayer event visible-layers-change

deleted-user-Rnbhf4vMniAn — Tue, 28 Jan 2020 22:45:39 GMT

Well I don't have code for it still, since there is no event to listen to. However I could produce code for another layer type, for which it does work. The layer type is the ArcGisDynamicMapServiceLayer. (See: ArcGISDynamicMapServiceLayer | API Reference | ArcGIS API for JavaScript 3.31 )

This is the event I am using:

visible-layers-change

{   visibleLayers: <Number[]> }

Fires when the visibleLayers property is changed.

When In my code I listen to this event (visible-layers-change) in the arcGiSDynamicMapServiceLayer, It is thrown as soon as one of the SUB layers visibility is changed. As soon as that happens I can collect the list of sublayers that are currently visible and persist these to the database. So the next time after reloading the page, I can re-enable the visibility for all layers, but also its sublayers.

When I try to do the same thing in the WMSLayer type, there is not such an event. Only the visibility-change event, that you have already mentioned.

I guess I am just trying to find a way, to store state of the WMSLayer and its sublayers, so that I can recover the exact same state after the browser is reloaded, be loading the state info from a database.

Re: WMSLayer event visible-layers-change

Noah-Sager — Wed, 29 Jan 2020 22:33:29 GMT

Ok, I thought you had an app that toggled the visibility of individual sublayers of a WMSLayer. One thing you could do would be to check the visibleLayers property of the WMSLayer, that way you could ensure that the same state is always displayed whenever you want.

Another option would be to use the 4x version of the ArcGIS API for JavaScript (4.14 is the current version). The LayerList works well with the sublayers of a WMSLayer. Example app: https://codepen.io/noash/pen/abzrRQb

Re: WMSLayer event visible-layers-change

deleted-user-Rnbhf4vMniAn — Mon, 04 May 2020 17:19:28 GMT

Hi Noah,

I just noticed your answer something must have gone wrong with the notification. So although it’s already 3 months ago, thanks for your help.

I will see if an upgrade of the ArcGIS AP.I. for JavaScript shall be helpfull.