Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer

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.

share|improve this answer
    
Thank you!..I will try it out –  Ravin Aug 13 '13 at 15:39
    
I did not get it for some reason.. I changed the map.getLayerIndex to map.getZIndex and map.layers.length to map.getNumLayers() but did not work..and is map.events.register supposed to have layer switcher object or the map itself?..i tried putting in the layerswitcher object too, but did not work –  Ravin Aug 13 '13 at 19:04
    
@Ravin events.register should be on the map itself. What version of OpenLayers are you using? –  CHenderson Aug 14 '13 at 9:50
    
I am using Openlayers 2.13.1 –  Ravin Aug 22 '13 at 23:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.