Robert,
Please check out [Link Deleted: Robert answered the question and it is no longer needed!: 2020/02/10 by post author]
We've stripped out just about every other widget that was in it. What remains is the 7 layer toggle button icons and the layer list. The app has been ported to 2.15 to rule out versioning issues.
Example of problem workflow:
0) Once the page loads, it shows the default layers we want on at the start of the map, and they should correspond to the layers associated with the second widget icon (shaped like a crosshair)
1) Click the wind industry icon in the upper right (the wind turbine). A bunch of layers turn off (some that should actually be on) and it mainly shows the green wind development resources grid.
2) Click it again and it shows the grid plus the bulk of the other layers that were on. I think this is what the button is actually supposed to toggle on.
3) One more time and they all turn off.
4+)Now if you click it repeatedly, that button behaves the way it is supposed to, all assigned layers off or on.
Continuing from there:
Click through the layer toggle buttons until all the layers are off.
Now click the button to the right of the wind turbine once (hover text calls it counties)
Then click the button to the right of that once (hover text should say cities and towns). You should get remnant layers that for some reason dont get turned off.
So these are examples of our syncing issue. If you click around the layer toggle buttons, layers appear to intermittently linger or only partially get turned on like they are supposed to.
2nd issue we have:
Getting the group checkmarks in the layer list to turn off and on when the layers themselves are toggled on and off.
I have come up with some code for that which does work (though it's doing it opposite of what the actual layer visibility shows, which, if it persists after fixing the syncing issue, should just be a matter swapping the check/uncheck lines).
The main problem with my code is that it's not written using the 'node' style that I think these widgets are supposed to be written in, it's using a hard coded path up and down the node trees to work. I basically dont understand the widget/node structure enough to make this not look like sloppy code. The lines I'm refering to mainly are lines 38, 39, and 51.
I'm including it, below. If you would rather I broke it out to a second thread, I would be happy to. This code is not incorporated into the code of the website linked to above, in order to keep that page as code-original as possible.
This would go into LayerToggleButton's widget.js and replace the toggleLayer function
toggleLayer: function(lObjs) {
var bmLyrObjs = this.layerStructure.getBasemapLayerObjects();
var bmlyrIds = [];
array.map(bmLyrObjs, lang.hitch(this, function(bmObj, index) {
bmlyrIds.push(bmObj.id);
}));
if (!lObjs[0].isToggledOn() && this.isExclusive) {
this.layerStructure.traversal(lang.hitch(this, function(layerNode) {
if(bmlyrIds && bmlyrIds.indexOf(layerNode.id)<0){
layerNode.hide();
}
}));
}
var onOff;
array.map(lObjs, lang.hitch(this, function(lObj, index) {
onOff = (lObj.isToggledOn()) ? 'On' : 'Off';
if (lObj._layerInfo && lObj._layerInfo.layerObject) {
this.setBusyIndicator(lObj);
}
if (this.parentContainer && this.originalTitle) {
html.setAttr(this.parentContainer, 'title', this.originalTitle + ': ' + onOff);
}
if (onOff === 'Off' && index === 0 && lObj._layerInfo && lObj._layerInfo.layerObject && lObj._layerInfo.layerObject.fullExtent) {
if (this.zoomToLayer) {
this.map.setExtent(lObj._layerInfo.layerObject.fullExtent.expand(1.2));
}
}
lObj.toggle();
var aSearchId = lObj._layerInfo.layerObject.id;
var objectsElement = query("[class~='layer-tr-node-" + aSearchId + "']")[0];
if (objectsElement!=undefined){
var targetElement = query(objectsElement).parent().prev();
var grpCheckbox = targetElement[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0];
var visibleCheckBox = registry.byNode(grpCheckbox);
if(onOff=== 'On') {
visibleCheckBox.check();
} else {
var targetSiblings = query(objectsElement).siblings();
var groupOnOff = false;
for (var lyr in targetSiblings){
var checkStatus = "no check";
try{
checkStatus = targetSiblings[lyr].childNodes[0].childNodes[1].childNodes[0].getAttribute('aria-checked');
}
catch(error){
checkStatus = "no check";
}
if (checkStatus !== "no check"){
if(!groupOnOff && checkStatus ==="true"){
groupOnOff = true;
}
}
}
if(!groupOnOff) {
visibleCheckBox.uncheck();
}
}
}
topic.publish('toggleChanged', lObj._layerInfo._visible, lObj);
if (!lObj.isVisible() && lObj.isToggledOn()) {
lObj.show();
}
}));
}
