Transforming Paper and Plastic into a 3D Interactive Experience

This post is part of the Who's @ Google I/O, a series of blog posts that give a closer look at developers who'll be speaking or demoing at Google I/O. This guest post is written by Roundarch's Technical Architect Greg Knapowski and Sr. Front End Developer Lawrence O’Sullivan who will be demoing as part of the Developer Sandbox.

Our client, NYSTROM Herff Jones Education Division, the leading producer of maps and globes for schools, sees many classrooms replacing chalk boards and wall maps with interactive white boards and laptop computers. Our Roundarch team worked to develop StrataLogica™, a web-based learning application that delivers map and atlas content in an engaging 3D, interactive environment utilizing the Google Earth API.

The Google Earth API was used as a foundation for StrataLogica™ to make use of its sophisticated image rendering logic, satellite imagery and access to built-in tools and navigation controls. As an enterprise scale application, we faced some interesting challenges and gained many insights along the way that we’d like to share.

Our first task was to prove we could wrap Nystrom’s existing educationally-focused maps and globes onto Google Earth while retaining the same high quality resolution delivered in their print products.

Achieving acceptable image resolution resulted in file sizes which were much too large. In addition, we needed to deliver an increased level of map content and granularity of images as the user zoomed into the earth. To address these two issues, we created a custom process that takes an Adobe Illustrator file and outputs Superoverlays in accordance with KML 2.1 standards. Using open source Python frameworks, we created a customized solution that outputs Superoverlays with various levels of content.

Our next challenge was to provide support for authoring and maintaining content, in the browser, using the Google Earth plugin. All content is authored and maintained in a content management system (CMS) in much the same way as any dynamic website. One unique difference is that some of the content elements are geo-referenced coordinates that specify the location of content on earth. In the case of placemark balloons, the geo-referenced coordinates identify “hotspots” on the Nystrom maps which become clickable when the user turns on a setting. The placemark balloons provide supplementary audio, image, video and descriptive content such as the example shown above for the Appalachian Mountains.



An ETL (extract, transform, load) process is used to transfer published content into the StrataLogica™ application database. We then use Java Server Pages (JSPs) to generate the KML which renders the placemark balloons. The KML contains both the “hotspot” coordinates and embedded HTML to display the audio, video, images and text. This example illustrates that standard web technologies can be used to deliver content through the Google Earth API with the exception that KML is generated in addition to HTML.

Once Nystrom was able to see their maps and content rendered on Google Earth through the plug-in, we needed to create a compelling and immersive educational experience to allow teachers and students to interact with maps, not just view them. Our team added features such as marking tools, custom content authoring tools and the ability for users to share and collaborate. For those of you attending Google I/O, stop by our booth in the Sandbox space to experience StrataLogica™ firsthand and chat with our team about the front-end development challenges we faced and how we overcame them. If you aren’t attending we encourage you to check out our blog post at http://blog.roundarch.com where we share more about how we developed StrataLogica™.

Posted by Greg Knapowski, Technical Architect, and Lawrence O’Sullivan, Sr. Front End Developer, Roundarch