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