Topic: How to Run US Animated Radar on Google Maps

[ELDoradoWx]

...anybody have a Google Maps API v3 of these routines?  Namely radar.js.

Thanks...and, again, great stuff here.

Dave.

I want work on it at some point but it's not real high on my priority list just yet. I have a long list of scripts in my todo list. I have been working on a script that writes the normal "rainfall to date" for every day of the year, along with the "normal & record highs and lows" for each day of the year. That script is up and running, I just need to clean it up a bit, then onto the next.

I was using the Wunderground high and low data via Weather Display, but the closest city I could use is a significantly different climate. I suspect that might be an issue for many of our rural area stations in the U.S..

[stu-in-flag]

This is a very cool script...

that I would like to incorporate into my website. I have it running as a small image on my main page,

http://stu-in-flag.net/index.php

I have been able to get it to run on an independent page

http://stu-in-flag.net/ridge.html.

But, when I try to link to a site that includes, via php include, the ridge.html file

http://stu-in-flag.net/big-radar.php

the site will literally run a single, first time. After that the ridge.html file will not animate the radar, and it appears that the css file does not function on that page. I have tried to breakdown the ridge.html code and place it in the big-radar.php file, but that ends up causing the same issue.

Thoughts?

Thanks in advance!

[DaculaWeather]

Works for me!

[marylandwx]

I love this script!  I just found it today and have put it on my site:  http://midatlanticweathergroup.org/

The only issue is, for each marker, the bubble pops up in the same spot.  Example:  If you click on a site in VA, it will still pop up to the north of MD.

How do I go about fixing that?

[ELDoradoWx]

I love this script!  I just found it today and have put it on my site:  http://midatlanticweathergroup.org/

The only issue is, for each marker, the bubble pops up in the same spot.  Example:  If you click on a site in VA, it will still pop up to the north of MD.

How do I go about fixing that?

Glad that you find the script useful for your site..

The original marker code was written for 1 marker only. I would usually leave it up to the individual users to do their own research and add on their own custom code, but I added a new marker function to the map today, along with the code for 3 separate markers. You can easily add on as many markers as you like in the proper area near the bottom of the script. With my adding of 3 markers you should be able to use the same syntax samples to add on as many markers as you wish.

Code: [Select]

<script type="text/javascript">

var Clock ;
var Cycle ;
var Google;
var Helper;

var Last=  0;
var Skew=  0;
var Wrap= 10;
var Idle=100;
var Back=500;

var Radar=[];

var Ridge=["DAX"];

var Product="NCR";

function createMarker(point, text, title) {
  var marker = new GMarker(point,{title:title});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(text);
  });
  return marker;
}


function Pause(pause)
{
Idle=pause*10;
Back=pause*50;
}

function Opacity(opacity)
{
for (var i=0;Ridge[i];i++)
{
Radar[i].opacity(opacity);
}
}

function Loop()
{
for (var i=0;Ridge[i];i++)
{
Helper.childNodes[i].childNodes[0].data=Radar[i].select(Last);
}

Last=(Last+1)%Wrap;

Clock=clearTimeout(Clock);

Clock=setTimeout("Loop()",Last ? Idle : Back);
}

function Feed()
{
var stub="http://www.srh.noaa.gov/ridge2/JSON_generator.php?callback=CallBack&amp;frames="+Wrap;

for (var i=0;Ridge[i];i++)
{
Radar[i].feed(stub+"&rid="+Ridge[i]+"&amp;product="+Product);
}

Cycle=clearTimeout(Cycle);

Cycle=setTimeout("Feed()",150000);
}

function CallBack(callback)
{
var stub="http://www.srh.noaa.gov/";

var pair;

var reload=[];

for (var i=0;callback.directory[i];i++)
{
pair=callback.directory[i].match(/([A-Z][A-Z][A-Z]|[A-Z][0-9][A-Z])/g);

reload[i]=stub+callback.directory[i];
}

for (var i=0;Ridge[i];i++)
{
if (pair) if (pair[0]==Product) if (pair[1]==Ridge[i]) Radar[i].reload(reload);
}
}

