I have a website using OpenLayers and the GeoExt library. My goal is to have an opacity slider for each of my layers (I have 5 layers). Right now, it's working with my vector layer, but not my WMS layers. I tried with the base layer (open street map) and it's working fine.
This is the code that creates the layer:
//This part is inside an "if success" in an ajax request.
map.addLayer(new OpenLayers.Layer.WMS(openlayers_wms_layer_analyses, CMCDataServer, {
layers: analysesWMSLayer[currentStatePeriod],
styles: analysesWMSStyle[currentStatePeriod],
format: "image/png",
transparent: true,
time: currentStateDate.getUTCFullYear() + "-" + ('0' + (currentStateDate.getUTCMonth() + 1)).slice(-2) + "-" + ('0' + currentStateDate.getUTCDate()).slice(-2) + "T" + timeChopArray[currentStateIndex] + ":00:00Z"
},
{
opacity: 0.73,
visibility: true
}));
Ext.getCmp('analyses_validity_display_extjs').setValue(extjs_gui_state_panel_valid_analyses);
Ext.getCmp('extjs_gui_legend_tab_panels').setActiveTab(0);
} else {
Ext.getCmp('analyses_validity_display_extjs').setValue(extjs_gui_state_panel_invalid_analyses);
Ext.Msg.alert(extjs_gui_analyses_missing_warning_title, extjs_gui_analyses_missing_warning);
Ext.getCmp('analyses_checkbox_extjs').setValue(false);
}
}
});
//This part is a little lower in my code, it's an "else" after the ajax request on top.
}else if(map.getLayersByName(openlayers_wms_layer_analyses).length!=0){
adjustStatePanelAnalysesValidity();
map.removeLayer(map.getLayersByName(openlayers_wms_layer_analyses)[0]);
}
adjustStatePanelProducts(checkbox, checked);
}
And this is my slider's code:
new GeoExt.LayerOpacitySlider({
width: 100,
value: 100,
layer: map.getLayersByName(openlayers_wms_layer_analyses)[0],
aggressive: true,
style: {
position: 'absolute',
left: '150px'
}
}),
I'm using the same exact code for my vector layer's slider and it's working fine. And if I change the name of the layer to my base layer, it's also working fine. I can't think it's because I'm not selecting the right layer, as I use the name used in the layer creation. If you check the way the layer is removed, you'll see that it uses the same line as me, like this: map.removeLayer(map.getLayersByName(openlayers_wms_layer_analyses)[0]);
Would you have an idea to help me please?
UPDATE: I wrote map.getLayersByName(openlayers_wms_layer_analyses)[0]
in the javascript console. If I did not checked the box to see the layer, I get 'undefined', but if it's check and I can see the layer, I see the layer correctly. Which means my slider should work.. no?
Finally, the GeoExt.LayerOpacitySlider do not seems to work at all when the layer is created "on the fly". I think it needs the layer to be created before the slider is created (which does not make any sense to me). I suppose this was a bug in GeoExt.
My solution was to build a "standard" Ext.Slider that changes the opacity. This worked perfectly, this is the code I used, if you have the same problem:
new Ext.Slider({
width: 125,
value: 73,
listeners: {
change: function(analysesSlider, val) {
map.getLayersByName(openlayers_wms_layer_analyses)[0].setOpacity(val/100);
}},
style: 'position:absolute; left:135px;'
}),