I'm excited about something I just cooked up and wanted to pass it along for others to use. I've been spending a lot of quality time trying to incorporate weather radar overlays into my current project. I've been able to add them to my map as a mapImageLayer successfully and one of the comments I received back from a co-worker was can you loop the radar image?
As designed, mapImageLayers don't have any animation functionality but I thought you might be able to fudge it using javascript's window.setInterval method and then shuffling out the mapImage in the layer at a given interval. Sure enough- you can!
The ideal use for this is animating radar images and this is exactly what I'm using it for. If you're interested in using it for this purpose, read on...
To set things up, first you need to figure out what your local radar site is named and what radar product you want to use. My suggestion is to go to this NWS site and click on the symbol closest to your location. Once you click on that symbol, the current radar image will be displayed. On that dialog, look in the upper left corner where it says "Adjacent Radars." The three letter code in the center is the name of the radar that you are using. Jot that down because you'll need that later.
The next thing you need to do is determine the parameters for the mapImage representation of the radar image. The easiest way to do this is to visit this NWS page and download one of their KMZ files for the radar and product you want to incorporate. Find your radar under the "All images for single radar" combo box and grab the KMZ file.
Open the KMZ in Google Earth and then drill down into the folder of the product you want to use (Short-Range Reflectivity, 1-Hour Precipitation, etc). Right click and access the properties of the image overlay. Go to the Location tab and jot down what the lat/long bounding box is for that particular product (this will vary from product to product but it is consistent between images). These are the lat/longs you'll specify in my example code while defining the mapImage.
Lastly, go to the NWS image file site and then follow the link listed there for the accessing the individual radar site images. They are arranged into subfolders according to the product (reflectivity, 1-hour precipitation, etc). Now- within the product folder, there will be many subfolders along with GIF images (which are actually the "current" radar image).
Each subfolder name is the name of the radar site, which you jotted down earlier. The folder contains an archive of previous radar images and this is where we will get our individual images for the animation. Inside the folder you will see a series of GIFs that have the naming format of <Radar Site abbreviation>_<Date>_<Time>_<Product>.gif and the most recent images are found at the bottom of the directory.
To taylor this example for location, simply update the URL found in the getNwsFileList function at the line that starts with "loadContents" with the URL of the folder I was just describing. The code will digest the list of files on that site and push them into an array of file names. You'll also have to update the parameters for the mapImage as previously discussed.
My little solution is still a little rough around the edges- it's a little too jerky the first run since it's loading the images into the browser's cache. Once it does, though, the animation runs pretty nice. I tried commenting my code throughout so hopefully that all makes sense. You may have noticed on ESRI's blog this week a post about a web map that also incorporates a radar animation. It draws upon a NWS REST service with 1km cell resolution and looks pretty bad zoomed in. For whatever reason, the images I am using in my example have a finer resolution and hold up better while zoomed in. Maybe because they are regional images instead of country wide, I dunno.
Anyways, I hope this proves useful for others. Naturally, it would be great if this was built into the API but this could be an acceptable workaround. I have submitted an idea for adding this functionality to the API if you're so inclined to vote for it. I have attached the code for posterity. Enjoy!
