Examples
Adding custom buttons in the layers panel

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 Xweather('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>