Environmental Education Interactive Kiosk

Environmental Education Interactive Kiosk

Client:  San Francisco Bay Wildlife Society
Tools:  JavaScript, jQuery, PHP, MySQL, HTML5, Google Earth API, KML Files

The Don Edwards National Wildlife Refuge is a large expanse of bay lands sitting at the southern edge of the San Francisco bay. Numerous watersheds and creeks in the surrounding communities drain water into this southern end of the bay. To increase awareness of the surrounding watersheds and the environmental impact of water flow in the area the refuge wanted to improve their educational materials.

To meet this goal, VG collaborated with the San Francisco Bay Wildlife Society and WildWare to produce this touch screen educational kiosk. VG built the software framework and the Watching Our Watersheds module. Additional modules were contributed by WildWare. The kiosk is located at the refuge's Environmental Education Center and used by school children and other visitors everyday.

For the Watching Our Watersheds module, VG designed and built a touch screen application using a unique combination of various software development tools. The application integrates the Windows 7 touch screen environment with the Google Earth API. The main framework is HTML5-based and JavaScript, JQuery, and VBScript modules support the user interface and application interaction.

Visitors can move through the landscape in several different ways. Large buttons provide a quick way to perform specific actions. In addition, they can explore the virtual terrain on their own by moving their finger over the map. An extents limit keeps the visitors from straying outside of the study area.

A find tool allows users to search by creek name, zipcode, or school and zoom down to the specified feature. Automated fly-through tours of major creeks give you the chance to follow a creek from its source in the hills, through the urban areas, and into the bay.

The watershed data is a series of map layers built by Fugro Consultants. The two primary layers are watershed boundaries and a full creek network with natural creek segments, engineered channels, and culverts. Other layers include points of interest, species data points, and water bodies. The data is in the KML format.

Map Links:

Don Edwards National Wildlife Refuge

Environmental Education Center

Visitor Center



Watching Our Watersheds user interface with creek network.



Kiosk at the Environmental Education Center.



Find dialog box - search by creek name, zipcode, or school.



Fly-through creek tour in action.



Historical watershed data.



Historical data popup.