function Load()
{
Google=document.getElementById("google");

Google.style.width ="640px";
Google.style.height="640px";

GDraggableObject.setDraggableCursor("pointer");
GDraggableObject.setDraggingCursor ("pointer");

Google=new GMap2(Google);

Google.setCenter (new GLatLng(38.496,-121.672),7, G_PHYSICAL_MAP);
        Google.setUIToDefault();
Helper=document.getElementById("helper");


for (var i=0;Ridge[i];i++)
{
Helper.appendChild(document.createElement("DIV"));

Helper.childNodes[i].appendChild(document.createTextNode(""));

Radar[i]=new FrameAnimationLayerOverlay({bbox:BBox(Ridge[i],Product),size:{x:640,y:640},last:Last,skew:Skew,wrap:Wrap,name:Ridge[i]+"_"+Product});

Google.addOverlay(Radar[i]);
}

Feed();
Loop();

var marker = createMarker(
new GLatLng(38.496,-120.672),
"El Dorado Weather<br/>Updated: <?php echo $date; ?> at <?php echo $time; ?><br/><br/>Temperature: <?php echo $temperature; ?>&deg;F<br/>Pressure: <?php echo $baroinusa2dp; ?><br/>Rain Today: <?php echo $dayrn; ?>in<br/>Humidity: <?php echo $humidity; ?>%<br/>Dew Pt: <?php echo $dewpt; ?>&deg;F", 'El Dorado Weather');
Google.addOverlay(marker);

var marker = createMarker(
new GLatLng(38.496,-121.672),
'Marker text', 'Sacramento Area');
Google.addOverlay(marker);

var marker = createMarker(
new GLatLng(38.496,-122.672),
'Marker text', "Near Highway 101");
Google.addOverlay(marker);

}

function Free()
{
GUnload();
}

</script>
The sample page for this code in action can be seen here: http://www.eldoradocountyweather.com/current/misc/google-maps/dax/ridge.html

[marylandwx]

Thank you very much! 

Only issue I seem to have is when I change "NCR" to "N0R" it doesn't load the radar.

[wolfie]

...anybody have a Google Maps API v3 of these routines?  Namely radar.js.

Thanks...and, again, great stuff here.

Dave.

Has anyone ported this over for API v3?

Thanks, looks like a great script!

[MaineBirder]

Thank you for this great script!

I am having a problem getting the radar to show up on the map. I tried all the suggestions from the previous 9 pages of this thread and still cannot get it to show.

If it helps, I get this error in IE:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
Timestamp: Thu, 6 Jan 2011 21:02:55 UTC


Message: '2' is null or not an object
Line: 2487
Char: 2
Code: 0
URI: http://www.bathmaineweather.com/ridge.js

Here is the page: http://www.bathmaineweather.com/ridge.html


Thank you for any help you can provide!

[ELDoradoWx]

Thank you for this great script!

I am having a problem getting the radar to show up on the map. I tried all the suggestions from the previous 9 pages of this thread and still cannot get it to show.

If it helps, I get this error in IE:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
Timestamp: Thu, 6 Jan 2011 21:02:55 UTC


Message: '2' is null or not an object
Line: 2487
Char: 2
Code: 0
URI: http://www.bathmaineweather.com/ridge.js

Here is the page: http://www.bathmaineweather.com/ridge.html


Thank you for any help you can provide!

Hi MaineBirder,

First off, welcome to the forum!

In your ridge.html file please remove the radar call letters [CAR] at around line#25.  [CAR] is not a valid radar station. This is what's breaking your code. Did you want the Caribou, Maine Station radar on your map? If so the call letters for Caribou is [CBW].

[MaineBirder]

Hi MaineBirder,

First off, welcome to the forum!

In your ridge.html file please remove the radar call letters [CAR] at around line#25.  [CAR] is not a valid radar station. This is what's breaking your code. Did you want the Caribou, Maine Station radar on your map? If so the call letters for Caribou is [CBW].

That was the problem! Works fine now. Thank you for your help Danny, it's greatly appreciated.

I sent you an email from your web site yesterday asking about your looping satellite. Did you receive it?

John

[lakevillewx]

Danny -

Thanks for the awesome contribution! I am currently tweaking and testing before launch on my site, and I am wondering where I can preset the animation speed? If I missed it previously in the thread or instructions, I apologize.

I am running my setup here:

http://www.lakevilleweather.com/google_ridge_radar/ridge.html

Regards,

Kris

[ELDoradoWx]

Danny -

Thanks for the awesome contribution! I am currently tweaking and testing before launch on my site, and I am wondering where I can preset the animation speed? If I missed it previously in the thread or instructions, I apologize.

I am running my setup here:

http://www.lakevilleweather.com/google_ridge_radar/ridge.html

Regards,

Kris

Hi Kris,

My pleasure!

NO, I don't think I ever covered the default animation speed. It's very easy to change.

Near the top of the script where it says:

Code: [Select]

var Idle=100;
The higher the number the slower the animation. This is the idle time between images as they are being animated.

[lakevillewx]

Thank you!!

Kris

[stormwatch]

OK guys before I do something very drastic here I need some help. Started working on the script several months ago but put everything aside for fall fishing and deer hunting but it's time to get back to my weather. Worked several hours last night and a couple tonight and I am getting nowhere.

