Google Maps API Weather Forecast 3

Question

I am trying to implement loop radar animation on a google map. This site: http://mesonet.agron.iastate.edu/ogc/ provides radar images from the current time up to 60 minutes ago.

I am currently downloading these images and using a timer to add / remove each image to the map. This technically works, but the result is very volatile. There is a noticeable time when there is no visible radar on the map. Reducing the timeout only worsens the effect, because the radar image does not have enough time to load until it is deleted.

Are there any smoothing methods for animations? Or am I all about this wrong?

the 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); } 

Answer 1

In the hope that this will help someone else, the following shows how I decided to solve the problem. Instead of adding / removing overlay images, I just changed the opacity. This gave me a much smoother animation. The following example will go 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); } 

}

Answer 2

the question you know if this maisonette site has some even layer at a lower level if the scale is 12

if I cannot loop the animation with

http://radblast.wunderground.com/cgi-bin/radar/WUNIDS_composite?maxlat=34.96496076302826&maxlon=-89.51954101562501&minlat=29.38958076527275&minlon=-98.30860351562501&minpe=00Q&frame=0&p&&&==&&me==&&&==&&me==&&&==&&&==&&&==&&&=&&=&&= 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

Answer 3

Not the answer, and it’s a pity that he does not necrotize it, but are there any other overlays (say, any of their GOES images) that will be displayed without their “animation”?

Basically I have code that looks like (and then I control show / hide with selectors using 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 arises because I cannot find a way to select only certain tiles for the actual animation, and not for each overlay in map.overlayMapTypes.getLength ()