Get the children propertie of a LayersControl object to add a new layer

Firstly, thanks to this amazing library, I really enjoy the way it is implemented.

In a dash application with a Map component containing a LayersControl object initialized in a previous callback with different layers, I wan’t to add another layer from a second callback but when I am passing the children property of the LayersControl I got a cyclic object value error.

Here is the way I declare my map component and the LayerControl object

    children = [dl.LayersControl(id = 'layers', children = [])],
    zoom=4, preferCanvas=True, zoomControl = False,
        'width': '1200px',
        'height': '720px'

Then in a first callback I add several layers

    Output('layers', 'children'),

my_first_callback() :

maps =  [
                url = tileProvider.url.format(x="{x}", y="{y}", z="{z}", s="{s}", r=tileProvider.get("r", ""), **tileProvider),
            name = 'fond de carte', checked = True
    dl.Overlay(dl.LayerGroup(layer1), name = 'layer1', checked = True),
    dl.Overlay(dl.LayerGroup(layer2), name = 'layer2', checked = True),
    dl.Overlay(dl.LayerGroup(layer3), name = 'layer3', checked = False),

return maps

Then I’m trying to update my LayersControl in a second callback

    Output('layers', 'children'),
    State('layers', 'children'),
my_second_callback(layer_to_update) :
        # some code
        return layer_to_update

The app can’t enter the callback cause line State('layers','children') rise cyclic object value error. I was previously using only a LayerGroup in the map children property to add different layers. It was working perfectly but I wanted the possibility to hide/show layers and I don’t understand why it is not working anymore, or maybe I am not using the correct workflow to do this.

Thanks !

Hello @jahairforce,

Welcome to the community!

Have you considered my good pal Patch for this, you don’t need to include the state to just add, remove, update components anymore, as long as you know what you are updating.

Also, all callbacks need an input, not sure what your trigger is.

1 Like

wow looks amazing ! Seems to be the way to go.

For the input, it’s all my bad, I simplified a bit too much my example, but I do have an input in my app, just it was not relevant for the problem I was facing.

Thanks for your advice, I will update my post as soon as I succeed (or fail ?) with Patch object.

EDIT : this works perfectly, I just had a small problem with the MultiplexerTransform package in dash_extension.enrich, which I was using to enable duplicated output since I wasn’t on Dash v 2.9. But after updating Dash, it works perfectly. Thanks a lot.

1 Like

If you aren’t using a bunch of DashExtensions, you can swap over to Dash vanilla completely, but it’s up to you.