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

  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
Above Video: Set up Google Cloud Storage Folders

III. Create and Export Map Data Using Earth Engine

  1. Create cloudless map layers of Landsat 7 data
  2. Using bounding box to only save map data for Austin and Las Vegas
Above Video: Creating Earth Engine Maps

  1. Export the Map Tiles to Google’s Cloud Storage
Above Video: Export Map Tiles via Earth Engine

  1. Export the Panel Images to Google’s Cloud Storage
Above Video: Create and Export Panel Images

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
Above Video: Structure Google Earth Story

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
Above Video: The Secret Sauce

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
Above Video: Edit Introduction/Splash Screen

VII. Create 1st Panel within Austin Folder

  1. Edit Carousel, Text
  2. Set Features to hide/show
Above Video: Create Austin Panel and Set Map Overlays

  1. Set “Flyto” function for Austin Panel
Above Video: Add “Flyto” Function to Austin Panel

VIII. Create 2nd Panel within Las Vegas Folder

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

IX. Tutorial GitHub Repository

Share this...
Tweet about this on Twitter
Twitter
Share on Facebook
Facebook