Spice up Google Earth Projects with Custom HTML

One of the most requested features I get asked about is adding narration or audio to Google Earth Projects. Recently, I was fortunate to participate in a Google for Good 2020 session were Jordon Mears and I discussed how to approach adding audio to Google Earth Projects via Earth’s custom HMTL option.

Thanks for those who watched the session. However, as an educator, I understand the need to offer a non-serial version and examples of our 15-minute conversation.

Resources:

Code Editor: Visual Studio Code (Code editor from session) https://code.visualstudio.com/

Hosted MP3 file:  https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3

HTML Templates: https://github.com/geteach/geteachGeology/tree/master/eGEW

Google Earth Project Example Link (Feel free to make a copy)

Step 1: Start simple

For me, when working with HTML and Google Earth, starting with the most basic snippet, then working up, saves hours of development time.

Our inquiry begins with…Can HTML audio tag work in Google Earth Web?

Finding the simplest code example often starts with Google search, “html Audio.”  These searches often lead me to school. https://www.w3schools.com/html/html5_audio.asp

From here, I will take their “Try it Yourself” snippet and replace their mp3 with one of my own.

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Copy and Paste the modified code into Google Earth Web and hear it work.

Simple HTML Audio – Google Earth Web

Step 2: Spice it up!

Now that we know the html audio tag works, we can spice up the style of the page with a little more HTML, CSS, and simple JavaScript. You can always create your own, but if you don’t have the time, feel free to use a template from this GitHub repository (https://github.com/geteach/geteachGeology/tree/master/eGEW). The snippet below is using the oneImageAudio.html example found in repository.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple Audio with One Image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500|Roboto+Slab|Material+Icons" type="text/css" />
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
        <link rel="stylesheet" href="https://geteach.com/gti/drp/scripts/egew.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <main class="panelMain">
                <div class="mediaContain">
                    <div class="slideshow-container">
<!--First media in Carousel--Best Image Aspect Ratio 3:2 Replace Image Source (src) bellow-->
                        <div class="mySlides fade">
                            <img class="image"src="https://storage.googleapis.com/geteachkml4/seafloorage/seafloor480.jpg">
                            <div class="captionDiv">
                                <div class="caption" >Replace Caption</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" id="content">
<!--Replace title text between div-->
                    <div class="title">
                        Replace title
                    </div>
<!--Replace mp3 source (src="youraudio.mp3")-->
                    <audio id="audioI" style="display:none" >
                        <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
                            Your browser does not support the audio tag.
                    </audio>
                    <span onclick="playPause()" class="mdl-chip mdl-chip--contact" style="width:85px;margin-left: 8px;">
                        <span class="mdl-chip__contact mdl-color-text--white" style="margin-right: 5px;"id="playIcon">
                            <i class="material-icons">play_arrow</i>
                        </span>
                        <span class="mdl-chip__text" id="playButton">Play</span>
                    </span>
<!--Replace text for description--Every <p> needs to have a class="text"--Any html works-->
                    <div class="description">
                        <p class="text">Replace description...If you need a new paragraph the class="text"</p>
                    </div>
                </div>
<!--Best image height for footer is 24px with a max-width of 145px-->
<!--If you don't want the footer is it best to delete the html within the logoLeft/LogoRight Div-->
                <div class="footer">
                    <div class="logoLeft">
                        <a href="https://twitter.com/geteach" target="_blank">
                            <img src="https://storage.googleapis.com/geteachkml4/logogeteachtemp.png" >
                        </a>
                    </div>
                    <div class="logoRight" style="display:none">
                    </div>
                </div>
            </main>
        </div>
    </body>
    <script src="https://geteach.com/gti/drp/scripts/egew.js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</html>
Custom HTML Audio – Google Earth Web

There are several HTML files in the repository for you to use, modify, or recreate.  You can reach me @geteach on twitter if you need help exploring, creating, or sharing this Earth.

Read more about my Google Geo fun here: Decade of Google Geo EDU (https://geteach.com/blog/2020/01/26/decade-of-google-geo-edu/)

Or read some other Google Geo post here: https://geteach.com/blog

GeTeach’s Spring Cleaning – 2020

Left Canvas Electricity – Production
Right Canvas Electricity Consumption

GeTeach.com had a little spring cleaning this past week. The CIA World Factbook, along with UN’s Human Development Index, data was updated. As always, this biggest change looks to be Net Migration for Syria (Human Geography -> Demographics). Five years ago, there was a large negative flow out of Syria; now there is a relatively large inflow.

Net Migration – geteach.com

There are now over 190 map layers in geteach.com. New layers include percentage of Improved Sanitation (Human Geography -> Society), percent of population working in Agriculture/Mining, Industry, and Service (Human Geography -> Economy), and updated Population Density map (Human Geography -> Population Density), and Median Age (Human Geography -> Demographics).

Left Canvas Agriculture/Mining (% of labor)
Right Canvas Service (% of labor)

In addition to new data, most of the thematic maps have new color gradients. Therefore, the maps, along with the legends, should be easier to process with new, more “modern”, colors.

Left Canvas Electricity – Renewable Resources (% of capacity)
Right Canvas Electricity – Nonrenewable Resources (% of capacity)

The most immediate impact on my classes will be the addition of population pyramids located with Median Age, Total Dependency Ratio, Youth Dependency Ratio, and Elderly Dependency Ratio within the Demographic dataset.

These 2018 population pyramids are being served from a CIA Factbook host, so hopefully the agency does not change there urls, but having population pyramids in the site is a dream come true for my own teaching and learning; considering much of the course I teach is based on the unequal distribution of goods, services, and people across Earth’s service.

Left Canvas Total Dependency Ratio
Right Canvas Median Age

Another change worth mentioning is the inclusion of a small source/credit tag under legends. Geteach.com has always had a source/credit in the description box associated with each layer, but I was never comfortable with users have to click the “I” icon at the top right of each canvas to see the source of the map or data.

Left Canvas Human Development Index 2000
Right Canvas Human Development Index 2018

There are also numerous spacing changes with the styling. I doubt anyone will notice the 3-pixel margin shifts, but as a self-described pixel snob these items were truly bugging me. It is similar to painting a house or bedroom. The painter knows all their mistakes; even though it is never noticeable to any guest.

3-Pixel Margin added to info-box.
Canvas CIA Factbook

Well back to my real job…I hope teachers and students continue to enjoy at least one of the over 18,000 correlations; developing a deeper understanding of people’s relationships with their world and each other.

If you are new to geteach.com, here is a four-minute overview video of many of the functions already built into the site.

https://geteach.com

Decade of Google Geo EDU

“Free site dedicated to help teachers educate and engage students using Google Geo Tools”

The above has been my mission statement for about ten years now. I should probably change ‘site’ to ‘sites’, but will worry about that later. As I am finally getting around to backing up some old project files, I noticed two things. One, my files are an absolute mess. Two, I have used a lot of Google Geo Tools over this decade; primarily oscillating between Maps API, Google Earth, and more recently Earth Engine. A friend once asked if I could put everything in one place. Looking at my files today suggest this will be highly unlikely. I try to use this blog to showcase work I think other students and teachers will be interested in. That stated, I don’t have an index of post for Google’s Geo Tools. Therefore, below are my favorite posts and projects organized around Google Geo Tools.

Google Earth

The one that started it all. As some people know, I am a big fan of kml and Google Earth; often calling it my gateway technology.  With the web version of Google Earth, the future of this technology remains as current today as it was a decade ago.

Blog Posts

Explore, Create, Share with Google Earth Creation Tools: Overview of what is easy and possible with content creation tools. (Contains many of my current Google Earth Projects) https://geteach.com/blog/2019/12/01/explore-create-share-with-google-earth-creation-tools/

An Inclusive Earth: Include more student in more languages using Google Earth on Web. https://geteach.com/blog/2019/03/15/an-inclusive-earth/

Custom HTML Info Boxes: Google Earth Quiz Tutorial: Advanced tutorial for creating custom HTML info boxes for Google Earth on Web. https://geteach.com/blog/2020/01/03/custom-html-info-boxes-google-earth-quiz-tutorial/

thanksgiving-fun-with-kml: Learn basic kml coding using ground overlays (oldy but goody). https://geteach.com/blog/2016/11/21/thanksgiving-fun-with-kml/

RIP-Earth-API-Plugin: Not many people know, but geteach.com used to run off a Google Earth API. Here is a post memorializing what used to be possible via this plugin. Great older videos in this one! https://geteach.com/blog/2017/01/08/rip-earth-api-plugin/

Old Side Projects | Archive

Philippines- Typhoon Haiyan (geteach.com Deprecated Earth API )


Google Maps API

My primary page, geteach.com, is built using this platform. Originally created to just share maps with my students, the site now shares maps with thousands of students.

Blog Posts

geteach.com – layers: Quick overview of all the layers in geteach.com circa 2016. Several additional layers have been added over the past three years. https://geteach.com/blog/2016/12/17/geteach-com-layers/

#12MapComparisonsOfChristmas: Some of the many comparisons students can make with geteach.com. https://geteach.com/blog/2016/12/21/12mapcomparisonsofchristmas/

Authoritative Bias of Maps: While not strictly a Maps API post, it is my first lesson of the year with a lot of maps fun. https://geteach.com/blog/2018/08/01/authoritative-bias-of-maps/

Old Side Projects | Archive

Round Rock ISD mini-geteach (Class Project 2016): https://geteach.com/westwood/rrisd/RRISD.html

Sense of Place Westwood High School (Class Project 2016, before Tour Creator:) click icons on map https://geteach.com/westwood/westwoodplace/

Regional Issues Project 2015 (Click red markers on Map): https://geteach.com/share/casestudy/2015.html

Homage to Maps Engine/Maps Gallery: Many people don’t remember that Google had an amazing curated library of datasets that could be imported into geteach.com or opened within the gallery. That is before Google Deprecated the cool stuff. Some of the technology is still used with My Maps and I think Google Earth’s content creation. Those asset/map IDs look familiar;).

It was such a great lesson on level of aggregation/scale

Google Earth Engine

Earth Engine took awhile to grow on me. Mainly because I kept having to recreate so much with the combination of deprecating and new technologies. That, and I have a day job teaching high school. However, over the past year I’ve taken a couple of weekends to create a few projects.

Blog Posts

First(ish) Google Earth Engine Attempt: Reflection of my first true Earth Engine App visualizing 60 years of climate data. https://geteach.com/blog/2019/06/30/firstish-google-earth-engine-attempt/

Side Projects

Currently, I am putting all my Earth Engine Experiments (3 for now) here if people would like to use them in the classroom. https://geteach.com/engine/


So there you go Jeff, A decade of projects using Google Geo Tools. Thanks for the suggestion!

Custom HTML Info Boxes: Google Earth Quiz Tutorial

I was super excited when the Google Earth team launched content creation tool for Google Earth on Web. Mainly because these tools allow students and teachers an easy way to explore, create, and share their stories; their knowledge. I was equally excited the Earth team created a platform that allowed for custom HTML within these creation tools. With custom HTML, users can create narrated tours, quizzes, video stories, timing animations, etc. However, custom HTML adds complexity which requires a little extra know-how.

On occasion I get asked to create tutorials on how I create some of these special HTML Earth projects like quizzes. I am hesitant to create these for several reasons. First, I am a high school social studies teacher and not a developer. Yes, I have created some cool (my subjective opinion) Google Earth projects and have a successful Google Maps API website, but that is just me goofing off while attempting to find ways to engage my students. Second, I have been wrestling with how to meet the needs of the greatest number of people. The classroom gives educators and learners the space to cycle through feedback loops; a learning flow. This format does not allow for this immediate and meaningful feedback.

With these in mind, I came up with this tutorial blog/video series for creating custom HTML Google Earth projects. 

The challenge:  Create a three question Google Earth Quiz; choosing Google Earth Quizzes for this series because a number of people have asked. 

The series is designed in seven parts. Experienced HTML creators can jump to Part IV, while people who have never created a simple web page may want to begin their journey from the start;  setting up a coding environment to creating a web page using HTML, CSS, and JavaScript. That stated, if you can copy/paste you can create your own Google Earth Quiz. All the HTML and CSS templates will be on GitHub, so the entire process could be done in a day or two.

Enjoy creating and feel free to share. Please let me know if you would like more tutorials on custom HTML for Google Earth on Web. You can find me on twitter @geteach.


Part I Setting Up a Coding Environment

Challenge I:

For part I,  we will create a coding environment that matches the instructional videos. If you already have a text editor you like (ie. Notepad++ or BBEdit) you will be fine. My assumption is that you already know a little about coding, so you will be able to follow along.

Outcomes:

  1. Install and learn to navigate Visual Studio Code
  2. Create Project Folder
  3. Create our first web page together

Resources/Links:

Vocabulary/Concepts:

  • Text Editor (Editor)
  • Hyper Text Markup Language (HTML) Structure
  • Tags
    • <head>
    • <title>
    • <body>

Challenge I: Video


Part II Install Visual Studio Code Extensions and Style New Web Page…Twice:)

