{"id":624,"date":"2019-06-30T00:15:08","date_gmt":"2019-06-30T00:15:08","guid":{"rendered":"https:\/\/geteach.com\/blog\/?p=624"},"modified":"2019-07-06T19:49:10","modified_gmt":"2019-07-06T19:49:10","slug":"firstish-google-earth-engine-attempt","status":"publish","type":"post","link":"https:\/\/geteach.com\/blog\/2019\/06\/30\/firstish-google-earth-engine-attempt\/","title":{"rendered":"First(ish) Google Earth Engine Attempt"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"geteach.com ClimateEE Overview\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/QcEtY75cfnc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> <a href=\"https:\/\/geteach.com\/climateEarthEngine\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"https:\/\/geteach.com\/climateEarthEngine\/  (opens in a new tab)\">https:\/\/geteach.com\/climateEarthEngine\/ <\/a><\/figcaption><\/figure>\n\n\n\n<p>Last October (2018) I was speaking with a Google Earth\nEngineer. We were discussing an array of Geo technologies used in the classroom\nfrom ESRI\u2019s ArcGIS to QGIS to My Maps and Google Earth. Somehow, we got on the\ntopic of Google Earth Engine and the engineer suggested that there were enough\ndemos out in the wild that I should be able to hack something together.\nTherefore, during the winter break I put together my first Google Earth Engine\napp.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Google Earth Engine?<\/h2>\n\n\n\n<p>First, and most confusing, is that Google Earth Engine is not Google Earth. Most educator&#8217;s experience with an Earth Engine app is <a rel=\"noreferrer noopener\" aria-label=\"Google\u2019s Timelapse (opens in a new tab)\" href=\"https:\/\/earthengine.google.com\/timelapse\/\" target=\"_blank\">Google\u2019s Timelapse<\/a>.&nbsp; <a rel=\"noreferrer noopener\" aria-label=\"Timelapse (opens in a new tab)\" href=\"https:\/\/earthengine.google.com\/timelapse\/\" target=\"_blank\">Timelapse<\/a> 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.&nbsp; No sleepy eyes, weird smiles, bad hair, scrunched up face etc. This is what <a rel=\"noreferrer noopener\" aria-label=\"Google Timelapse (opens in a new tab)\" href=\"https:\/\/earthengine.google.com\/timelapse\/\" target=\"_blank\">Google Timelapse<\/a> 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.<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"margin-left:auto;margin-right:auto;\" width=\"93%\" height=\"596\" src=\"https:\/\/earthengine.google.com\/iframes\/timelapse_player_embed.html#v=22.64086,114.00758,11.016,latLng&amp;t=1&amp;ps=50&amp;bt=19840101&amp;et=20181231&amp;startDwell=0&amp;endDwell=0\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe><p style=\"text-align:center;color:#555d66;font-size:13px;margin-top: .5em;margin-bottom: 1em;\">Embedded Google Timelapse Shenzhen, Guangdong, China<\/p>\n\n\n\n<p><strong>The \u2018Experimental\u2019 product<\/strong> \u2013 <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/geteach.com\/climateEarthEngine\" target=\"_blank\">https:\/\/geteach.com\/climateEarthEngine<\/a> One of the datasets Google has made available via Earth Engine is TerraClimate, a monlthly climate database for terrestrial surfaces. <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"http:\/\/www.climatologylab.org\/terraclimate.html\" target=\"_blank\">http:\/\/www.climatologylab.org\/terraclimate.html<\/a> . The temporal range of this dataset is from January 1958 to &#8216;Present&#8217;. 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 <a href=\"https:\/\/geteach.com\/blog\/2016\/09\/10\/geteach-com-a-project-that-got-away-from-me\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"geteach.com (opens in a new tab)\">geteach.com<\/a>, the project got a bit out of hand. <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"geteach.com Earth Engine Overview Long\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/lzXh0iO_KlI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> <a href=\"https:\/\/geteach.com\/climateEarthEngine\/\">https:\/\/geteach.com\/climateEarthEngine\/<\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>First curiosity<\/strong> \u2013 How do you work this thing?<\/p>\n\n\n\n<p>I can\u2019t 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.&nbsp; 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 \u2018console log\u2019 panel. From there you load a dataset and create. <em>Please note&#8230;the video below is an overview and not a tutorial. <\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Engine Editor Overview\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/k6h93yZ2NX8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> <a href=\"https:\/\/earthengine.google.com\/\">https:\/\/earthengine.google.com\/<\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>Second curiosity<\/strong> \u2013 Can there be a way to easily flip through 60 years of maps? <\/p>\n\n\n\n<p>Short answer, yes\u2026add a dropdown menu option.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Change Years geteach.com Climate Earth Engine\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/2KGfjM_Wn3M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Use dropdown to select a year from 1958 to 2018<\/figcaption><\/figure>\n\n\n\n<p><strong>Third curiosity<\/strong> \u2013 Can I add legends?<\/p>\n\n\n\n<p>Yes<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"width:93%;margin-left:auto;margin-right:auto;\"><img loading=\"lazy\" decoding=\"async\" width=\"1140\" height=\"641\" src=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/LegendBox-1140x641.jpg\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/LegendBox-1140x641.jpg 1140w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/LegendBox-300x169.jpg 300w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/LegendBox-768x432.jpg 768w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/LegendBox.jpg 1920w\" sizes=\"auto, (max-width: 1140px) 100vw, 1140px\" \/><figcaption>Legends boxed in red<\/figcaption><\/figure>\n\n\n\n<p><strong>Fourth curiosity<\/strong> \u2013 Need an opacity slider\u2026wonder if there is one built in because the Maps API can do it? <\/p>\n\n\n\n<p>Sure is.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Opacity Slider geteach.com Climate Earth Engine\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/74U4g_XcN50?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Opacity slider example video<\/figcaption><\/figure>\n\n\n\n<p><strong>Fifth curiosity<\/strong> \u2013 Wouldn\u2019t it be cool to add a line graph for monthly temperature and bar graph for precipitation for almost any land surface on Earth? <\/p>\n\n\n\n<p>Hell Yes! Plus watch these!<\/p>\n\n\n\n<p> <em>Looking at charts and getting data <\/em>(**No need to calculate scale anymore*) <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Earth Engine and Charts\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/BiwgFTUofI8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Part I: Using charts within Earth Engine Application<\/figcaption><\/figure>\n\n\n\n<p> <em>A little math and spreadsheet lesson <\/em> (*No need to calculate scale anymore*) <em> <\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Google Earth Engine with Sheets\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/ixtnjAWnSpg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Part II: Unit Conversions<\/figcaption><\/figure>\n\n\n\n<p><strong>Sixth curiosity<\/strong> \u2013 It would be cool to compare strong El Nino and La Nina precipitation patterns. Therefore, they needed to be labeled in the dropdown menu.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Earth Engine El Nino La Nina\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/5KfMLC5m7bs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption><a href=\"https:\/\/geteach.com\/climateEarthEngine\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" https:\/\/geteach.com\/climateEarthEngine\/  (opens in a new tab)\"> https:\/\/geteach.com\/climateEarthEngine\/ <\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>Seventh curiosity<\/strong> \u2013 Now that I see these El Nino\/La Nina patterns, there should be some elevation data too. Check\u2026.Thankfully, Earth Engine also has DEM data from the USGS. <\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"width:93%;margin-left:auto;margin-right:auto;\"><img loading=\"lazy\" decoding=\"async\" width=\"1140\" height=\"641\" src=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/elevationBoxed-1140x641.jpg\" alt=\"\" class=\"wp-image-626\" srcset=\"https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/elevationBoxed-1140x641.jpg 1140w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/elevationBoxed-300x169.jpg 300w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/elevationBoxed-768x432.jpg 768w, https:\/\/geteach.com\/blog\/wp-content\/uploads\/2019\/06\/elevationBoxed.jpg 1920w\" sizes=\"auto, (max-width: 1140px) 100vw, 1140px\" \/><figcaption>Elevation layer with marker on Himalayas<\/figcaption><\/figure>\n\n\n\n<p><strong>Lastly, how to share?<\/strong> 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.<\/p>\n\n\n\n<p><a href=\"https:\/\/geteach.com\/climateEarthEngine\/\">https:\/\/geteach.com\/climateEarthEngine\/<\/a><\/p>\n\n\n\n<p>It took a couple, maybe four, days to learn and create.\nAs I always say, I code like a five-year-old, but here is 60 years of monthly\ntemperature and precipitation data. Plus elevation. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> Challenges | Issues<\/h2>\n\n\n\n<p>1. <s>Mashing together the Google Maps API with Google Charts is not easy. I wish I had more experience. For example, the temperature\u2019s 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\u2019t know it\u2026yet.<\/s> Figured it out!<\/p>\n\n\n\n<p>2. When app is in an Iframe of a page the \u2018greedy\u2019 mouse\nwheel zoom breaks. Therefore, users have to hold \u2018ctrl\u2019 wheel scroll to zoom in\nand out.<\/p>\n\n\n\n<p>3. The exported app is not smarty phone friendly.<\/p>\n\n\n\n<p>4. Lastly, My grandfather used to always say how he, \u201cwas one stripped screw from be a mechanic.\u201d 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&#8217;s just say my eyes are wiser than they used to be?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&rsquo;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 [&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-624","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/624","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=624"}],"version-history":[{"count":39,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/posts\/624\/revisions\/670"}],"wp:attachment":[{"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geteach.com\/blog\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}