In this post I am dealing with local or what the NWS calls their "Ridge" radar.There are several radar images available from the NWS Server. The NWS even has instructions for downloading images on their web site at http://www.srh.noaa.gov/jetstream/remote/ridge_download.htm.
The key to the local radar is just CSS for overlayingng the images. In my code below the images and overlays are each in a div tag with 0,0 absolute positioning. On this page I also used a "wrapper" div to position the image on the page.
Before you start you will need to know which station identifier covers your area. A list of stations is available http://www.srh.noaa.gov/ridge/index.htm. Long range or short range images are also available. I use short range BMX or Birmingham, AL in my sample at the bottom. Here is the source code:
<div id="topo" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/Overlays/Topo/Short/BMX_Topo_Short.jpg"></div>
<div id="county" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/Overlays/County/Short/BMX_County_Short.gif"></div>
<div id="radar" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/RadarImg/N0R/BMX_N0R_0.gif"></div>
<div id="city" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/Overlays/Cities/Short/BMX_City_Short.gif"></div>
<div id="warning" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/Warnings/Short/BMX_Warnings_0.gif"></div>
<div id="legend" style="position: absolute; left:0px; top: 0px;"><img src="http://www.srh.noaa.gov/ridge/Legend/N0R/BMX_N0R_Legend_0.gif"></div>
</div>
Comments