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%
</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%
</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
Best 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'sraiseLayer
function - or you could just usesetLayerIndex
and specifyn + 1
as the value, wheren = number of layers
. The following is how you might use theraiseLayer
method: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.