[Users] Need help to dynamically add vector layer to treePanel

[David E. Reksten]

Hi,

thank you so much for your answer, I finally got it to work by
cleaning up the code as you suggested and, particularly, setting
"displayInLayerSwitcher: true" was necessary to get it working.

I'm sorry about the confusion with LayerNodeUI. I actually need the
radio buttons (the users should be able to both delete and draw on
specific layers), and LayerNodeUI was defined further up in the code
as such:
    var LayerNodeUI = Ext.extend(
        GeoExt.tree.LayerNodeUI, new GeoExt.tree.RadioButtonMixin()
    );

Again, thank you for your help!

Regards,
.david

2010/9/20 Andreas Hocevar <ahocevar at opengeo.org>:
> Hi,
>
> please see comments inline.
>
>
> On Sep 20, 2010, at 17:02 , David E. Reksten wrote:
>
>> Hi all,
>>
>> after having spent a lot of time trying different strategies, I still
>> can't for the life of me figure out how to dynamically add a vector
>> layer to my layer tree.
>>
>> What I have so far:
>>
>>    mapPanel = new GeoExt.MapPanel({
>>        border: true,
>>        region: "center",
>>        map: new OpenLayers.Map(myMapConfig);,
>>        margins: '0 5 5 0',
>>        layers: [baseLayer1, baseLayer2, baseLayer3]
>>    });
>>
>>    treeConfig = new OpenLayers.Format.JSON().write([{
>
> There is no need to JSON-encode above. In the example where you copied the code from (tree.js) this is only done to allow live-editing of the tree configuration. Use the object directly, don't send it to OpenLayers.Format.JSON.write.
>
>>        nodeType: "gx_baselayercontainer",
>>        text: "Base layers",
>>        expanded: true
>>    }, {
>>        nodeType: "gx_overlaylayercontainer",
>>        text: "My vector layers", // I want the new vector layers to
>> appear here...
>>        expanded: true,
>>        loader: {
>>            baseAttrs: {
>>                radioGroup: "foo",
>>                uiProvider: "use_radio"
>>            }
>
> I doubt that you want radioGroup, and I doubt that you want to use the use_radio uiProvider. See below.
>
>>        }
>>    }], true);
>>
>>    treePanel = new Ext.tree.TreePanel({
>>        id: 'mainpanel',
>>        border: true,
>>        region: "west",
>>        title: "Map layers",
>>        width: 200,
>>        split: true,
>>        collapsible: true,
>>        margins: '0 0 5 5',
>>        collapseMode: "mini",
>>        autoScroll: true,
>>        loader: new Ext.tree.TreeLoader({
>>            applyLoader: false,
>>            uiProviders: {
>>                "use_radio": LayerNodeUI
>>            }
>
> You don't seem to have defined the LayerNodeUI in your code, and you don't need the uiProviders config option. I am pretty sure that using an undefined layer node ui causes your problem.
>
>>        }),
>>        root: {
>>            nodeType: "async",
>>            children: Ext.decode(treeConfig)
>
> Use the treeConfig directly.
>
>>        },
>>        rootVisible: false,
>>        lines: false
>>    });
>>
>> The user is supposed to add one or several named layers (by clicking a
>> button that triggers the following):
>>
>> function addVectorLayer() {
>>    Ext.MessageBox.prompt('New layer', 'Type name for layer:',
>>        function (btn, text) {
>>            if (btn == 'ok') {
>>                var newVectorLayer = new OpenLayers.Layer.Vector(
>>                    text,
>>                    {
>>                        projection: new OpenLayers.Projection("EPSG:4326"),
>>                        displayInLayerSwitcher: false,
>>                        isBaseLayer: false,
>>                        styleMap: new OpenLayers.StyleMap({
>>                            "default": new OpenLayers.Style(
>>                                OpenLayers.Util.applyDefaults({
>>                                    fillColor:"#FF6666",
>>                                    strokeColor: "#FF3333",
>>                                    strokeWidth: 2
>>                                },
>>                                OpenLayers.Feature.Vector.style["default"])
>>                            )
>>                        })
>>                );
>>                // ***** THIS IS WHERE IT FAILS ******
>>                map.addLayer(newVectorLayer); // this works, but does
>> not add the layer to my treePanel
>>                mapPanel.layers.add(newVectorLayer); // ...so I tried
>> this but get an exception
>>            };
>>        }
>>    );
>>
>> };
>>
>> I have looked and looked at the example in
>> http://dev.geoext.org/trunk/geoext/examples/layercontainer.js but
>> still can't get it to work and I guess that I must be missing
>> something basic in how I use these components. For instance, my gut
>> feeling tells me that the treePanel object should probably be told
>> about the mapPanel somewhere, or is there some magic going on behind
>> my back?
>
> Yes, there is some magic going on. If you don't provide a layer store, your tree will use Ext.MapPanel.guess().layers - this only works if your application just has a single map.
>
> Regards,
> Andreas.
>
>>
>> Any help with this is greatly appreciated!
>>
>> Regards,
>> .david
>> _______________________________________________
>> Users mailing list
>> Users at geoext.org
>> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
>
>
> --
> Andreas Hocevar
> OpenGeo - http://opengeo.org/
> Expert service straight from the developers.
>
>