Skip to content

Adding an opacity slider to an Openlayers map

It is straightforward to add an opacity slider for a raster layer using this line of code:

layer.setOpacity(this.value) to lyr_MyMapImage.setOpacity(this.value)

But this is untidy as the slider is located above the map.

How can I insert a slider (horizontal or vertical) onto the map to control the opacity of the layer so that it looks similar to the other map controls? Is there a plugin?

Thanks.

Answer

you can use jQuery slider. Example below:

$("#sliderLayer").slider({
    min: 0,
    max: 100,
    value: 100,
    slide: function(event, e) {
        lyr_MyMapImage.setOpacity(e.value / 100);
    },
    disabled: true
});

Also, here is jsFiddle:

https://jsfiddle.net/Svinjica/L7edtgx3/19/

Hope it helps:)