Challenge II: 

In this challenge, we will install a couple of extensions in Visual Studio Code to make coding easier. In addition we will explore inline styling followed by cascading style sheets. 

Outcomes:

  1. Install live server and rainbow tags vs code extensions
  2. Inline style our web page
  3. Create .css file and move the inline style to this file

Resources/Links:

Vocabulary/Concepts:

  • Local Server
  • Tags
    • <div> block element
  • Styles
    • Background-color
    • Width
    • Height
    • color
  • Cascading Style Sheet (.css)
    • Class

Challenge II: Video


Part III Create Google Earth Custom HTML Info Box

Challenge III:

This video will demonstrate how to make a more complex webpage to insert into Google Earth on Web. We will go through the process of using a provided HTML template to create something custom.

Outcome:

  1. Finally(ish)…we are going to create our first complex custom HTML info box using Visual Studio Code!

Resources/Links:

Vocabulary/Concepts:

  • Tags
    • Comment HTML <!– Comments go here –> ( Toggle using CTRL + / )
    • <p> (paragraph)
    • <img> (Empty Tag Images)
    • <a> (anchor link)

Challenge III: Video


Part IV Create Google Earth Custom HTML Question Info Box

Challenge IV:

It is time to take what we learned and ask some questions. For this challenge we will create/modify the custom HTML Question box template.

