GeTeach.com UI Refresh

Swipe Right: New UI / Swipe Left: Old UI

It has been about five years since geteach.com’s last UI refresh. There are several issues that have been resolved. Watching students use the site in my classroom has brought on many of these changes, but some are just me wanting to tinker around. The most significant changes center around students using touch screens on their 11.6” Chromebooks.

Other changes have to do with scrolling of panels and creating a vertical split screen mode for modern, relatively large, smarty phones and/or tablets. As always, I am a one teacher shop that can only test on the devices that teachers can afford. So hopefully the new design works for your students. If not, the old version will be hosted here for the time being. https://geteach.com/back2020.html

Swipe above image: New larger and on-hover highlighted buttons

Swipe above image: “Select Map” menu has been reworked to better fit smaller screens

Swipe above image: Close Streetview icon added to panel’s header

Swipe above image: Added scrollbars to each panel to accommodate smaller screen sizes

Swipe above image: The importance of scroll bars. Allowing students to work with varying window sizes

“Layers” automatically toggles on after clicking a map set

New vertical view option which might not help a lot in landscape on a computer, but…

..pretty handy in portrait mode on my Note 8 (image above) and/or a tablet in portrait mode

**Phone viewport must be wider than 385px**

GeTeach.com and ArcGIS API

In 2012 I ran into Joseph Kerski in San Marcos at the 2012 National Council for Geographic Education conference. GeTeach.com received an excellence in media from the organization that year and I have distinct memory of a small hotel hall room conversation with Joseph where he asked something along the lines of why I do not I use ESRI’s services. Truth is, I am a user, and teach, with multiple GIS platforms including QGIS, ArcGIS Online, Earth Engine, Earth, Google Maps, Google My Maps, Google Maps API. After several years of delay, I have finally started looking at ArcGIS’ JavaScript API.

First Draft https://geteach.com/arc/

What I like..

Please know that I have only spent a couple of weekends creating this new draft site. https://geteach.com/arc/ However, I do have some positive first impressions. First, ever since the lose of the Earth API I have dreamed to bring a globe back into a website. The bonus with ArcGIS API is that users can toggle between both 2D and 3D.

First Draft https://geteach.com/arc/

I have mixed feelings about all widgets, no matter the service. Widgets are, and have always been, nice and easy to work with, but there is always something that I would like to change. These compromises are minimal with the ArcGIS API, but they are there. From the documentation, it looks like a real developer, one who knew what they were doing, could modify and/or create their own. However, ain’t no high school teacher have time for that. For this project there are several widgets, including search, elevation, and measurements. These widgets are easy to implement in the code. The only issue is being aware of how to start, stop, clear, and reset for a 2D environment and a 3D world… MapView vs  SceneView.

First Draft https://geteach.com/arc/

The basemap options are fantastic. Eventually, once I figure it out, I will add the raster pyramid tiles and geoJson vector data I use in geteach.com. Loading the data does not look to be difficult. Like all the version of geteach.com, the menu system is going to take some time. Mashing together an API with a home grown UX takes more time than a couple of weekends for me. The basic UI framework is there. In addition, I have another former function that I would like to bring back to layers that will add some time to my development. Therefore, currently the only exploration of maps are ESRI’s basemaps….which are fantastic! Really enjoy the outline map next to a reference map!

First Draft https://geteach.com/arc/

What I miss…

Urgh! Street View. Street View is the primary reason I have not already experimented with the ArcGIS API. I do not believe there is one time when my class is using geteach.com that at least one student is not using Street View. Even if there is nothing in the activity having to do with Street View, someone has dropped PegMan into North Korea.

First Draft https://geteach.com/arc/

Similar to Street View, when it comes to populated areas, Google’s imagery is far better than the available basemaps; at least the ones I have seen. Cultural landscape is a huge component to my human geography high school coarse. There seems to be more complex 3D scenes available with ESRI’s services. However, this is not a a default option.

Google Maps API Left | ArcGIS Imagery Basemap Right

Using an API key is not straight forward. I am not sure how long this draft site will work because I do not have a ‘pay as you go’ setup as a developer. One of the reasons I am branching out to this API is because I had to take the search location out of geteach.com. One month, I received a $300 bill from Google’s Map Platform due to their Places API, the service for map search. I got out of the bill by disabling the feature. And this is where most of my uncertainty lies. I have no idea how much this API will cost if I keep developing it. I do not even know how long it will work without a key.  

As always, the primary purpose of geteach.com is to bring a free site to help teachers educate and engage students using Google Geo Tools. Ad and sign in free. I see geteach.com as a gift to the curious educators and students that find value in these sites. As mentioned earlier, I am a high school teacher, so sorry it cannot be more.

Follow me on twitter @geteach if you are interested in project updates.

Spice up Google Earth Projects with Custom HTML

One of the most requested features I get asked about is adding narration or audio to Google Earth Projects. Recently, I was fortunate to participate in a Google for Good 2020 session were Jordon Mears and I discussed how to approach adding audio to Google Earth Projects via Earth’s custom HMTL option. (Click here to watch full presentation – Free on-demand)

Click here to watch full presentation – Free On-Demand

Thanks for those who watched the session. However, as an educator, I understand the need to offer a non-serial version and examples of our 15-minute conversation.

Resources:

Code Editor: Visual Studio Code (Code editor from session) https://code.visualstudio.com/

Hosted MP3 file:  https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3

HTML Templates: https://github.com/geteach/geteachGeology/tree/master/eGEW

Google Earth Project Example Link (Feel free to make a copy)

Step 1: Start simple

For me, when working with HTML and Google Earth, starting with the most basic snippet, then working up, saves hours of development time.

Our inquiry begins with…Can HTML audio tag work in Google Earth Web?

Finding the simplest code example often starts with Google search, “html Audio.”  These searches often lead me to school. https://www.w3schools.com/html/html5_audio.asp

From here, I will take their “Try it Yourself” snippet and replace their mp3 with one of my own.

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Copy and Paste the modified code into Google Earth Web and hear it work.

Simple HTML Audio – Google Earth Web

Step 2: Spice it up!

