{"id":848,"date":"2021-11-14T00:44:16","date_gmt":"2021-11-14T00:44:16","guid":{"rendered":"https:\/\/geteach.com\/blog\/?p=848"},"modified":"2021-11-25T17:47:12","modified_gmt":"2021-11-25T17:47:12","slug":"geteach-com-geo-4-good-2021","status":"publish","type":"post","link":"https:\/\/geteach.com\/blog\/2021\/11\/14\/geteach-com-geo-4-good-2021\/","title":{"rendered":"GeTeach.com Geo 4 Good 2021"},"content":{"rendered":"\n<p><strong><em>TL;DR:<\/em><\/strong> Here is a GitHub Repository for those who just want to see Earth\u2019s Changing Oceans html, CSS, and JavaScript. (<a href=\"https:\/\/github.com\/geteach\/earths_changing_oceans_g4g21\" target=\"_blank\" rel=\"noreferrer noopener\">Link<\/a>) Or make a copy of the demonstrated Google Earth Project. (<a rel=\"noreferrer noopener\" href=\"https:\/\/earth.google.com\/web\/data=Mj8KPQo7CiExRmx3WXVnSGxhY0QwV3h4dmU0b2ZwS3FrYVYweDAyUkoSFgoUMDdGMEUxRUNERjFERTg0RjZEODI\" target=\"_blank\">Link<\/a>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1140\" height=\"641\" src=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage-1140x641.jpg\" alt=\"\" class=\"wp-image-913\" srcset=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage-1140x641.jpg 1140w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage-300x169.jpg 300w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage-768x432.jpg 768w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage-1536x864.jpg 1536w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2021\/11\/splashPage.jpg 1920w\" sizes=\"auto, (max-width: 1140px) 100vw, 1140px\" \/><\/figure>\n\n\n\n<p>It is always great to share Google Earth Project ideas at Geo for Good Summits. This year\u2019s presentation utilized Earth Web\u2019s 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.<\/p>\n\n\n\n<p>The simple story created in this post is Austin and Las Vegas\u2019 urban growth 2000 \u2013 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\u2019s 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 <a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/geteach\" target=\"_blank\"><strong>@geteach<\/strong><\/a>.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Table of Contents<\/h2>\n\n\n\n<ul class=\"has-medium-font-size wp-block-list\"><li><strong>I. <a href=\"#environment\" data-type=\"internal\" data-id=\"#environment\">Environment \/ Setting<\/a><\/strong><\/li><li><strong>II. <a href=\"#cloudstorage\" data-type=\"URL\">Setup Google Cloud Storage to House Map Tiles<\/a><\/strong><\/li><li><strong>III. <a href=\"#mapexport\" data-type=\"URL\">Create and Export Map Data Using Earth Engine<\/a><\/strong><\/li><li><strong>IV. <a href=\"#originalproject\" data-type=\"URL\">Create Google Earth Project and Folder Structure<\/a><\/strong><\/li><li><strong>V. <a href=\"#secret\" data-type=\"URL\">Programmatically Control Earth Project Folders and Features (The Secret Sauce)<\/a><\/strong><\/li><li><strong>VI. <a href=\"#introduction\" data-type=\"URL\">Create Introduction Splash Screen (Set the Presentation)<\/a><\/strong><\/li><li><strong>VII. <a href=\"#austinPanel\" data-type=\"URL\">Create 1st Panel within Austin Folder<\/a><\/strong><\/li><li><strong>VIII. <a href=\"#vegasPanel\" data-type=\"URL\">Create 2nd Panel within Las Vegas Folder<\/a><\/strong><\/li><li><strong>IX. <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/geteach\/geo4good21\" data-type=\"URL\" data-id=\"https:\/\/github.com\/geteach\/geo4good21\" target=\"_blank\">Tutorial GitHub Repository<\/a><\/strong><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"environment\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">I. Environment \/ Setting<\/h2>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/chrome\/\" target=\"_blank\">Google Chrome<\/a><\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/cloud.google.com\/storage\" target=\"_blank\">Google Cloud Storage<\/a><\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/earthengine.google.com\/\" target=\"_blank\">Earth Engine &#8211; Code Editor<\/a><\/strong><\/li><li><strong>Image Viewer &#8211; Any should work (<a rel=\"noreferrer noopener\" href=\"https:\/\/www.irfanview.com\/\" target=\"_blank\">IrfanView<\/a> &#8211; Windows)<\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">VS Code<\/a><\/strong><\/li><li><strong>All Tutorial Files used are in this <a href=\"https:\/\/github.com\/geteach\/geo4good21\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Repository<\/a><\/strong><\/li><li><strong>Patience<\/strong><\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"cloudstorage\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">II. Setup Google Cloud Storage to House Map Tiles<\/h2>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li><strong>Create a bucket for the project<\/strong><\/li><li><strong>Create paths to store Map tiles and other assets<\/strong><ul><li><strong>Austin\/2000<\/strong><\/li><li><strong>Austin\/2020<\/strong><\/li><li><strong>LV\/2000<\/strong><\/li><li><strong>LV\/2020<\/strong><\/li><\/ul><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Set up Google Cloud Storage Folders\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/fJ8RX027rcI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Set up Google Cloud Storage Folders<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"mapexport\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">III. Create and Export Map Data Using Earth Engine<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ol class=\"wp-block-list\" type=\"1\"><li><strong>Create cloudless map layers of Landsat 7 data<\/strong><\/li><li><strong>Using bounding box to only save map data for Austin and Las Vegas<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating EarthEngine Maps\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/3XN7D5OPsZ4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> Above Video:  Creating Earth Engine Maps<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\" start=\"3\"><li><strong>Export the Map Tiles to Google\u2019s Cloud Storage<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Export Map Tiles Earth Engine\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/CkpvnxlvKIY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> Above Video:  Export Map Tiles via Earth Engine<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li><strong>Export the Panel Images to Google\u2019s Cloud Storage<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Image for Panels\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/RLY06fjyPVM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> Above Video:  Create and Export Panel Images<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"originalproject\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">IV. Create Google Earth Project and Folder Structure<\/h2>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li><strong>Create New Google Earth Project<\/strong><\/li><li><strong>Create full screen splash introduction placeholder<\/strong><\/li><li><strong>Create Folders for\u2026<\/strong><ul><li><strong>Austin<\/strong><ul><li><strong>Austin 2000<\/strong><\/li><li><strong>Austin 2020<\/strong><\/li><\/ul><\/li><li><strong>Las Vegas<\/strong><ul><li><strong>Las Vegas 2000<\/strong><\/li><li><strong>Las Vegas 2020<\/strong><\/li><\/ul><\/li><\/ul><\/li><li><strong>Add Tiled Maps<\/strong><\/li><li><strong>To get folder\/feature IDs &#8211; Export Project as kml<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Google Earth Project Structure\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/a2pHzpm-H7w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Structure Google Earth Story<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"secret\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">V. Programmatically Control Earth Project Folders and Features (The Secret Sauce)<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Export KML<\/strong><\/li><li><strong>Create hidden div for links<\/strong><\/li><li><strong>Create JavaScript loop to show\/hide features<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Show\/Hide folder and feature links div (the secret sauce)\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/ceaX5V9dl0o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: The Secret Sauce<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"introduction\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">VI. Create Introduction Splash Screen (Set the Presentation)<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Add image, title and description to introduction screen<\/strong><\/li><li><strong>Set the &#8220;CLICK TO EXPLORE&#8221; button<\/strong><\/li><li><strong>Copy\/paste HTML into Google Earth Project<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introduction (Splash) Screen\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/qfb6Zt92HTA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Edit Introduction\/Splash Screen<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"austinPanel\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">VII. Create 1<sup>st<\/sup> Panel within Austin Folder<\/h2>\n\n\n\n<ol class=\"wp-block-list\" type=\"a\"><li><strong>Edit Carousel, Text<\/strong><\/li><li><strong>Set Features to hide\/show<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Austin Panel Images\/Overlay\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/4Gq14tKAN-g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Create Austin Panel and Set Map Overlays<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>Set &#8220;Flyto&#8221; function for Austin Panel<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Austin Panel Set to Flyto\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/FCJXG7skQbI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Add &#8220;Flyto&#8221; Function to Austin Panel<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" id=\"vegasPanel\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">VIII. Create 2<sup>nd<\/sup> Panel within Las Vegas Folder <\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Edit Carousel, Text<\/strong><\/li><li><strong>Set Features to hide\/show<\/strong><\/li><li><strong>Set &#8220;Flyto&#8221; function for Las Vegas Panel<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Las Vegas Panel\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/IEp7Rf3096c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Above Video: Create Las Vegas Panel<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">IX. <a href=\"https:\/\/github.com\/geteach\/geo4good21\" target=\"_blank\" rel=\"noreferrer noopener\">Tutorial GitHub Repository<\/a><\/h2>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR: Here is a GitHub Repository for those who just want to see Earth&rsquo;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&rsquo;s presentation utilized Earth Web&rsquo;s new tile [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-848","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/comments?post=848"}],"version-history":[{"count":51,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/848\/revisions"}],"predecessor-version":[{"id":914,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/848\/revisions\/914"}],"wp:attachment":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/media?parent=848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/categories?post=848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/tags?post=848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}