Outcome:

  1. Alright, Alright, Alright, Alight…Create three question panels for Google Earth!

Resources/Links:

Vocabulary/Concepts:

Challenge IV: Video


Part V Create Google Earth Custom HTML Answer Info Box

Challenge V:

Now that we have created three question panels we need to create three response panels.

Outcome:

  1. Create custom html answer pages

Resources/Links:

Vocabulary/Concepts:

  • Review style classes

Challenge V: Video


Part VI Create Initial Google Earth Quiz Project

Challenge VI:

Create a Google Earth Project with our question and answer panels.

Outcome:

  1. Create Google Earth Project
  2. Add Custom HTML panels to project
  3. Position camera for each question/answer feature.

Resources/Links:

Vocabulary/Concepts:

  • Features (aka placemarks, paths, polygons)
  • Set camera view (snapshot)

Challenge VI: Video


Part VII The End – Add javascript for Table of Contents

Challenge VII:

Now that the custom HTML files are styled, it is time to add a little script to trick Google’s Table of Contents.

Outcomes:

  1. Add Click(); event to show and flyto answers feature
  2. Add onwindows load event to hide all answers and flyto question features

Resources/Links:

Vocabulary/Concepts:

  • javascript
  • Function
  • Fire event
  • window.onload
  • Show/hide
  • Flyto
  • Internal anchor links (<a>)
  • Click();

