[GIS] How to add layer opacity slider in Openlayers 4 and qgis2web

opacityqgis2webtiles

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)">

Best Answer

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

Related Question