That Blue Square Thing

Weather Maps

Pigs in the snow A bit inspired by a tweet from Noel JenkinsExternal link icon and by some Year 3/4 work I saw at my son's primary school, I dug out some old drag and drop html techniques and came up with an interactive weather map.

You can use the standard 70s/80s BBC weather symbols to produce your own weather map. The symbols will move around however you want them to and you should have plenty of symbols to play with.

I think there are probably a wide range of potential uses - from primary up to lower secondary certainly:

There are some technical notes at the foot of the page you might want to read.

The Weather Maps

There are three choices of map. Which one you opt for will depend more on your screen resolution than anything. You might want to read the technical notes as well. It's worth noting that these won't work at all on iPads.

You may want to right click and open these links in a new tab
Viewing the maps in Full Screen mode is a good idea as well - hit the F11 button on the keyboard and this should work (hit F11 or Esc to get back out of full screen mode!)
Weather map example

Standard Maps - basic weather symbols only

> Standard UK map

> Wider area map - including most of Denmark and the Atlantic approaches

> Tight UK map - more suitable for narrower screen resolutions perhaps

> Mexican Map - especially for Mrs Allen's class, a map of Mexico with weather symbols!

> Brazil Map - this is decent sized map and should fit fine

> Ibiza Map - a slightly wider map. Let me know if there's a problem with the screen width. Made on request...

Maps with Fronts - these have three cold and two warm fronts and an occlusion as well. And now wind arrows!

> Fronts Standard UK map

> Fronts Wider area map

> Fronts Tight UK map

> European map - let me know if the fronts are a bit too long in this

The fronts might be a little tricky to drag around - the images are actually square boxes and you may find that once you have the fronts in place that it gets a little trickier to move other symbols.

Historical Note

To fully appreciate the nature of these maps you might want to view some old UK weather forecasts. You Tube has a few you might want to try:

> 31st January 1979 forecastExternal link icon

> 15th December 1982 forecastExternal link icon - actually the whole closedown of BBC1 on that evening, which is astonishing to watch

> Christmas Day 1984 forecastExternal link icon

I was going to suggest that students might need to see these to appreciate how the weather used to be presented, but then I guess there's a whole lot of teachers who won't remember it being done this way either...

Technical Notes

The maps require JavaScript to run. This shouldn't be a major problem. They've been tested on most major browsers - Opera, Firefox, IE and Chrome particularly. They should work on all of these, although IE6 doesn't seem to like the transparent symbols very much.

You may find that you need to scroll vertically - on a narrow monitor the symbols may well get pushed below the map. You might want to go to Full Screen mode (F11 usually does this - then use F11 or Esc to get out of it).

You have 16 of each symbol available (apart from the smiley sun - there's only four of those). If that becomes a problem then please let me know as it would be a quick and simple job to change the number.

The maps currently (September 2012) don't like iPads at all. This is linked to the type of Javascript I'm using here. There may be some way I can apply a different Javascript methodology to solve that, but I'm not sure when I'll find time to work through it. There may also be an HTML 5 solution.

Please report any issues when using the pages - I could use feedback, either positive or negative, about this stuff.

I intend to make available versions which can be downloaded and run locally, either from a pen drive, a hard drive or a school network. I'd like to test what I have a little more widely first though.

Thanks and the legal bit

Feel free to use these for non-profit use in any way you want. A link back here would be nice.

The weather symbol images originally came from Mel's BrushesExternal link icon and are used under the terms they were downloaded under - for non-profit use. I've modified them (and added some) and reduced them dramatically in size in order to reduce loading times.

The JavaScript comes from Walter Zorn's libraryExternal link icon, and is used under the terms they were downloaded under too. My JavaScript certainly isn't good enough to fiddle with the js file!