Adjust a layer's opacity

Drag the range slider to adjust the opacity of a raster layer on top of a map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/adjust-layer-opacity/

by Nikolay Petrov

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css">
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .map-overlay {
        font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 25%;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay label {
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicGV0cm92bm4iLCJhIjoiVHJkcXROMCJ9.hzniKblVA-O0YJSvCfwztg';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        center: [-87.6321, 41.8362],
        minZoom: 9.5,
        maxZoom: 13,
        zoom: 9.5
    });

    map.on('load', () => {
        map.addSource('chicago', {
            'type': 'raster',
            'url': 'mapbox://mapbox.u8yyzaor'
        });
        map.addLayer({
            'id': 'chicago',
            'source': 'chicago',
            'type': 'raster'
        });

    });