Weatherscan/webroot/js/radar.js

function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSat) {

	var map,
	divID = divIDin,
	intervalHours = intervalHoursIn,
	zoom = zoomIn,
	latitude  = latitudeIn,
	longitude = longitudeIn,
	timeLayers = [];

	this.setView = function(lat, long, zoomLevel){
		map.setView(L.latLng(lat, long), zoomLevel)
	};


	startAnimation();

	// snap date to 5 minute intervals
	function roundDate(date) {
		date.setUTCMinutes( Math.round(date.getUTCMinutes() / 5) * 5);
		date.setUTCSeconds(0);
		return date;
	}

	function startAnimation () {

		var endDate = roundDate(new Date()),
			player;

		map = L.map(divID, {
			zoom: zoom,
			fullscreenControl: false,
			center: [latitude, longitude]
			 // 31.205482,-82.4331197 test coordinates
		});


		// basemap
		// streets cj9fqw1e88aag2rs2al6m3ko2
		// satellite streets cj8p1qym6976p2rqut8oo6vxr
		// weatherscan green cj8owq50n926g2smvagdxg9t8
		// mapbox://styles/goldbblazez/ckgc7fwvr4qmn19pevtvhyabl
	//	https://api.mapbox.com/styles/v1/goldbblazez/ckgc8lzdz4lzh19qt7q9wbbr9.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiZ29sZGJibGF6ZXoiLCJhIjoiY2tiZTRnb2Q2MGkxajJwbzV2bWd5dXI5MyJ9.jU-2DqGCBI14K-acyN9RCw
		L.tileLayer('https://api.mapbox.com/styles/v1/goldbblazez/ckgc8lzdz4lzh19qt7q9wbbr9/tiles/{z}/{x}/{y}?access_token=' + map_key, {
			tileSize: 512,
			zoomOffset: -1
		}).addTo(map);

		$.getJSON("https://api.weather.com/v3/TileServer/series/productSet/PPAcore?filter=radar&apiKey=" + api_key, function(data) {
			for (var i = 0; i < data.seriesInfo.radar.series.length; i++) {
				timeLayers.push(
					L.tileLayer("https://api.weather.com/v3/TileServer/tile/radar?ts="+ data.seriesInfo.radar.series[i].ts +"&xyz={x}:{y}:{z}&apiKey=" + api_key, {
						opacity: 0
				}))
			}
			timeLayers.forEach(timeLayers => {

          timeLayers.addTo(map);
        });
		});

		const sleepNow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

		async function animationLoop() {
		  for (let i = timeLayers.length; i > 0; i--) {
				timeLayers[i - 1].setOpacity(1)
		    await sleepNow(100)
				timeLayers[i - 1].setOpacity(0)
		    if (i === 1) {
				timeLayers[i - 1].setOpacity(1)
				await	sleepNow(1750)
				timeLayers[i - 1].setOpacity(0)
					animationLoop()
				}
		  }
		}
		setTimeout(function() {
				animationLoop()
		}, 1000);

		if (withSat) {

			var goes_visible_sat = L.nonTiledLayer.wms('https://nowcoast.noaa.gov/arcgis/services/nowcoast/sat_meteo_imagery_time/MapServer/WMSServer', {
				layers: '9',  // 9 for visible sat
				format: 'image/png',
				transparent: true,
				opacity:0.7,
				useCanvas:true
			}),
			    satellitetimeLayer = L.timeDimension.layer.wms(goes_visible_sat, {
				proxy: proxy,
				updateTimeDimension: false,
				cache:1
			});

			satellitetimeLayer.addTo(map).on('timeload',function(t) {
				var canvas, ctx,
					imageData, data,
					i,
					layers = t.target._layers,
					keys = Object.keys(layers);

				for (var key of keys) {
					canvas = layers[key]._bufferCanvas;

					if (canvas.dataset.isAlpha){continue}

					ctx = canvas.getContext('2d');

					imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

					var pixels = imageData.data,
						brighten = 0,
						contrast = 10;
					for(var i = 0; i < pixels.length; i+=4){//loop through all data

						pixels[i] += brighten;
						pixels[i+1] += brighten;
						pixels[i+2] += brighten;

						var brightness = (pixels[i]+pixels[i+1]+pixels[i+2])/3; //get the brightness

						pixels[i]   += brightness > 127 ? contrast : -contrast;
						pixels[i+1] += brightness > 127 ? contrast : -contrast;
						pixels[i+2] += brightness > 127 ? contrast : -contrast;

						var rgb = pixels[i] + pixels[i+1] + pixels[i+2];
						pixels[i] = pixels[i+1] = pixels[i+2] = 255;
						pixels[i+3] = rgb / 3;
					}
					imageData.data = pixels;

					// overwrite original image
					ctx.putImageData(imageData, 0, 0);

					canvas.dataset.isAlpha = true;

				}

			});
		}


	}
}





/*
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */

(function(){
	//return;
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()