I am using qgis2web to publish a webmap, and then modifying the code to add features that I want. I am now adding a Tiled image from imagescale folders (e.g. \15 \16 \17 \18 and so forth). Using the API ol.layer.Tile, I have inserted the tiled map into the layers.js file produced by qgis2web.

var lyr_OrthoImageSM1 = new ol.layer.Tile({
    opacity: 1,
    title: "OrthoImageSM",
    source: new ol.source.XYZ({
    url: "{z}/{x}/{y}.png",
    attributions: [new ol.Attribution({html: 'Maptiler'})],
    tilePixelRatio: 1.000000,

... and add code for layer visibility (setVisible(true)) and add to the layersList variable. This part works great.

The tiled image that comes from MapTiler, and the output from that package has an Opacity Slider at the top. How do I get an opacity slider to work for my tiled image in Openlayers, as output by qgis2web?

From MapTiler, it looks as simple as an html line, but this isn't working for me because it's not pointing to my specific layer.

<input id="slider" type="range" min="0" max="1" 
   step="0.1" value="1" oninput="layer.setOpacity(this.value)">

1 Answer 1


Change layer.setOpacity(this.value) to lyr_OrthoImageSM1.setOpacity(this.value).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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