Custom HTML Info Boxes: Google Earth Quiz Tutorial

It looks like Google Earth Web has stopped supporting onclick events. Therefore the code snippets from the videos have changed to utilize event listeners. After some thought, I am not going to recreate vs code extension. This GitHub repository is where all the latest html files reside.

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…

READ MORE

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

READ MORE

First(ish) Google Earth Engine Attempt

https://geteach.com/climateEarthEngine/

Last October (2018) I was speaking with a Google Earth Engineer. We were discussing an array of Geo technologies used in the classroom from ESRI’s ArcGIS to QGIS to My Maps and Google Earth. Somehow, we got on the topic of Google Earth Engine and the engineer suggested that there were enough demos out in the wild that I should be able to hack something together. Therefore, during the winter break I put together my first Google Earth Engine app.

What is Google Earth Engine?

First, and most confusing, is that Google Earth Engine is not Google Earth. Most educator’s experience with an Earth Engine app is Google’s Timelapse.  Timelapse is super cool! Think of it like this: Imagine you took a selfie of yourself every day for a year. Then have a machine, or a lot of machines in my case, analyze each pixel in every image for the best and clearest pixel for that location. Then create a mosaic of with the best pixels of you.  No sleepy eyes, weird smiles, bad hair, scrunched up face etc. This is what Google Timelapse does for the earth. A picture-perfect world with no clouds, haze, smoke, shadows etc. The cool thing is that Google has compiled this, plus more, datasets and allows users to create apps using varying sensors.

Embedded Google Timelapse Shenzhen, Guangdong, China

The ‘Experimental’ product – https://geteach.com/climateEarthEngine One of the datasets Google has made available via Earth Engine is TerraClimate, a monlthly climate database for terrestrial surfaces. http://www.climatologylab.org/terraclimate.html . The temporal range of this dataset is from January 1958 to ‘Present’. That is 60 years of climate data! While there are several data series (bands) in this dataset to map, I chose to map monthly mean max temperature and precipitation accumulation. Like geteach.com, the project got a bit out of hand.

https://geteach.com/climateEarthEngine/

First curiosity – How do you work this thing?

I can’t even pretend to tell you how the backend of this thing works. However, if you know a bit of JavaScript, the front end is not terrible.  It was also very helpful to have some experience with the Google Maps API. After signing up for an Earth Engine account, users create using the built-in code editor. The editor is simple enough. Left panel options include user scripts/example scripts, documentation, and assets. Center panel is the code editor. Right panel is the ‘console log’ panel. From there you load a dataset and create. Please note…the video below is an overview and not a tutorial.

https://earthengine.google.com/

Second curiosity – Can there be a way to easily flip through 60 years of maps?

Short answer, yes…add a dropdown menu option.

Use dropdown to select a year from 1958 to 2018

Third curiosity – Can I add legends?

Yes

Legends boxed in red

Fourth curiosity – Need an opacity slider…wonder if there is one built in because the Maps API can do it?

Sure is.

Opacity slider example video

Fifth curiosity – Wouldn’t it be cool to add a line graph for monthly temperature and bar graph for precipitation for almost any land surface on Earth?

Hell Yes! Plus watch these!

Looking at charts and getting data (**No need to calculate scale anymore*)

Part I: Using charts within Earth Engine Application

A little math and spreadsheet lesson (*No need to calculate scale anymore*)

Part II: Unit Conversions

Sixth curiosity – It would be cool to compare strong El Nino and La Nina precipitation patterns. Therefore, they needed to be labeled in the dropdown menu.

https://geteach.com/climateEarthEngine/

Seventh curiosity – Now that I see these El Nino/La Nina patterns, there should be some elevation data too. Check….Thankfully, Earth Engine also has DEM data from the USGS.

Elevation layer with marker on Himalayas

Lastly, how to share? Earth Engine has a built in create/share app function. It uses Google Cloud Platform (GCP). Thankfully I use GCP for geteach.com, so setup was easy.

https://geteach.com/climateEarthEngine/

It took a couple, maybe four, days to learn and create. As I always say, I code like a five-year-old, but here is 60 years of monthly temperature and precipitation data. Plus elevation.

Challenges | Issues

1. Mashing together the Google Maps API with Google Charts is not easy. I wish I had more experience. For example, the temperature’s scale is 0.1 so the viewer must move the decimal over. Would prefer to calculate the math within the chart api. I am sure there is a way. I just don’t know it…yet. Figured it out!

2. When app is in an Iframe of a page the ‘greedy’ mouse wheel zoom breaks. Therefore, users have to hold ‘ctrl’ wheel scroll to zoom in and out.

3. The exported app is not smarty phone friendly.

4. Lastly, My grandfather used to always say how he, “was one stripped screw from be a mechanic.” My version is that I am one out of scope var from being a web designer. I ended up coding everything in notepad++ and copy/pasting into the code editor. Let’s just say my eyes are wiser than they used to be?

READ MORE

An Inclusive Earth

