Animating an InteractiveMap
Animate an interactive map. The following example will enabling toggling the map animation with radar and stormreports layers for the past 6 hours.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Xweather JavaScript SDK - Interactive Map Animation</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: 400px;
}
.map-container {
margin: 30px auto;
width: 800px;
}
</style>
</head>
<body>
<div class="map-container">
<div id="map"></div>
<div class="map-controls" style="margin-top:5px;">
<a id="map-toggle-anim" href="./#">Play</a>
</div>
</div>
<script>
window.onload = () => {
const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
aeris.views().then(views => {
const map = new views.InteractiveMap(document.getElementById('map'), {
center: {
lat: 39.0,
lon: -95.5
},
zoom: 4,
layers: 'radar,stormreports',
timeline: {
from: -6 * 3600,
to: 0
}
});
const control = document.getElementById('map-toggle-anim');
map.on('load', () => {
// update the control label based on the map animation state
map.on('timeline:play', () => {
control.innerHTML = 'Stop';
});
map.on('timeline:stop', () => {
control.innerHTML = 'Play';
});
// toggle the animation when the play/stop button is clicked
control.addEventListener('click', function(e) {
e.preventDefault();
map.timeline.toggle();
});
});
});
};
</script>
</body>
</html>