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.

---

Table of Contents

• I. Environment / Setting
• II. Setup Google Cloud Storage to House Map Tiles
• III. Create and Export Map Data Using Earth Engine
• IV. Create Google Earth Project and Folder Structure
• V. Programmatically Control Earth Project Folders and Features (The Secret Sauce)
• VI. Create Introduction Splash Screen (Set the Presentation)
• VII. Create 1st Panel within Austin Folder
• VIII. Create 2nd Panel within Las Vegas Folder
• IX. Tutorial GitHub Repository

---

I. Environment / Setting

1. Google Chrome
2. Google Cloud Storage
3. Earth Engine – Code Editor
4. Image Viewer – Any should work (IrfanView – Windows)
5. VS Code
6. All Tutorial Files used are in this GitHub Repository
7. Patience

---

II. Setup Google Cloud Storage to House Map Tiles

1. Create a bucket for the project
2. Create paths to store Map tiles and other assets
   • Austin/2000
   • Austin/2020
   • LV/2000
   • LV/2020

---

III. Create and Export Map Data Using Earth Engine

---

IV. Create Google Earth Project and Folder Structure

1. Create New Google Earth Project
2. Create full screen splash introduction placeholder
3. Create Folders for…
   • Austin
     • Austin 2000
     • Austin 2020
   • Las Vegas
     • Las Vegas 2000
     • Las Vegas 2020
4. Add Tiled Maps
5. To get folder/feature IDs – Export Project as kml

---

V. Programmatically Control Earth Project Folders and Features (The Secret Sauce)

1. Export KML
2. Create hidden div for links
3. Create JavaScript loop to show/hide features

---

VI. Create Introduction Splash Screen (Set the Presentation)

1. Add image, title and description to introduction screen
2. Set the “CLICK TO EXPLORE” button
3. Copy/paste HTML into Google Earth Project

---

VII. Create 1^st Panel within Austin Folder

1. Edit Carousel, Text
2. Set Features to hide/show

---

3. Set “Flyto” function for Austin Panel

---

VIII. Create 2^nd Panel within Las Vegas Folder

1. Edit Carousel, Text
2. Set Features to hide/show
3. Set “Flyto” function for Las Vegas Panel

---

IX. Tutorial GitHub Repository