Leaflet Nexrad loop hack
Hacking a javascript loop of nexrad radar using TMS from MESONET.
HTML
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
</body>
CSS
html, body { display: block; width: 100%; height: 100%; }
JavaScript
var map = new L.Map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//50 minutes ago...
var nexrad = L.tileLayer('http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913-m50m/{z}/{x}/{y}.png',{detectRetina:false}).addTo(map);
map.setView(new L.LatLng(39, -104), 6);
var nexRadLayerNames = ['nexrad-n0r-900913-m45m',
'nexrad-n0r-900913-m40m',
'nexrad-n0r-900913-m35m',
'nexrad-n0r-900913-m30m',
'nexrad-n0r-900913-m25m',
'nexrad-n0r-900913-m20m',
'nexrad-n0r-900913-m15m',
'nexrad-n0r-900913-m10m',
'nexrad-n0r-900913-m05m',
'nexrad-n0r-900913'];
var nexRadLayers =[];
nexRadLayers.push(nexrad);
$.each(nexRadLayerNames, function(idx, val){
//create a layer add add to the map
console.log('Adding ... ' + val + ':' + idx);
var newLayer = L.tileLayer('http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/' + val + '/{z}/{x}/{y}.png',{opacity:0.5,detectRetina:false});
nexRadLayers.push(newLayer);
});
function removeOldLayer(layer){
console.log('Removing layer...');
//remove load handler
console.dir(layer);
if(layer.hasEventListeners('load')){
layer.off('load');
}
console.log('removing layer now...');
map.removeLayer(layer);
}
var newIdx = 0, ctr = 0;
var curIdx = 0;
function swapMap(newIdx){
console.log('Adding ' + newIdx + ' to map');
var lyr = nexRadLayers[newIdx].addTo(map).on('load', function(){
console.log('Layer loaded message - removing ' +curIdx);
map.removeLayer(nexRadLayers[curIdx]);
curIdx = newIdx;
this.off('load');//unhook this handler so it does not get stacked
window.setTimeout(function(){
...