Azure maps group layers in layer control

Question

Hi all, I have an Azure map with many layers. Is it possible to group them, preferably tree-wise, and add those groups to the layer control?

//Create the layer control.  
layerControl = new atlas.control.LayerControl({  
                                //title: 'Layers',  
  
                                //Attach the legend control.  
                                legendControl: legend,  
  
                                dynamicLayerGroup: {  
                                    groupTitle: 'Group 1',  
                                    layout: 'checkbox',  
                                }  
});  

Answer 1

The dynamic layer group automatically creates a list of all the user defined layers in the map. You can limit the layers that the dynamic layer group lists, however you can only have one dynamic layer list per layer control. For your scenario, you would most likely have to specify the layers items explicitly in the layer control. You can then create groups of layers, however layer groups can't have sub-groupings, so you can't go multiple groupings deep. You can however make the groups radio or check box lists which may help depending on your scenario.

Answer 2

thank you. I made it work like this now:

layerControl = new atlas.control.LayerControl({  
                                legendControl: legend,  
                                layerGroups: [  
                                    {  
                                        layout: 'checkbox',  
                                        groupTitle: 'groupTitle1',  
                                        layers: ['layer1', 'layer2'],  
                                        items: [{  
                                            label: 'layerTitle1',  
                                            layout: 'checkbox',  
                                            enabledStyle: {  
                                                visible: true  
                                            },  
                                            disabledStyle: {  
                                                visible: false  
                                            }  
                                            },  
                                            {  
                                            label: 'layerTitle2',  
                                            layout: 'checkbox',  
                                            enabledStyle: {  
                                                visible: true  
                                            },  
                                            disabledStyle: {  
                                                visible: false  
                                            }  
                                            }     
                                        ]  
                                    },  
                                    {  
                                        layout: 'checkbox',  
                                        groupTitle: 'group Title 2',  
                                        layers: ['layer3', 'layer4'],  
                                        items: [{  
                                            label: 'layerTitle3',  
                                            layout: 'checkbox',  
                                            enabledStyle: {  
                                                visible: true  
                                            },  
                                            disabledStyle: {  
                                                visible: false  
                                            } },  
                                            {  
                                            label: 'layerTitle4',  
                                            layout: 'checkbox',  
                                            enabledStyle: {  
                                                visible: true  
                                            },  
                                            disabledStyle: {  
                                                visible: false  
                                            } }     
                                        ]  
                                    }  
                                ]  
                            });