JavaScript SDK - Adding Layer Opacity Controls to an InteractiveMapApp

Add raster layer opacity controls to an interactive map application. The following example will display an interactive map application with controls for each raster layer for adjusting its current opacity on the map. This example uses the built-in opacity control supported by layer panel buttons.

Interactive map application example with layer opacity controls


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris JavaScript SDK - Opacity Control with Interactive Map App</title>
    <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
    <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
 
    <style>
    #app {
        font-family: 'Helvetica','Arial',sans-serif;
        height: 600px;
        margin: 30px auto;
        width: 1000px;
    }
    </style>
 
</head>
<body>
 
<div id="app"></div>
 
<script>
 
    window.onload = () => {
 
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
 
        // set up the shared layer settings controls used across
        // multiple tile/raster layers
        const commonControls = {
            settings: [{
                type: 'opacity'
            }]
        };
 
        aeris.apps().then((apps) => {
            const map = new apps.InteractiveMapApp('#app', {
                map: {
                    strategy: 'leaflet',
                    zoom: 4,
                    layers: 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            value: 'radar',
                            title: 'Radar',
                            controls: commonControls
                        },{
                            value: 'satellite',
                            title: 'Satellite',
                            controls: commonControls
                        },{
                            value: 'alerts',
                            title: 'Alerts',
                            controls: commonControls
                        }]       
                    }
                }
            });
        });
 
    };
 
</script>
 
</body>
</html>