Google Maps/Ontario Weather Radar Mash Up…

Note – Links have been removed because of updates…

So after much humming and hawing, I’ve finally sat down to complete my first Google Maps mashup. I had the idea a while back to drop the Environment Canada weather radar on top of Google maps to give my weather viewing some context. And a while back I cranked up a script to grab the radar image for my local transmitter (near Exeter, ON) and put it into ForecastFox Enhanced.

As it turned out, getting access to the Google Maps API and setting up a base map page was incredibly easy. A quick look into the Google Maps documentation and they even provided me with sample code to set up my first page. Then into the specifics of setting up overlays on Google Maps, and I’d be all set. Or so I thought.

I was using the GGroundOverlay object in GM (Google Maps) to drop my first test image on a map, and it worked great. So I thought I’d add a few more images to test out the local radar overlaps. It did not work. In fact, after much Javascript tweaking and re-ordering, I came to the following conclusion: GGroundOverlay is set up to work with ONE image only. Creating a second overlay either was completely invisible, or it broke the GM Javascript.

At this point, I decided to take a break from the web side, and look at how to handle the radar images. Give myself a break, as it were. So I made sure I had up to date copies of ImageMagick on my machine and my test server, and broke out the graphics editor hat. For those of you who have not used ImageMagick before, it is an incredibly powerful command line image editor. I would hazard a guess that 50% of workflow on Photoshop could be done in Imagemagick. Simply put, it rocks. In the case I forsaw, I would retrieve the radar images from the Enviroment Canada weather site, trim them down and remove extraneous colours and details. And thats just about the process that occurred.

The biggest trick with IM (ImageMagick) is to attempt to do the whole job on one command line. This prevents having to save temp image files, which will cost time lost in disk access and possible in quality of the image. That said, IM can only handle so many steps before it gets lost. The second complication, one I brought upon myself, is that radar images are in fact circular, so I only wanted to display the circular data area.

This led to probably my most frustrating time of the whole project. Simply put, I built an image the same size as the whole radar image from the web, cut out a circle where I wanted it, and filled the circle with the radar image. This gave me a black image, with a circular image centered over the radar site. Judicious cropping and colour removal, final application of transparency, and I had a .GIF to use for GM. As a side note, Enviroment Canada’s decision to make the radar image a 256 colour .GIF image and basically defining 1 pixel = 1 km made my job very easy.

This is where the only major flaw kept cropping up. When drawing the circle, IM kept antialiasing the edge to make it look nice, but when I removed colours, the nasty shades of grey defining the edge of the circle stayed around. I think I spent around three hours digging through the IM website until I finally tripped across the reference to the +antialias command. With this enabled, no grey edging, and the radar circles came out perfectly.

For those interested, here’s the IM command line as it ended up. It generates a 400 pixel square image with a active 400 pixel circle visible in the middle, set at 25% opacity using PNG alpha channel transparency.

convert +antialias -size 580×480 xc:black -tile radar.gif -draw ‘circle 240,239 240,39’ -fill black -opaque white -opaque \#999966 -opaque \#333366 -crop 401×401+140+139 -transparent black -matte -channel A -evaluate divide 1.25 output.png

Not to fetch the images. Lucky for me, Environment Canada builds the radar pages from a generated stream of data. Be researching the actual call signs of the transmitters in Wikipedia, and careful examination of the radar website, I developed a script that would wget the webpages, parse them with regex’s and then wget the radar images. A bit of research later, and some brushing up on BASH scripting, I now had a script easily configurable to get two or twenty images from the web. I then blended the IM script into it, and set it to copy the finished image products to my servers web share.

This led me back to how to display more than one image at a time in GM. About a month ago, I downloaded Google Earth on my Win partition again, and was rediscovering the fun of that app. Along with starting to upload photos to Panoramio, I discovered the XML structure used in Google Earth KML files. They supported multi-overlays with no problems, so I thought I’d build a Google Earth KML for the radar as a proof-of-type.

While researching the KML structure, I found the Google Maps Blog, and found that since the summer of 2007, GM supports some KML functions. If the KML (or KMZ; a zipped KML) is web accessible, you can type it into the GM search function, and it will display the KML over Google Maps. Here was all the tools I needed to finalize my Radar-over-Google Maps mashup.

My first KML in fact was a simple point declaration of all the Weather Radar transmitters in Ontario, verified and checked between Google Maps, Natural Resources of Canada topo maps and Environment Canada’s own website.

Ontario Weather Radar Sites in Google Maps

Using these verified locations, I build a spreadsheet that calculated the accurate Latitude/Longitude for a 400 km box around these stations, and used it to define the four sides of the display box for each weather radar image.

Combining this information with my previous KML file, I now had an accurate weather radar overlay displayable in Google Earth or in Google maps.

Ontario Weather Radar KMZ

Ontario Weather Radar in Google Maps

Watch this space! There will be improvement and development forthcoming.



4 Responses to “Google Maps/Ontario Weather Radar Mash Up…”

  1. […] has also made a couple of blog posts describing the development of the mashup [1, […]

  2. Milind Says:

    Can you please let me know exact steps to overylay kml file on google map (not google earth to be precise) ? Thank you for your detailed explanation.. I would reallt appreciate if you can send it through email .
    -Thanks Milind

  3. Claude Larochelle Says:

    It would by wonderfull if you could add east radars 🙂

    I really love to look at radar information and being able to correllate altitude, river, mountain and see haw those factors influence weather.

    Really nice works!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: