I am trying to implement a looping radar animation on a google map. This site: / provides radar images from the current time to 60 minutes ago.
Currently, I am loading these images and using a timer to add/remove each image to the map. This technically works, but the result is very choppy. There is noticable time where there is no radar image visable on the map. Lowering the timeout, only worsens the effect because the radar image does not have enough time to load before it is removed.
Are there any techniques to smooth out the animation? Or am I going about this all wrong?
Code
var map;
var imageArray = [];
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Load Images and add them to imageArray
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return ".py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true,
});
imageArray.push(tileNEX);
tileNEX5 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return ".py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD5',
isPng: true,
});
imageArray.push(tileNEX5);
tileNEX10 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return ".py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD10',
isPng: true,
optimized: false
});
imageArray.push(tileNEX10);
tileNEX15 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return ".py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD15',
isPng: true,
});
imageArray.push(tileNEX15);
tileNEX20 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return ".py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD20',
isPng: true,
});
imageArray.push(tileNEX20);
animateRadar(imageArray);
}
google.maps.event.addDomListener(window, 'load', initialize);
function animateRadar(images) {
map.overlayMapTypes.push(images[0]);//Add first image
var index = 0;
window.setInterval(function(){
map.overlayMapTypes.pop();//Remove previous image
index++;
if(index >= images.length){
index = 0;
}
map.overlayMapTypes.push(images[index]);//Add new image
}, 1000);
}
I am trying to implement a looping radar animation on a google map. This site: http://mesonet.agron.iastate.edu/ogc/ provides radar images from the current time to 60 minutes ago.
Currently, I am loading these images and using a timer to add/remove each image to the map. This technically works, but the result is very choppy. There is noticable time where there is no radar image visable on the map. Lowering the timeout, only worsens the effect because the radar image does not have enough time to load before it is removed.
Are there any techniques to smooth out the animation? Or am I going about this all wrong?
Code
var map;
var imageArray = [];
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Load Images and add them to imageArray
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true,
});
imageArray.push(tileNEX);
tileNEX5 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD5',
isPng: true,
});
imageArray.push(tileNEX5);
tileNEX10 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD10',
isPng: true,
optimized: false
});
imageArray.push(tileNEX10);
tileNEX15 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD15',
isPng: true,
});
imageArray.push(tileNEX15);
tileNEX20 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD20',
isPng: true,
});
imageArray.push(tileNEX20);
animateRadar(imageArray);
}
google.maps.event.addDomListener(window, 'load', initialize);
function animateRadar(images) {
map.overlayMapTypes.push(images[0]);//Add first image
var index = 0;
window.setInterval(function(){
map.overlayMapTypes.pop();//Remove previous image
index++;
if(index >= images.length){
index = 0;
}
map.overlayMapTypes.push(images[index]);//Add new image
}, 1000);
}
3 Answers
Reset to default 11In hopes that this helps someone else, below is how I ended up solving the problem. Instead of adding/removing overlay images, I simply altered the opacity. This gave me a much smoother animation. The below example will cycle through the last 30 minutes of radar images.
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Load Images and add them to imageArray
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD',
isPng: true,
});
map.overlayMapTypes.push(tileNEX);
tileNEX5 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD5',
isPng: true,
});
map.overlayMapTypes.push(tileNEX5);
tileNEX10 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD10',
isPng: true,
optimized: false
});
map.overlayMapTypes.push(tileNEX10);
tileNEX15 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD15',
isPng: true,
});
map.overlayMapTypes.push(tileNEX15);
tileNEX20 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD20',
isPng: true,
});
map.overlayMapTypes.push(tileNEX20);
tileNEX25 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m25m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD25',
isPng: true,
});
map.overlayMapTypes.push(tileNEX25);
tileNEX30 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m30m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD30',
isPng: true,
});
map.overlayMapTypes.push(tileNEX30);
animateRadar();
}
google.maps.event.addDomListener(window, 'load', initialize);
function animateRadar() {
var index = map.overlayMapTypes.getLength() - 1;
window.setInterval(function(){
map.overlayMapTypes.getAt(index).setOpacity(0.00);
index--;
if(index < 0){
index = map.overlayMapTypes.getLength() - 1;
}
map.overlayMapTypes.getAt(index).setOpacity(0.60);
}, 400);
}
}
question you know if this site mesonet has some sort of smooth layer at smaller level if zoom is 12
unless i can loop the animation with
http://radblast.wunderground./cgi-bin/radar/WUNIDS_posite?maxlat=34.96496076302826&maxlon=-89.51954101562501&minlat=29.38958076527275&minlon=-98.30860351562501&type=00Q&frame=0&num=7&delay=25&width=800&height=600&png=0&smooth=1&min=0&noclutter=1&rainsnow=1&nodebug=0&theext=.gif&merge=elev&reproj.automerc=1&timelabel=1&timelabel.x=200&timelabel.y=12&brand=wundermap&rand=4564
Not an answer, and sorry for necro'ing this, but is there anyway to have other overlays (say any of their GOES images) be displayed without actually "animating" them?
Basically I have code that looks like (and then I'm controlling the show/hide with the selectors with the jQuery):
overlayMaps = [{
//NEXRAD
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.60,
name: 'NEXRAD',
isPng: true
}, {
//MRMS Hybrid-Scan Reflectivity Composite
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/q2-hsr-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.60,
name: 'GOES Water Vapor',
isPng: true
}, {
//GOESVIS
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.60,
name: 'GOES Visible',
isPng: true
}, {
//GOESIR
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-ir-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.60,
name: 'GOES Infrared',
isPng: true
}, {
//GOESWaterVapor
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-wv-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.9,
name: 'GOES Water Vapor',
isPng: true
}];
$('.overlay_layer').click(function() {
var layerID = parseInt($(this).attr('id'));
if ($(this).hasClass('active')) {
$(this).removeClass('active');
if (map.overlayMapTypes.getLength() > 0) {
map.overlayMapTypes.setAt(layerID, null);
}
} else {
$(this).addClass('active');
var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]);
map.overlayMapTypes.setAt(layerID, overlayMap);
}
});
for (i = 0; i < overlayMaps.length; i++) {
var overlayMap = new google.maps.ImageMapType(overlayMaps[00]);
map.overlayMapTypes.setAt(00, overlayMap);
//map.overlayMapTypes.push(null);
}
The problem es from the fact, I can't seem to find a way to only choose certain tiles to actually animate and not every overlay in map.overlayMapTypes.getLength()