Javascript Doppler Radar Object

I was looking around for a way to display a radar map on a website based on a given location. If you go to the NOAA National Weather Service site, you can get the image you need, however, the image they use now is actually a composite image that layers transparent images on top of each other and uses the z-index for each layer. It makes it much less intensive for their system to really only have to render one, maybe two layers. The majority of the layers such as topographic, county lines, highways, etc. are static. Only the radar data and weather warnings need to be rendered.

I figured this was as good as anything so I looked a little closer. What’s really cool is that the images you need can simply be referenced with a full URL to the NWS website–that is, there is no server side coding or or need for XmlHttpRequest (AJAX). You just need a little Javascipt to determine what the image name should be, again, based on location. You can download the Javascript file I wrote that encapsulates this functionality here: NWSRadar.js.

The following is the basic usage. As usual, place this in the head of your HTML:


And then instantiate the object like this:

var radar = new NWSRadar("PUX", 10, 10);

The constructor signature is like this:

function NWSRadar(radarid, left, top, width, height)

The only required parameter is radarid. Because this uses divs, I needed to specify explicitly the location where to place the image on the screen so we are using absolute positioning. This will make is so the width and height parameters work correctly as well. If you want the radar image to be in a table element or some other flow type layout, then you simply specify a div that encloses the script and has its style set to relative positioning.

In case it’s not clear, here’s what each of the constructor parameters represent:

  • radarid: This is the ID for the location that is used by the National Weather Service. Go to the site and find the location you need. For my example above, I used “PUX” which is Pueblo, Colorado. To find the Radar ID you need, go to the NWS website and enter in your city and state in the “Local Forcast by City, St” box in the upper left-hand corner. Then click on the left most image under the heading Radar and Satellite Images. On the ensuing page, you will see in the URL the id field. This is your radarid.
  • left: The absolute position of the left side of the image.
  • top: The absolute position of the top side of the image.
  • width: The width of the image. Defaults to 600px which is the NWS default size.
  • height: The height of the image. Defaults to 550px which is the NWS default size.

Once your object has been instantiated, simply call render() like this:

radar.render();

And here is what it should look like:


And here is a full HTML test page




NWS Weather Radar for Pueblo, CO







2 thoughts on “Javascript Doppler Radar Object”

  1. I must be really stupid or something. This is exactly what I want to put on my website, but I cannot make this thing work. The page is just blank..www.heartotexas.com/moreweather.htm Any ideas on what is wrong?

  2. I just looked at the site you linked to and it seems to render just fine in Firefox, Camino, and Safari. It doesn’t, however, seem to work in IE, which is strange since it does render ok in IE in my blog post. I think it has to do with positioning. If you view source on this page, you’ll notice that my own usage of it has set the positioning set to relative. Create this style in your page:

    <style>#bkgrnd {height:555px; width:605px; position:relative; left:0px; top:0px;}</style>

    Then set your td (table data) id field = bkgrnd like this:

    <td id="bkgrnd">(radar code here)</td>

    If that doesn’t work, put a div inside of your td tag using the style specified above as its id instead of the td.

    Hope that helps.

    -Matt

Leave a Reply