Saturday, December 3, 2011

Google Maps display of GHCN stations, with Javascript

I have been using KML files with Google Earth for displaying temperature stations so that they can be colored and selected according to inventory information. Steven Mosher got me started on this, and he has again pointed me towards using Google Maps interactively.

This is the next in my Javascript learning process. V3 of the Google maps API is well integrated with JS, and the language gives much more flexible control than KML. So in the display presented here, you can select subsets of the GHCN V3 stations according to inventory and data properties, changing their color or making them disappear. Properties include start, end and duration of data, and urban and airport status.

There is also an animation capability. You can set up a movie to run over a period, and you will see the stations in the chosen category appaer and fade reflecting the availability of data in those years.

You can click on each marker to bring up a balloon with information. Rolling the mouse over shows the name of the station.



Implementation of Javascript is not wholly reliable - IE requires tweaking for permission, and there can be clashes with the Blogger software etc. You may find that looking at the original html from here will work better, and will also give an uncluttered screen. An option is to download the html. Use Ctrl+ and Ctrl- to fit well on the screen.






















































More detailed usage information is below the jump.



You have available all the Google Maps controls. On the right are the controls for this widget, in three sections. You should make selections from the middle section. For the selection to be effective, the left button should be checked. All regular buttons act as toggles, and the label reflects the current state; clicking moves to an opposite state. You can write numbers in the text boxes, and toggle the "<" sign to affect the interpretation. The clear button clears the choices, and All overrides.

When you click an action button, all stations which satisfy any one of the chosen conditions will be re-rendered in that color. You may want to make a note of your choice, because the logic can get tangles after a few choices. Of course, to can just use the All button to restore.

To work the movies, choose a time interval and a pause (time between frames in sec). Then click the movie button, where the label will switch to "Show". Then click an action button; currently selected stations will be rendered in that color in each year for which they have data. The years tick over just above the Movie button. Normally you'll start from no stations visible, and they'll become invisible again after data finishes. Even if they start colored, they will still disappear after data ends.

Here are some suggestions:
  • At start, the All button will show. Try just changing the colors with an action button.
  • Try coloring by urban status. First All and yellow, then clicked the Mixed button, to show Not M. That means Mixed, the GHCN class between Urban and Rural, will stay yellow. Then, with Urban showing (and All not showing - toggle if it is), click the left radio button beside it, and then click pink. Urban stations will then be pink. Then change Urban to Rural, and click cyan. Now you will have a display showing the three different classes.
  • Then click Clear, and then set Duration to less than 70. Click Invisible, and you'll be left with the Urban/Rural coloring for stations with at least 70 years data.
  • Finally, a movie. Click Clear, All, Invisible. Then choose some movie years - say 1900-2011, and a pause of 1 sec. Click the Movie button; it changes to Show. Then click a color (Yellow, say) to run the movie. It doesn't matter what order you click buttons prior to the Action.


You can run a movie on, say, airports, but be aware that it is using current classifications, so you'll see 19th century airports.

I'll produce more of these, and maybe one for all stations, but data size (loading time) may be a drag.











0 comments:

Post a Comment