As teachers, we are always looking for ways to include all our diverse students into learning experiences. I cannot imagine my own children going to school not knowing the primary language of that culture; sitting there fighting to understand a concept through the media of strange sound symbols. (London #$%%&*!* is %#$%$#R^% down  %#$%$#R^%  down %#$%$#R^% down). My wife and I, like all teachers, work hard to bring a similar learning experience to all our deserving students. On occasion I’ll get a ping from a company telling us an order of a novel, written in a different language, will be delivered in the next day.

All that stated, Google Earth for Web is one resource you can use to include more of your students. Warning…this is a hack. Meaning that this works as of today, but who knows how long in the future.

Google Earth for the Web has been translated into many languages. In addition, some of Google’s Voyager stories have been translated into several languages. In general, Google identifies language settings on the user’s machine to feed that Google Earth language version. However, there is a url hack to open other language versions of Google Earth. Again, this works as of the day of this post, but not sure about the future. Anyways, the below urls will take you to that language version of Google Earth. The table also identifies which language version has some, not all, translated Voyager content. Even if Voyager content is not translated, exploring within Earth will have many translated points of interests (POIs). Below the table are a couple of videos showing how you might use this in the classroom.

Video using Voyager stories across languages

Video using Google Earth to explore across languages

READ MORE

Authoritative Bias of Maps

In today’s context it is bit of a challenge writing a post about the authoritative bias of maps. After all, how can maps be both accurate and tendentious. Kuby, Harner, and Gober’s book Human Geography in Action (Amazon Link: http://a.co/2C1hF9s) attributes this authoritative bias to five critical decisions cartographer must make in creating and conveying visual information: maps projections, simplification, map scale, aggregation, and type of map.[1] Below are a couple of ways Google’s Geo tools can be used to demonstrate these choices.

1. Maps Projection

As discussed in a previous post (link), Google Maps, Google’s Maps API, and Google’s My Maps uses a Mercator projection. Projections are chosen for a purpose; in this case probably navigation. The easiest way to demonstrate the impact of this choice simply draw the ring around Greenland in My Maps, or geteach.com, and drag the polygon to the equator. I normally show this in class then give the student 20 – 30 mins to draw and drag polygons. Students tend to want to know the size of Russia and like to drag the continent of Africa north towards the pole. Being from Texas, I often ask students to grab Alaska and bring it south over the continental US for a bit of humbling.

Map Projection geteach.com

https://youtu.be/s4peKoPnFv0

Map Projection My Maps

https://youtu.be/XAxyNaU0BTI

Map Projection Cool Site

2. Simplification

Kuby et al. like to use subway maps to demonstrate the idea of simplification and its benefit to the user. Below are London’s transit tubes on Google Maps and the other is London’s transit tube map. Explore and follow routes through London by zooming in/out and dragging the two maps below. Imagine if you where actually in London. Which map is more useful if you need to use this transit system? Which map is more accurate?

(Sorry, Google’s API only shows tube transit lines from this zoom level and closer)

Source: Google Maps API Transit

Use the slider at the bottom of this map to help compare.


Source: Transport for London

Simplification Google Earth

Simplification geteach.com

3. Map Scale

The zoom level of a map corresponds with the detail of a map.  Large scale map views a smaller area with more detail. Small scale maps view a large area with less detail. Which maps below gives you more detail of Texas’ Capitol?

Map Scale Google Earth

Map Scale geteach.com

4. Aggregation

Aggregation is the size of geographic units in visualized in the map. The video below shows how level of aggregation tells a different story for Pennsylvania’s 2016 election. The end of the story is the same but rescaling the data tells a richer story.

Aggregation (State Result vs. County Results) Google Earth

Aggregation (State Result vs. County Results)  geteach.com

5. Type of Map

Be it reference or thematic maps, cartographers still must make decisions on what to show, omit, or emphases.

Reference maps: See what Google Maps can do depending on your search location setting. If you do this make sure you set your location setting back. (Developer Maps API Link Localization)

Thematic Maps: Here is a simple change in shading created to complicate the spatial distributions of Pennsylvania’s 2016 election votes. (Initial Blog Post Here)

Shading Thematic Maps Google Earth

Shading Thematic Maps geteach.com

KML Files (Add to your drive or download): https://drive.google.com/open?id=1MjhtilKBe1MXiOplhgx88At8HVmnkpsN 

Kuby, Harner, and Gober’s book Human Geography in Action (Amazon Link: http://a.co/2C1hF9s) is much richer than this simple post.  I highly recommend this text for anyone, or class, that wants to deepen their knowledge of geography. The intent of this post is to show the purposeful inaccuracy of maps and the importance of these inaccuracies. While maps, and many other forms of information, can be misleading, it is not always for nefarious reasons.  At some point, the read/user has assess the value and limitations of their sources. The primary purpose of a map is often to transfer information more efficiently than a textual source.  After all, as Harm De Blij wrote, “If a picture is worth a thousand words, a map is worth a million.” Try it yourself…describe the boundaries of all the countries in the world. Don’t forget the disputed ones. The choices made by cartographers give maps both value and limitations.

[1] Kuby, Michael, John Harner, and Patricia Gober. Human Geography in Action. 6th ed. Hoboken, NJ: John Wiley and Sons, 2013.

Voting Data Sources:
Pennsylvania Spatial Data Access: http://www.pasda.psu.edu/ (Download County Boundaries – Almost every state has this…Census also has state counties https://www.census.gov/cgi-bin/geo/shapefiles/index.php)

Pennsylvania Department of State: http://www.electionreturns.pa.gov/ (Election Data)

READ MORE