I have my goggle map (got to tweak a tad on centering) but I am not getting any radars or my "home marker" to show on the map. No precip around tonight but last night with precip around; same thing...just the map. I have tried "NCR", ("NCR") and ["NCR"] and no radar and no home marker.

Any help, suggestions, ideas would be greatly appreciated!!!! The ONLY thing I have not tried I believe is an absolute path (ie. http://www.carolinastormwatch.com/goggle_ridge_radar/ridge.js) for the js paths but didn't think this was necessary. I did have the files just in my main directory but put them a sub directory (goggle_ridge_radar) to see if that would help...no go.

Link:  http://www.carolinastormwatch.com/goggle_ridge_radar/ridge_test.html 

Many thanks!!

[ELDoradoWx]

OK guys before I do something very drastic here I need some help. Started working on the script several months ago but put everything aside for fall fishing and deer hunting but it's time to get back to my weather. Worked several hours last night and a couple tonight and I am getting nowhere.

I have my goggle map (got to tweak a tad on centering) but I am not getting any radars or my "home marker" to show on the map. No precip around tonight but last night with precip around; same thing...just the map. I have tried "NCR", ("NCR") and ["NCR"] and no radar and no home marker.

Any help, suggestions, ideas would be greatly appreciated!!!! The ONLY thing I have not tried I believe is an absolute path (ie. http://www.carolinastormwatch.com/goggle_ridge_radar/ridge.js) for the js paths but didn't think this was necessary. I did have the files just in my main directory but put them a sub directory (goggle_ridge_radar) to see if that would help...no go.

Link:  http://www.carolinastormwatch.com/goggle_ridge_radar/ridge_test.html  

Many thanks!!

Hi Tom,

You have the same sort of problem that MaineBirder had a few posts up. There is no AQK radar station. It looks like you just transposed it wrong (very easy to do). It should be "AKQ". Fix that typo and everything should be working fine for you including the marker.

I would like to mention to others that may try this script. I highly recommend adding just one radar station at a time. See if that works and then go on and add on another one.

[stormwatch]

Many thanks for the help Danny!! Great script!

I can't believe that little error caused me hours of frustration; well, yeah I can. I went over and over my script and did not catch that. You are exactly correct in saying the best way to test the script is to use ONE site. For me it has to be K.I.S.S. or I always end up with one little error that ends up costing me hours of frustration.

Thanks again!!

Tom

[golfnutmdh]

I am curious where/how you found the lat/lon projection data for each radar site in the ridge.js file?  I'm looking to project the conus map in a similar fashion, just lack the projection coordinates.  Thanks!

[ELDoradoWx]

I am curious where/how you found the lat/lon projection data for each radar site in the ridge.js file?  I'm looking to project the conus map in a similar fashion, just lack the projection coordinates.  Thanks!

NOAA puts the coordinates for each radar station in a .gfw world file. These files reside with the standard .gif radar files in the "RadarImg/RadarType" directory.. Such as RadarImg/N0R - RadarImg/NCR - RadarImg/NOS - etc etc

[subh]

Do you have similar functionality written using Google Maps V3?

-Subh

[ELDoradoWx]

Do you have similar functionality written using Google Maps V3?

-Subh

Not completely. The script as is, uses some V3 features, but for the most part it is pure V2. I have no plans to update it to V3 at this point unless it breaks.

[Bunty]

How come Google Maps radar doesn't label my town on its maps even though it's the 10th largest town in Oklahoma?  I noticed it's very generous in labeling much smaller towns like Kingfisher and Hennessy.  Zooming in to enough degree does solve the issue, though.

http://stillwaterweather.com/ridge.html

[ELDoradoWx]

How come Google Maps radar doesn't label my town on its maps even though it's the 10th largest town in Oklahoma?  I noticed it's very generous in labeling much smaller towns like Kingfisher and Hennessy.  Zooming in to enough degree does solve the issue, though.

http://stillwaterweather.com/ridge.html

I am pretty sure this was a rhetorical question. I did see an interesting observation that takes the idea a little bit further.

http://www.41latitude.com/post/611286757/google-maps-city-dots

[Stetson1]

Can someone refresh my memory, how can I get rid of the image URLs in the ridge.html? I thought I had it but can't seem to find how to remove those.

Thanks,

Todd

[ELDoradoWx]

Can someone refresh my memory, how can I get rid of the image URLs in the ridge.html? I thought I had it but can't seem to find how to remove those.

Thanks,

Todd

Hi Todd,

You can find the code to get rid of the URLs below the radar display here:
http://www.wxforum.net/index.php?topic=8377.50

It's the 10th post down...

[Stetson1]

Much thanks, that is exactly what I was looking for.

Todd