Create an InteractiveMapApp using MapLibre
An InteractiveMapApp can be created using MapLibre by changing the map config strategy to 'maplibre'. Also notice in the config how we moved the legend over to the lower left as well as slightly bumping the timeline up.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aeris JavaScript SDK - Create an Interactive Map App using MapLibre</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>
#map {
height: 600px;
margin: 30px auto;
width: 1000px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.onload = () => {
const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
const utils = aeris.utils;
aeris.apps().then((apps) => {
const map = new apps.InteractiveMapApp('#map', {
map: {
strategy: 'maplibre',
style: 'https://demotiles.maplibre.org/style.json',
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'
}]
},
legends: {
position: {
pin: 'bottomleft',
translate: { x: 10, y: -30 }
}
},
timeline: {
position: {
translate: {x: 0, y: -15}
}
}
},
});
});
};
</script>
</body>
</html>