JavaScript SDK - Adding Custom Layer Buttons to an InteractiveMapApp

Add custom buttons to an interactive map application. The following example will display an interactive map application with a custom base layer toggle control to switch between the default Leaflet map style and a dark theme from Aeris Maps layers.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris JavaScript SDK - Interactive Map App with Custom Buttons</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 {
        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;
 
        aeris.apps().then((apps) => {
            const app = new apps.InteractiveMapApp('#app', {
                map: {
                    strategy: 'leaflet',
                    zoom: 4,
                    layers: 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id: 'radar',
                            value: 'radar:80',
                            title: 'Radar'
                        },{
                            id: 'satellite',
                            value: 'satellite:75',
                            title: 'Satellite'
                        },{
                            id: 'alerts',
                            value: 'alerts',
                            title: 'Alerts'
                        }]
                    }
                }
            });
 
            app.on('ready', () => {
                const layersPanel = app.getPanel('layers');
                if (layersPanel) {
                    const group = layersPanel.insertAt(0, {
                        title: 'Base Style',
                        multiselect: false,
                        buttons: [{
                            title: 'Standard',
                            value: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
                            selected: true
                        },{
                            title: 'Dark',
                            value: 'https://maps.api.xweather.com/[CLIENT_ID]_[CLIENT_SECRET]/flat-dk,states-outlines-dk:invert(),counties-dk:30:invert()/{z}/{x}/{y}/current.png',
                        }],
                        onChange: (value) => {
                            app.map.strategy.setBaseUrl(e.data.value);
                        }
                    }, false);
                }
            });
        });
 
    };
 
</script>
 
</body>
</html>