NWS Watch/Warning Map On Your Own Site???

[Tony Laubach]

http://www.crh.noaa.gov/bou/

The Watch/Warning map on the front of every NWS page I think I've seen on other websites before. I unfortunately am coming up short in finding those sites, but was wondering if anyone knew of a way to pull the imagery/code to display this on other webpages?

Thanks!

 

[Greg Higgins]

WeatherMessage software

 

[Darren Addy]

It looks like you can pull this imagery just by calling it directly.
Here are a couple of examples-

Putting the following URL in your img src tag:

http://forecast.weather.gov/wwamap/png/oax.png

looks like this:

OAX = Omaha. Change it to the NWS office map you want. For example, Buffalo, NY
Putting the following URL in your img src tag:

http://forecast.weather.gov/wwamap/png/buf.png

looks like this:




Not that this does not include the color key and does not link to the local forecast page. To make it link to the local forecast page, you'd just put a link tag around the image that looks like this:

<a href="http://forecast.weather.gov/MapClick.php?site=buf&FcstType=text&map.x=161&map.y=127&site=BUF">image tag goes here</a>

To get the X/Y coordinates using PHP you'd do this. (The example on this page echos the coordinates above the image. You'd want to use them to dynamically generate a properly formated link.)

EDIT: see my post below for the PHP code that does just that.

As far as the color key goes, I'd just take a screenshot of the NWS key (or if you want to get fancy, take a screenshot and make your own in Photoshop, using the eyedropper tool to grab the colors needed from the NWS image. You would need to put that image on a web server (or image host) and then insert the image in your web page or blog post, as you would any other.

 

[Kurt Hulst]

Tony I am not sure if your looking for regional or local NWO's, I do have the code on my website for the full national.

 

[Darren Addy]

Just to expand on the subject of "code to grab the X Y coordinates and then link to the appropriate local page using PHP" (that I alluded to above), I just tested this and it works. The key is in passing the clicked variables in the form tag, action attribute. (Note, this code will only work in a page named *whatever*.php and put on a PHP-capable web server). You could do the same with any scripting language. Here's a way to do it in javascript if you don't have a scripting language available to you or just want to do it in an html document.

<?php
$foo_x=$_POST['foo_x'];
$foo_y=$_POST['foo_y'];
?>

<form name="form1" method="GET" action="http://forecast.weather.gov/MapClick.php?X="$foo_x&Y=$foo_y">                
<input type="image" name="map" src="http://forecast.weather.gov/wwamap/png/oax.png" width="354" height="274" border="0" align="middle" alt="Map of Forecast Area">
<input type="hidden" name="site" value="OAX">        
</form>

For example of how this works, you can test the above code here. Click on the map near Hastings, for example, and you'll go to the detailed Hastings NWS local forecast page.

 

[Tony Laubach]

Thank's so much for passing that along. I got it working on the first try. I am attempting to recreate the script that generates the key as I believe that is something that can be done with some work. Ultimately, that's my goal and I'm hopeful I can get it working properly. In the meantime, thank you for adding another dimension to my site with that PHP script.

I'll keep you posted!