For the past year, a team of 13 Roundarchers have worked to design, develop and launch StrataLogica™ which is a web-based learning application, built for our client NYSTROM Herff Jones Education Division, that delivers map and atlas content in an engaging 3D, interactive environment built on the Google Earth API.  As discussed in our recent blog post on the Google Code blog, we faced some interesting challenges during this project being one of the first enterprise scale applications to use the Google Earth Plug-in and its JavaScript API as its foundation.

Early on in the project, our team was able to solve the core challenges of being able to wrap Nystrom’s 2D map content on the 3D earth in a way that preserved the image quality of the their print products and developing a framework for managing editorial content required to be shown on the earth.  Here I will discuss the additional challenges we faced in creating a compelling and immersive educational experience while working within the framework required by the Google Earth API.

Our experience designers were faced with several challenges. Key among them were providing maximum space for the content, large targets for users of touch screen devices, and access to a set of tools to mark up the maps.  The graphics also needed to appeal to the diverse target market: K-12 students and their teachers.

The solution included opening a chromeless browser window and interface components that open over the map to access options and tools that close when not needed.

The user interface is written in JavaScript and the gap between user input and the earth is bridged by the Google Earth JavaScript API.  Developers were faced with the hurdles of being able to track and provide users control over the layers of Nystrom content, provide an interface to Google layers, and create tools the user could use to add content to the map that could be saved and restored.

Users can be licensed to use one or more map series. These include labeled and unlabeled base maps, additional thematic maps or related maps, views, hotspots, and place marks. We chose to dynamically generate a menu called the Map Chooser, the contents of which are supplied by a JavaScript object created by server-side Java code. The specific elements are based on the user’s access rights and available CMS content.  When the user selects a map series, the KMLs for the Superoverlays and other content are loaded into the plug-in using the Google Earth API. A reference to each layer loaded is retained so its visibility can be toggled or it can be unloaded.

At the bottom of the page is a tool bar that expands up when clicked to reveal a set of tool icons. One of these is ‘Settings’ which lists Google Layers that can be turned on or off. When the layer’s checkbox is changed, the event handler determines the state and layer to be changed and then passes that request to the Google Earth API. A JavaScript table of rules is used to preset the settings appropriately for the map being displayed.

The tool bar also has a selection of tools for marking the map, replicating and extending the experience with the traditional educational map materials. A special KML is loaded to hold user-created markings.  Users select a tool for the type of marks they want to make; for example, draw lines, place a map symbol, or add a place mark with a pop-up balloon. Mouse event handlers attached to plug-in components return the geo-location of mouse clicks to the JavaScript code where KML strings are composed and then loaded into the plug-in after running the KML string through the Google Earth API’s parseKML method.

The team has just launched a new version of StrataLogica which allows teachers and students to collaborate in real-time on assignments and group projects and create dynamic presentations which can be played back in a movie-like sequence.  Greg Knapowski and I are in San Francisco this week showing off the new release at the Google I/O Developers conference in the Sandbox with our clients from Nystrom.  Look for more blog posts when we return.