Skip to content
Advertisement

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.

Advertisement

Answer

In my jsfiddle I position the slider inside a proper openlayers custom control:

const sliderita = document.createElement('div');
sliderita.className = 'ol-control ol-unselectable slider';
sliderita.innerHTML = '<div id="sliderOSM"> <div id="custom-handle" class="ui-slider-handle"></div></div>';
map.addControl(new ol.control.Control({element: sliderita}));

https://jsfiddle.net/5w6sahx4/5/

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement