Openlayers: How to make layer come to top after choosing it in layer switcher?

Question

I have a base layer and 3 image layers . I also have setup a layerswitcher so that user can choose which layer is to be overlayed on the base map and I have 3 sliders such that user can choose the opacity of each layer. The problem as of now is that because of layer indexing, for the user to see the image layer right above the base layer other layers have to be switched off. I want it such that when any of the layers is switched on it automatically comes to the top.

This is a link to the site.

And my code is below:

        var map = new OpenLayers.Map('map');

        var NaturalEarth = new OpenLayers.Layer.WMS(
        "Satellite","http://arcims.csl.gov.uk/wmsconnector/com.esri.wms.Esrimap/naturalEarth?",
    {layers: 'naturalEarth'}
    );
        map.addLayer(NaturalEarth);
        map.zoomToMaxExtent();

        var imgLayer1 = new OpenLayers.Layer.Image(
            'T2',
            "http://wrf1.geology.um.maine.edu/bipush/OpenLayers-2.13.1/OpenLayers-2.13.1/kml/T2.png",
            new OpenLayers.Bounds(-180, -90, 180, 90),
            new OpenLayers.Size(512, 256)      
            //{numZoomLevels: 3}
     );



    var imgLayer2 = new OpenLayers.Layer.Image(
            'PWTR',
            "http://wrf1.geology.um.maine.edu/bipush/OpenLayers-2.13.1/OpenLayers-2.13.1/kml/PWTR.png",
            new OpenLayers.Bounds(-180, -90, 180, 90),
            new OpenLayers.Size(512, 256)

            //{numZoomLevels: 3}
     );
     var imgLayer3 = new OpenLayers.Layer.Image(
            'MSLP',
            "http://wrf1.geology.um.maine.edu/bipush/OpenLayers-2.13.1/OpenLayers-2.13.1/kml/MSLP.png",
            new OpenLayers.Bounds(-180, -90, 180, 90),
            new OpenLayers.Size(512, 256)

            //{numZoomLevels: 3}
     );

    imgLayer1.setIsBaseLayer(false);
    imgLayer2.setIsBaseLayer(false);
    imgLayer3.setIsBaseLayer(false);
    map.addLayers([imgLayer1,imgLayer2,imgLayer3]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.zoomToMaxExtent();


  </script>

    <div id = "slider1" style ="float:left">
        0% <input id = "slide" type = "range"
        min ="0" max="100" step = "1" value ="100"       
         onchange = "Layer1OpacityUpdate(this.value)" />100% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

    </div>


    <div id = "slider2" style ="float:left">
        0% <input id = "slide" type = "range"
        min ="0" max="100" step = "1" value ="100" 
         onchange = "Layer2OpacityUpdate(this.value)" />100% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    </div>

    <div id = "slider3" style ="float:left">
        0% <input id = "slide" type = "range"
        min ="0" max="100" step = "1" value ="100" 
         onchange = "Layer3OpacityUpdate(this.value)" />100% 
    </div>

</body>

Thanks in advance

Answer 1

The best way to achieve this would be to register an event handler for the map's changelayer event. Within this event handler you can identify the layer whose visibility has changed and its current z-index, which you can then use to calculate a delta that can be used with the map's raiseLayer function - or you could just use setLayerIndex and specify n + 1 as the value, where n = number of layers. The following is how you might use the raiseLayer method:

// Register the changelayer event listener
map.events.register('changelayer', map, MoveLayerToTop);

// Function to handle the event
function MoveLayerToTop(event) {
    // Make sure this is not a baselayer as they should not be moved above overlays
    // also make sure the property is visibility
    if (!event.layer.isBaseLayer && event.property == 'visibility') {
        // Get the layer's current z-index
        var currIndex = map.getLayerIndex(event.layer);

        // Calculate the delta to lift this layer to the top
        var indxDelta = map.layers.length - currIndx;

        // Call the raiseLayer function supplying the delta
        map.raiseLayer(event.layer, indxDelta);
    }
}

I haven't tested the code but it should work (might need tweaking a little) but I think you should get the idea from it. In effect, we are calculating a delta to shift the layer in the ordering. A positive delta lifts the layer up and a negative delta pushes the layer down the order.