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
