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:
<script type="text/javascript" src="NWSRadar.js"></script>
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NWS Weather Radar for Pueblo, CO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script type="text/javascript" src="NWSRadar.js"></script>
<body>
<script type="text/javascript">
var radar = new NWSRadar("PUX", 10, 10);
radar.render();
</script>
</body>
</html> |