I love finding informational U.S. government websites that fit the curriculum. In this case, and many others, NOAA created a page that does a really good job informing viewers about El Niño and La Niña (Link). What I enjoy about these sites is the opportunity to add value by transferring them into Google Earth stories. Now students can get the information in a package that allows for a bit more exploration. Or at least students get to push more buttons.
PSA: Teachers…If you are wanting to share this or other Google Projects with students and your school is a Google EDU campus. You might have to first share to your Teacher Workspace EDU account and then make a copy. (Three dot icon next to the trash can icon –> “Copy Project” Then share the copy to your students. Most EDU accounts do not allow for outside domain sharing. This puts a copy within your EDU Domain.
TL;DR: Here is a GitHub Repository for those who just want to see Earth’s Changing Oceans html, CSS, and JavaScript. (Link) Or make a copy of the demonstrated Google Earth Project. (Link)
It is always great to share Google Earth Project ideas at Geo for Good Summits. This year’s presentation utilized Earth Web’s new tile features along with folders. I originally wanted to create a post on how the demonstrated Google Earth Project was created, but I thought it would be better to create a simple project that uses the same basic ideas and structure.
The simple story created in this post is Austin and Las Vegas’ urban growth 2000 – 2020. This post will be a guide starting from creating and exporting map tiles using Google Earth Engine through the creation of an Earth Project using these tiles. Being completely unaware of people’s knowledge and skills, the lack of real time meaningful feedback, and the use of multiple platforms creates many challenges for this post. My hope is that the videos and code snippets help, but feel free to reach out. You can find me on Twitter @geteach.
Lastly, the typical disclaimer. I am a high school geography teacher and not a professional developer. Hopefully this tinkering adds value to whatever you are trying to create.
It has been about five years since geteach.com’s last UI refresh. There are several issues that have been resolved. Watching students use the site in my classroom has brought on many of these changes, but some are just me wanting to tinker around. The most significant changes center around students using touch screens on their 11.6” Chromebooks.
Other changes have to do with scrolling of panels and creating a vertical split screen mode for modern, relatively large, smarty phones and/or tablets. As always, I am a one teacher shop that can only test on the devices that teachers can afford. So hopefully the new design works for your students. If not, the old version will be hosted here for the time being. https://geteach.com/back2020.html
Swipe above image: New larger and on-hover highlighted buttons
Swipe above image:“Select Map” menu has been reworked to better fit smaller screens
Swipe above image:Close Streetview icon added to panel’s header
Swipe above image:Added scrollbars to each panel to accommodate smaller screen sizes
Swipe above image:The importance of scroll bars. Allowing students to work with varying window sizes
“Layers” automatically toggles on after clicking a map set
New vertical view option which might not help a lot in landscape on a computer, but…
..pretty handy in portrait mode on my Note 8 (image above) and/or a tablet in portrait mode
In 2012, I ran into Joseph Kerski in San Marcos at the National Council for Geographic Education conference. The site created for my students, geteach.com, received an Excellence in Media award from the organization that year, and I have a distinct memory of a conversation in a small hotel room with Joseph, where he asked something along the lines of why I don’t use ESRI’s services. The truth is, I am a user and teacher of multiple GIS platforms, including QGIS, ArcGIS Online, Earth Engine, Google Earth, Google Maps, Google My Maps, and the Google Maps API. After several years of delay, I have finally started looking at ArcGIS’s JavaScript API.
Please note that I’ve only spent a couple of weekends working on this new draft site: https://geteach.com/arc/. However, I already have some positive first impressions. Since the loss of the Earth API, I’ve dreamed of bringing a globe back into a website. The bonus with the ArcGIS API is that users can toggle between both 2D and 3D views.
I have mixed feelings about widgets, regardless of the service. They’ve always been nice and easy to work with, but there’s always something I’d like to change. While the compromises are minimal with the ArcGIS API, they still exist. From the documentation, it seems that a skilled developer could modify or create their own widgets. However, no high school teacher has time for that
The basemap options are fantastic. Eventually, once I figure it out, I will add the raster pyramid tiles and geoJson vector data I use in geteach.com. Loading the data does not look to be difficult. Like all the version of geteach.com, the menu system is going to take some time. Mashing together an API with a home grown UX takes more time than a couple of weekends for me. The basic UI framework is there. In addition, I have another former function that I would like to bring back to layers that will add some time to my development. Therefore, currently the only exploration of maps are ESRI’s basemaps….which are fantastic! Really enjoy the outline map next to a reference map!
Urgh! Street View. Street View is the primary reason I have not already experimented with the ArcGIS API. I do not believe there is one time when my class is using geteach.com that at least one student is not using Street View. Even if there is nothing in the activity having to do with Street View, someone has dropped Pegman into North Korea.
For this project, there are several widgets, including search, elevation, and measurements, which are easy to implement in the code. The main challenge is understanding how to start, stop, clear, and reset the widgets for both a 2D environment and a 3D world… MapView vs. SceneView.
Similar to Street View, Google’s imagery is far better than the available basemaps—at least the ones I’ve seen—when it comes to populated areas. Cultural landscape is a huge component of my human geography high school course, and Google’s imagery is often more detailed in this regard. ESRI’s services, however, seem to offer more complex 3D scenes, though this is not a default option.
Google Maps API Left | ArcGIS Imagery Basemap Right
Using an API key is not straightforward. I’m unsure how long this draft site will work because I don’t have a ‘pay as you go’ setup as a developer. One of the reasons I’m branching out to this API is because I had to remove the search location feature from geteach.com. One month, I received a $300 bill from Google’s Map Platform due to their Places API, the service for map search. I avoided the charge by disabling the feature. This is where most of my uncertainty lies—I have no idea how much this API will cost as I continue developing it, nor do I know how long it will work without a key.
As always, the primary purpose of geteach.com is to provide a free site to help teachers educate and engage students using Google Geo Tools—no ads and no sign-in required. I see geteach.com as a gift to the curious who find value in these sites. As I mentioned earlier, I’m a high school teacher, so I apologize that it can’t be more.
Follow me on bluesky @geteach if you are interested in project updates.
updated 12/14/2024 minor edits and replaced “Follow me on Twitter” with Bluesky
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. (Click here to watch full presentation – Free on-demand)
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.
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 class="mdl-chip mdl-chip--contact audioPlay" 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/egew0521.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.
