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>