Challenge VII: Video


Thanks…

Explore, Create, Share with Google Earth Creation Tools

It has been a crazy couple of weeks, months, years! From my first glance at Google Earth for web to the present day, the same three ideas have circulated; explore, create, share. I am sure that I heard those in some chat at one time; or heard a version of them, but these ideas have percolated into my current framing of Google Earth.  With the initial release of Google Earth for web, several years ago, most users could only explore. Technically speaking, people could create and share with the web version from the start, but with the November 20, 2019 launch of creation tools it is now easy for everyone to explore, create, and share.

While Google Earth project templates allow for compelling stories with Google’s rich imagery in combination with media (images, YouTube) and text, using the “Switch to HTML” option in the info box might be a glimpse into the potential of this storytelling platform. It is with these two perspectives, one being an effective and easy entry point the other being a stretch, I share these early explorations and creations.

Most of the ideas for these creations come from my news feeds. Basically, I read a story and think that would work better on Google Earth.

Google Earth Project Template Stories

Man-Made Disasters (Link to Google Earth Story)

The idea for this story originated from this Medium post
Source: https://medium.com/@audrey96928626/the-top-20-biggest-man-made-disasters-37f7f2a1ed2
Images and textual information come from Wikipedia

Human Trafficking (Link to Google Earth Story)


