Ordering Layers Dynamically

Question

I'm adding layers to a GeoExt map panel map dynamically in response to a user's selection. I have a corresponding FeatureStore definition from which I create the layers. When a new layer is added, I'd like it to be the top most layer.

var vecLayer = new OpenLayers.Layer.Vector(natureOfAttack, {
            styleMap: new OpenLayers.StyleMap({
                'default': style
            }),
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./server/maps/incidents.php",
                params: {natureOfAttack: natureOfAttack},
                format: new OpenLayers.Format.GeoJSON()
            }),
            strategies: [new OpenLayers.Strategy.Fixed()]
        });
        layers.push(vecLayer);

        // manually bind store to layer
        me.getIncidentMapStore().bind(vecLayer);

        mapPanel.map.addLayers(layers);

        // some more controls
        var selectCtrl = new OpenLayers.Control.SelectFeature(vecLayer);
        mapPanel.map.addControl(selectCtrl);

        vecLayer.events.on({
            'featureselected': function(e) {
                me.showIncidentDetailPopup(e.feature);
            }
        });

        selectCtrl.activate();

        // for dev purpose
        map = mapPanel.map;
        mapPanel = mapPanel;

I've then added:

var cLayer = map.getLayersByName(natureOfAttack)[0];
    map.setLayerIndex(cLayer, map.layers.length+1);

in an attempt to make the layer the top most layer, but this doesn't seem to work.

Having thought about it for a while, I came to the conclusion that I should probably have a listener in the store definition as shown below:

Ext.define('CMD.store.SampleStore', {
    extend: 'GeoExt.data.FeatureStore',
    model: 'CMD.model.Summit',
    autoLoad: false,

    listeners: {
        add: function(thisStore, records, index) {
            console.log('FeatureStore: A new layer added...');
        }
    }
});

but the event in the listener is not executed. Any idea on how I can achieve this will be appreciated.

UPDATE:

I've added:

vecLayer.events.on(
        'loadend': function(layer) {
            map.setLayerIndex(layer, map.getLayerIndex(layer)+5);
        }
    });

to the vector layer. This makes the created vector layer the top most layer. However, the error TypeError: a.setZIndex is not a function is generated.

UPDATE:

My environment: GeoExt 2, ExtJS 4, OpenLayers 2.12.

Answer 1

you can try map.raiseLayer function. Following code will help you to make your added layer to the top most layer with getting the length of layers.

map.raiseLayer(addedLayer, map.layers.length);

i hope it helps you...