Animated WMS NOAA w Mapbox GL


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a WMS source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2x5IiwiYSI6IjdiYzFmZmY5NTExOTQ0MTExMGVhZDBkZTIwMmRlYjJhIn0.hOz2brurCBMGWGU5EI-waQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'http://gpstrails.info/ex/gl/style/dark_base_03.json',
    zoom: 3.5,
    center: [-79,36]
});

map.on('load', function() {
    var frameCount = 7;
    for (var i = 0; i < frameCount; i++) {
    var revi= frameCount-i;
    var t = new Date();
    var d = t.getTime();
    var newD=d-60*1000*revi*30;
    var datetext = new Date(newD);
    var newDiso=datetext.toISOString();
    var timeBlock = newDiso;
    map.addLayer({
        'id': 'wms-test-layer'+i,
        'type': 'raster',
        'source': {
        'type': 'raster',
        'tiles': [
'https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WmsServer?service=WMS&request=GetMap&version=1.3.0&layers=1&styles=&format=image/png&transparent=true&height=256&width=256&crs=EPSG:3857&bbox={bbox-epsg-3857}&time='+timeBlock
],
        'tileSize': 256
         },
        'paint': { 'raster-opacity': 1,
            'raster-opacity-transition': {
            duration: 0
         }}
     }, 'aeroway-taxiway');
}
    var frame = frameCount ;
    setInterval(function() {
        map.setPaintProperty('wms-test-layer' + frame, 'raster-opacity', 0);
        frame = (frame + 1) % frameCount;
        map.setPaintProperty('wms-test-layer' + frame, 'raster-opacity', 1);

    }, 1000);
});
</script>
</body>
</html>