Human trafficking is one of the concepts for one of the courses I teach. With being such a large global issue, I figured the UN had resources that could help tell this story.
Source: https://news.un.org/en/story/2019/01/1031552

Changing Earth (Link to Google Earth Story)

One of my first Voyager like stories. The original file was created at SFO Airport during one of those all-day travel nightmares that went from a four-hour direct flight to a twelve-hour tour of America’s West Coast Airports.
Source: https://climate.nasa.gov/images-of-change

Hungry Planet (Link to Google Earth Story)

Created a similar presentation my first year of teaching…Pre-Google Docs.
Source: https://time.com/8515/what-the-world-eats-hungry-planet/
Peter Menzel, from the book, “Hungry Planet: What the World Eats.”

Aquaponics – A FAO Story (Link to Google Earth Story)

Every drop counts
How aquaponics and integrated agri-aquaculture farms are making smart use of water
Source: Food and Agriculture Organization of the United Nations
Photo Credit: ©FAO/Valerio Crespi. Editorial use only.

Google Earth HTML Projects

Planet Money T-Shirt (Link to Google Earth Story)

I think the tweet went something like, “it would be cool if Planet Money T-Shirt was on Google Earth.” Challenge accepted. This Earth story uses HTML video tag with an on-time listener to move the camera.
Source: https://apps.npr.org/tshirt/#/title

My Austin (Link to Google Earth Story)

Originally, this was me goofing off a couple of winter breaks ago. It was my first attempt at a narrated story. It turned into a cultural landscape lesson for my students where they create their own perspective of Austin using Music, images, text, and of course…Earth’s imagery/streetview. This story is the foundation of Planet Money’s T-Shirt story.

Neighborhoods Worlds Apart (Link to Google Earth Story)

The spark of this story came from #worldgeochat. At the time I was trying to find a story that I could incorporate Google’s Maps API within a Google Earth story. Anyways, make sure to read and click the hyperlinks within the story.
Source: https://unequalscenes.com/

US Geography Quiz: Draft (Link to Google Earth Story)

One common request is for Google Forms embed into Earth. Users can embed the form, but the sandbox will not allow the form submission. Anyways, after sitting through a team building quiz bowl at the start of the school year, I thought I would give a simple quiz a go. Please note this is a proof of concept draft.

Anne Frank: Diary of a Young Girl (Link to Google Earth Story)

Jerome Burg, founder and president, of Google Lit Trips is a one of my favorites. Jerome has been developing stories via Google Earth for years and is an expert storytelling through this media. With Jerome’s help and support, we adapted this Google Lit Trip.
Find all of Google Lit Trips Premier Edition Earth stories here. https://www.googlelittrips.org/

For official Google Earth Education information visit https://www.google.com/earth/education/.

In addition, think about Joining the Earth Edu Community: https://groups.google.com/forum/#!forum/earth-edu-community

@geteach