leaflet-image-overlay

by justin_barber_arvig

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.css">
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.Default.css">
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/leaflet.markercluster.js"></script>
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/example/realworld.10000.js"></script>
<div id="map"></div>

CSS

#map {
  height: 480px;
}

JavaScript

var mapquestOSM = L.tileLayer("http://{s}.tiles.mapbox.com/v3/am3081.h0po4e8k/{z}/{x}/{y}.png");


map = L.map("map", {
	center: [37.5, -98.05],
	zoom: 4,
        minZoom: 4,
        maxZoom: 10,
	layers: [mapquestOSM],
        zoomControl: false,
	});
  var bounds = [[46.588276, -95.573723], [46.688276, -95.673723]];
// create an orange rectangle
L.rectangle(bounds, {color: "#000", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);
		
var radarLayers = [];
for(var hour = 0; hour <= 10; hour++){  
	console.log("hour = " + hour);
	time = (50)-(hour * 5);
	if (hour < 10) {
	var layer = 'nexrad-n0r-900913-m'+time+'m'
	radarLayers[hour] = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
			layers: layer,
			format: 'image/png',
			transparent: true,
			opacity: 0.0,
		});
		console.log(layer);
                radarLayers[hour].addTo(map);

	} 
	if (time == 0) {
		var layer = 'nexrad-n0r-900913'
		radarLayers[hour] = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
		layers: layer,
		format: 'image/png',
		transparent: true,
		opacity: 0.0,
	});
	console.log(layer);
        radarLayers[hour].addTo(map);
	}
	}

$('#timeSlider').on('change',function(){
	console.log($(this).val());
	radarLayers.map(function(layer){ layer.setOpacity(0)});
	radarLayers[$(this).val()].setOpacity(0.5); 
});

var i = 0;                     //  set your counter to 1

function myLoop () {           //  create a loop function
   setTimeout(function () {    //  call a 3s setTimeout when the loop is called
     console.log(i);
     radarLayers.map(function(layer){ layer.setOpacity(0)});
     radarLayers[i].setOpacity(0.5); 
     $('#timeSlider').val(i);          //  your code here
      i++;                     //  increment the counter
      if (i < 10) {            //  if the counter < 10, call the loop function
         myLoop();             //  ..  again which will trigger another 
      }else{
...