Now that we know the html audio tag works, we can spice up the style of the page with a little more HTML, CSS, and simple JavaScript. You can always create your own, but if you don’t have the time, feel free to use a template from this GitHub repository (https://github.com/geteach/geteachGeology/tree/master/eGEW). The snippet below is using the oneImageAudio.html example found in repository.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple Audio with One Image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500|Roboto+Slab|Material+Icons" type="text/css" />
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
        <link rel="stylesheet" href="https://geteach.com/gti/drp/scripts/egew.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <main class="panelMain">
                <div class="mediaContain">
                    <div class="slideshow-container">
<!--First media in Carousel--Best Image Aspect Ratio 3:2 Replace Image Source (src) bellow-->
                        <div class="mySlides fade">
                            <img class="image"src="https://storage.googleapis.com/geteachkml4/seafloorage/seafloor480.jpg">
                            <div class="captionDiv">
                                <div class="caption" >Replace Caption</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" id="content">
<!--Replace title text between div-->
                    <div class="title">
                        Replace title
                    </div>
<!--Replace mp3 source (src="youraudio.mp3")-->
                    <audio id="audioI" style="display:none" >
                        <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
                            Your browser does not support the audio tag.
                    </audio>
                    <span class="mdl-chip mdl-chip--contact audioPlay" style="width:85px;margin-left: 8px;">
                        <span class="mdl-chip__contact mdl-color-text--white" style="margin-right: 5px;"id="playIcon">
                            <i class="material-icons">play_arrow</i>
                        </span>
                        <span class="mdl-chip__text" id="playButton">Play</span>
                    </span>
<!--Replace text for description--Every <p> needs to have a class="text"--Any html works-->
                    <div class="description">
                        <p class="text">Replace description...If you need a new paragraph the class="text"</p>
                    </div>
                </div>
<!--Best image height for footer is 24px with a max-width of 145px-->
<!--If you don't want the footer is it best to delete the html within the logoLeft/LogoRight Div-->
                <div class="footer">
                    <div class="logoLeft">
                        <a href="https://twitter.com/geteach" target="_blank">
                            <img src="https://storage.googleapis.com/geteachkml4/logogeteachtemp.png" >
                        </a>
                    </div>
                    <div class="logoRight" style="display:none">
                    </div>
                </div>
            </main>
        </div>
    </body>
    <script src="https://geteach.com/gti/drp/scripts/egew0521.js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</html>
Custom HTML Audio – Google Earth Web

There are several HTML files in the repository for you to use, modify, or recreate.  You can reach me @geteach on twitter if you need help exploring, creating, or sharing this Earth.

Read more about my Google Geo fun here: Decade of Google Geo EDU (https://geteach.com/blog/2020/01/26/decade-of-google-geo-edu/)

Or read some other Google Geo post here: https://geteach.com/blog

GeTeach’s Spring Cleaning – 2020

Left Canvas Electricity – Production
Right Canvas Electricity Consumption

GeTeach.com had a little spring cleaning this past week. The CIA World Factbook, along with UN’s Human Development Index, data was updated. As always, this biggest change looks to be Net Migration for Syria (Human Geography -> Demographics). Five years ago, there was a large negative flow out of Syria; now there is a relatively large inflow.

Net Migration – geteach.com

There are now over 190 map layers in geteach.com. New layers include percentage of Improved Sanitation (Human Geography -> Society), percent of population working in Agriculture/Mining, Industry, and Service (Human Geography -> Economy), and updated Population Density map (Human Geography -> Population Density), and Median Age (Human Geography -> Demographics).

Left Canvas Agriculture/Mining (% of labor)
Right Canvas Service (% of labor)

In addition to new data, most of the thematic maps have new color gradients. Therefore, the maps, along with the legends, should be easier to process with new, more “modern”, colors.

Left Canvas Electricity – Renewable Resources (% of capacity)
Right Canvas Electricity – Nonrenewable Resources (% of capacity)

The most immediate impact on my classes will be the addition of population pyramids located with Median Age, Total Dependency Ratio, Youth Dependency Ratio, and Elderly Dependency Ratio within the Demographic dataset.

These 2018 population pyramids are being served from a CIA Factbook host, so hopefully the agency does not change there urls, but having population pyramids in the site is a dream come true for my own teaching and learning; considering much of the course I teach is based on the unequal distribution of goods, services, and people across Earth’s service.

Left Canvas Total Dependency Ratio
Right Canvas Median Age

Another change worth mentioning is the inclusion of a small source/credit tag under legends. Geteach.com has always had a source/credit in the description box associated with each layer, but I was never comfortable with users have to click the “I” icon at the top right of each canvas to see the source of the map or data.

Left Canvas Human Development Index 2000
Right Canvas Human Development Index 2018

There are also numerous spacing changes with the styling. I doubt anyone will notice the 3-pixel margin shifts, but as a self-described pixel snob these items were truly bugging me. It is similar to painting a house or bedroom. The painter knows all their mistakes; even though it is never noticeable to any guest.

3-Pixel Margin added to info-box.
Canvas CIA Factbook

Well back to my real job…I hope teachers and students continue to enjoy at least one of the over 18,000 correlations; developing a deeper understanding of people’s relationships with their world and each other.

If you are new to geteach.com, here is a four-minute overview video of many of the functions already built into the site.

https://geteach.com

Decade of Google Geo EDU

“Free site dedicated to help teachers educate and engage students using Google Geo Tools”

The above has been my mission statement for about ten years now. I should probably change ‘site’ to ‘sites’, but will worry about that later. As I am finally getting around to backing up some old project files, I noticed two things. One, my files are an absolute mess. Two, I have used a lot of Google Geo Tools over this decade; primarily oscillating between Maps API, Google Earth, and more recently Earth Engine. A friend once asked if I could put everything in one place. Looking at my files today suggest this will be highly unlikely. I try to use this blog to showcase work I think other students and teachers will be interested in. That stated, I don’t have an index of post for Google’s Geo Tools. Therefore, below are my favorite posts and projects organized around Google Geo Tools.

Google Earth

The one that started it all. As some people know, I am a big fan of kml and Google Earth; often calling it my gateway technology.  With the web version of Google Earth, the future of this technology remains as current today as it was a decade ago.

Blog Posts

Explore, Create, Share with Google Earth Creation Tools: Overview of what is easy and possible with content creation tools. (Contains many of my current Google Earth Projects) https://geteach.com/blog/2019/12/01/explore-create-share-with-google-earth-creation-tools/

An Inclusive Earth: Include more student in more languages using Google Earth on Web. https://geteach.com/blog/2019/03/15/an-inclusive-earth/

Custom HTML Info Boxes: Google Earth Quiz Tutorial: Advanced tutorial for creating custom HTML info boxes for Google Earth on Web. https://geteach.com/blog/2020/01/03/custom-html-info-boxes-google-earth-quiz-tutorial/

thanksgiving-fun-with-kml: Learn basic kml coding using ground overlays (oldy but goody). https://geteach.com/blog/2016/11/21/thanksgiving-fun-with-kml/

RIP-Earth-API-Plugin: Not many people know, but geteach.com used to run off a Google Earth API. Here is a post memorializing what used to be possible via this plugin. Great older videos in this one! https://geteach.com/blog/2017/01/08/rip-earth-api-plugin/

Old Side Projects | Archive

Philippines- Typhoon Haiyan (geteach.com Deprecated Earth API )


Google Maps API

My primary page, geteach.com, is built using this platform. Originally created to just share maps with my students, the site now shares maps with thousands of students.

Blog Posts

geteach.com – layers: Quick overview of all the layers in geteach.com circa 2016. Several additional layers have been added over the past three years. https://geteach.com/blog/2016/12/17/geteach-com-layers/

#12MapComparisonsOfChristmas: Some of the many comparisons students can make with geteach.com. https://geteach.com/blog/2016/12/21/12mapcomparisonsofchristmas/

Authoritative Bias of Maps: While not strictly a Maps API post, it is my first lesson of the year with a lot of maps fun. https://geteach.com/blog/2018/08/01/authoritative-bias-of-maps/

Old Side Projects | Archive

Round Rock ISD mini-geteach (Class Project 2016): https://geteach.com/westwood/rrisd/RRISD.html

Sense of Place Westwood High School (Class Project 2016, before Tour Creator:) click icons on map https://geteach.com/westwood/westwoodplace/

Regional Issues Project 2015 (Click red markers on Map): https://geteach.com/share/casestudy/2015.html

Homage to Maps Engine/Maps Gallery: Many people don’t remember that Google had an amazing curated library of datasets that could be imported into geteach.com or opened within the gallery. That is before Google Deprecated the cool stuff. Some of the technology is still used with My Maps and I think Google Earth’s content creation. Those asset/map IDs look familiar;).

It was such a great lesson on level of aggregation/scale

Google Earth Engine

Earth Engine took awhile to grow on me. Mainly because I kept having to recreate so much with the combination of deprecating and new technologies. That, and I have a day job teaching high school. However, over the past year I’ve taken a couple of weekends to create a few projects.

Blog Posts

First(ish) Google Earth Engine Attempt: Reflection of my first true Earth Engine App visualizing 60 years of climate data. https://geteach.com/blog/2019/06/30/firstish-google-earth-engine-attempt/

Side Projects

Currently, I am putting all my Earth Engine Experiments (3 for now) here if people would like to use them in the classroom. https://geteach.com/engine/


So there you go Jeff, A decade of projects using Google Geo Tools. Thanks for the suggestion!