- Home
- :
- All Communities
- :
- User Groups
- :
- Web AppBuilder Custom Widgets
- :
- Questions
- :
- Group layers in the layerlist widget
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Group layers in the layerlist widget
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello!
I need to create layer grouping within the layerlist widget. I am using version 2.2 of the web appbuilder.
When we created the layers on the server as mapserver, the created groups were respected by the layerlist widget, however, because we needed specific resources, we had to switch to featurelayer and put them as dynamic layers, and with that, the layerlist widget no longer mattered the groups.
Is there any way to do this even manually?
Note: I thought of something like this. Return the layers exactly in the order in which I need to group, and within the assembly loop of the treeview, create a parent node and go adding the layers as children, until the last one or be necessary to create another parent node in the treeview. Can I do this? I just do not know how to proceed, what points to change, etc.
Thank you!
Gilberto.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Gilberto,
This has been asked and requested many times but as of yet I have not seen an answer to this.
This is the closest thing:
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Robert, I actually did a survey on the geonet, and among the results, I did not find anything really effective. This suggestion I had not found. I'll check it out and see if you can help me.
Thank you!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello!
Robert, I was able to create the groups with the layers that I need, through the post that you gave me in your last answer. Attached, I'm adding my layerlist widget.
I came up with another question, and a new feature that I can not figure out where I should change.
The question is, should I really comment on line 273 of the widget.js file, which corresponds to "this.bindEvents ();" In the example, this line is commented on, but I can not quite understand what it does, and I must comment on it.
I created a map without layers in the portal, and then added the layers in my application, manually according to code.
The new functionality I need is that by clicking on the group checkbox, all the child layers in this group are checked, and if you uncheck the group checkbox, all daughters are marked. Also, I need to click and mark the checkbox on a child layer, the group checkbox is checked, and so on. This is a simple functionality to be done with pure javascript, I've done it in other applications, but I can not figure out how to do it in that application.
Thanks again.
Gilberto.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Gilberto,
Did you ever figure this out? So if you click a child checkbox on, the parent checkbox would automatically get checked as well? Thanks
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Indeed Patrick you understand. This is huge. Almost every new lay user asks this. I can't underscore enough how important this is. Even if we can do it in WAB DE it is still important for AGOL. Bueller? Bueller? Anyone?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello Friend!
Yes, I did. Below I include the function code that you need to change within the file "application folder \ widgets \ LayerList \ LayerListView.js". The comments are in Brazilian Portuguese. I added other features in this function, such as display of minimal scale message. If you need any help, just write.
_onCkSelectNodeClick: function(layerInfo, ckSelect, evt)
{
if (layerInfo.isRootLayer())
{
//SE FOR UM NÓ PAI (GURPO)
if (ckSelect.checked)
{
//Marcou o checkbox
layerInfo.setTopLayerVisible(true);
}
else
{
//Desmarcou o checkbox
layerInfo.setTopLayerVisible(false);
}
}
else
{
//SE FOR UM NÓ FILHO (CAMADA)
if (ckSelect.checked)
{
//Marcou o nó filho
if (layerInfo.layerObject)
{
if (layerInfo.layerObject.minScale || layerInfo.layerObject.maxScale)
{
if (layerInfo.layerObject.minScale > 0 || layerInfo.layerObject.maxScale > 0)
{
Number.prototype.format = function(d_len, d_pt, t_pt)
{
var d_len = d_len || 0;
var d_pt = d_pt || ".";
var t_pt = t_pt || ",";
if ((typeof d_len != "number") || (typeof d_pt != "string") || (typeof t_pt != "string"))
{
throw new Error("wrong parameters for method 'String.pad()'.");
}
var integer = "", decimal = "";
var n = new String(this).split(/\./), i_len = n[0].length, i = 0;
if (d_len > 0)
{
n[1] = (typeof n[1] != "undefined") ? n[1].substr(0, d_len) : "";
decimal = d_pt.concat(n[1].pad(d_len, "0", String.PAD_RIGHT));
}
while (i_len > 0)
{
if ((++i % 3 == 1) && (i_len != n[0].length))
{
integer = t_pt.concat(integer);
}
integer = n[0].substr(--i_len, 1).concat(integer);
}
return (integer + decimal);
}
var nEscalaMinima = layerInfo.layerObject.minScale;
var nEscalaMaxima = layerInfo.layerObject.maxScale;
var sMensagem = "A camada " + layerInfo.title + " está visível apenas entre as escalas ";
if (layerInfo.layerObject.minScale > 0)
{
sMensagem += "1/" + nEscalaMinima.format(0, ",", ".");
}
if (layerInfo.layerObject.minScale > 0 && layerInfo.layerObject.maxScale > 0)
{
sMensagem += " e "
}
if (layerInfo.layerObject.maxScale > 0)
{
sMensagem += "1/" + nEscalaMaxima.format(0, ",", ".");
}
//Exibe mensagem informando a escala mínima e máxima para visualização da camada, apenas se o
//mapa não estiver na escala de zoom correta
if (!layerInfo.isCurrentScaleInTheScaleRange())
{
new Message
(
{
titleLabel:"Escala de Visibilidade da Camada",
message: sMensagem,
width: 500
}
);
//Se o mapa não estiver na escala necessária, e o clique do usuário, tenha sido em uma camada de um nó filho, após
//exibir a mensagem para o usuário, desmarca o checkbox que gerou o evento de clique.
//if (!layerInfo.isRootLayer())
//{
query("[class~='visible-checkbox-" + layerInfo.id + "']", this.domNode).forEach
(
function(visibleCheckBoxDomNode)
{
var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);
//if (layerInfo.isVisible())
//{
//layerInfo.parentLayerInfo.push({"visibility":"true"});
//console.log(layerInfo.parentLayerInfo);
//var cc = layerInfo._oldIsShowInMap;
//console.log(cc);
//visibleCheckBox.check();
//}
//else
//{
visibleCheckBox.uncheck();
layerInfo.setTopLayerVisible(false);
//}
},
this
);
//}
}
else
{
//Nó filho que possui escala e está dentro desta escala.
//Ao clicar em um nó filho, marca o nó pai
//if (!layerInfo.isRootLayer())
//{
query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
(
function(visibleCheckBoxDomNode)
{
var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);
//if (!layerInfo.parentLayerInfo.isVisible())
//{
visibleCheckBox.check();
layerInfo.parentLayerInfo.setTopLayerVisible(true);
layerInfo.setTopLayerVisible(true);
//}
},
this
);
//}
}
}
else
{
//Nó filho, que a escala é zero ou menor que zero
//if (!layerInfo.isRootLayer())
//{
query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
(
function(visibleCheckBoxDomNode)
{
var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);
//if (!layerInfo.parentLayerInfo.isVisible())
//{
visibleCheckBox.check();
layerInfo.parentLayerInfo.setTopLayerVisible(true);
layerInfo.setTopLayerVisible(true);
//}
},
this
);
//}
}
}
else
{
//Nó filho, que não possui escala definida.
//if (!layerInfo.isRootLayer())
//{
query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
(
function(visibleCheckBoxDomNode)
{
var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);
//if (!layerInfo.parentLayerInfo.isVisible())
//{
visibleCheckBox.check();
layerInfo.parentLayerInfo.setTopLayerVisible(true);
layerInfo.setTopLayerVisible(true);
//}
},
this
);
//}
}
}
}
else
{
//Desmarcou o nó filho
layerInfo.setTopLayerVisible(false);
}
}
//if (ckSelect.checked)
//{
//layerInfo.setTopLayerVisible(true);
//}
//else
//{
//layerInfo.setTopLayerVisible(false);
//}
evt.stopPropagation();
}
Hug,
Gilberto.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi
Is it easy to separate the bit of code that switches the parent layer on when the child is seleccted from the bit to do with the scales? Im nott conffident enough in coding to guess which bit I need! Also, where in thee file does this need to go?
Thanks
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Gilberto,
Is there a way to organize and group layers with the layerlist widget.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Gilberto,
We use both the AGO builder and WAB for Dev., but what we started doing was just adding additional "instances" of the layer list widget with each instance containing a list of layers grouped by themes, like natural hazards, community facilities layers, local authorities layers, etc.
Just a work around obviously, but Esri still needs to add this capability, because non-GIS users get really frustrated at us hackers and developers when they can't turn groups of layers on an off at once.
- John