Friday, May 01, 2020

eGEW-GeoTrips: Enhanced GoogleEarthWeb virtual fieldtrips with image, video, hotlinks and voice

In support of this spring and summer's new normal where field trips have become virtual and toward course-based geology explorations, we developed an enhanced Google Earth Web environment, using my Maryland Appalachians fieldtrip as an example.
Here is a 10min presentation on enhancedGEW that describes GeoTrips and GeoExplorations.  The latter adds globe overlay functionality: http://resilience.earth.lsa.umich.edu/eGEW/eGEW.mp4
Whereas based on it, this not standard Google Earth Web, as that only allows limited images and text add-on to the navigation environment, nor is eGEW a local resource intensive Google Earth desktop application.  Instead, eGEW-GeoTrips runs from the web on any desktop, tablet or phone using your browser.  It offers greatly enhanced GEW functionality, with files loaded from the web (public html server) as needed, so no local files or programs are necessary.


Click on <Present> to start.

The brains of the project is Josh Williams (@geteach), who wrote GEW templates that replace the default GEW that Google supplies.  eGEW allows images, video, StreetView, GigaPan, hotlinks and voice narration in a single Info Panel of FullScreen and NewFeature, while retaining the cool navigation of Google Earth (including StreetView).

Replace the example links to public webserver-based image, video and voice files, and don't otherwise touch the html code.  Copy and paste in GEW, and voila...

eGEW-GeoTrips: New Feature/Add Placemark and FullScreen Templates 

Codes by Josh Williams (@geteach) 
Applications by Ben van der Pluijm (@vdpluijm) 

New Feature - Instructions 

Change highlighted parts with links to your own pics, video, audio and text (where code is highlighted only). Copy and paste (no formatting) in the New Feature text box after “Switch to HTML” under More Actions (overwrite anyhting in the box). Select "Large Info Box" option.  Instructions to replace the Full Screen panel with added functionality are slightly different (also below).

Rename the CarouselVideoAudioTemplate.html file for each New Feature (for example "Stop2-4-folds.html") and make changes with a text editor (like Notebook). Save as .html file in text editor (not Word formatted .docx file) 

Note: You will find the original templates and explanations by Josh Williams on GitHub: https://github.com/geteach/geteachGeology.  The file below is slightly modified.

----------------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geTeach: Image-Video Carousel with Audio and Description</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/scripts/newearth/geteachStyle1227.css" type="text/css" />
        <script>
 // video functions play/pause video with changing icons. Select time by adding tag#t=x,y in seconds          
            function playPauseVideo(clicked_id) {
                var playButton = document.getElementsByClassName("playoverlay");
                var mediaIcon = document.getElementsByClassName("mediaIcon");
                var video = document.getElementById(clicked_id);
                if (video.paused){
                    for(i = 0; i < playButton.length; i++) {
                        playButton[i].style.display = 'none';
                    }
                    for(i = 0; i < mediaIcon.length; i++) {
                        mediaIcon[i].style.display = 'block';
                    }
                    video.play();
                } else {
                    for(i = 0; i < playButton.length; i++) {
                        playButton[i].style.display = 'block';
                    }
                    for(i = 0; i < mediaIcon.length; i++) {
                        mediaIcon[i].style.display = 'none';
                    }
                    video.pause();
                }
                video.onended = function() {
                    for(i = 0; i < playButton.length; i++) {
                        playButton[i].style.display = 'block';
                    }
                    for(i = 0; i < mediaIcon.length; i++) {
                        mediaIcon[i].style.display = 'none';
                    }
                    video.load();
                };
                document.querySelectorAll('.prev').forEach(item => {
                    item.addEventListener('click', event => {
                        for(i = 0; i < playButton.length; i++) {
                        playButton[i].style.display = 'block';
                    }
                    for(i = 0; i < mediaIcon.length; i++) {
                        mediaIcon[i].style.display = 'none';
                    }
                        video.load();
                    })
                })
                document.querySelectorAll('.next').forEach(item => {
                    item.addEventListener('click', event => {
                        for(i = 0; i < playButton.length; i++) {
                        playButton[i].style.display = 'block';
                    }
                    for(i = 0; i < mediaIcon.length; i++) {
                        mediaIcon[i].style.display = 'none';
                    }
                        video.load();
                    })
                })               
               
            };
 // audio script    
            function playPause() {                     
                var audio = document.getElementById("audioI")
                if (document.getElementById('playIcon').innerHTML  != '<i class="material-icons">play_arrow</i>'){
                    document.getElementById('playIcon').innerHTML = '<i class="material-icons">play_arrow</i>';
                    document.getElementById('playButton').innerHTML = 'Play';
                    audio.pause();
                } else {
                    document.getElementById('playIcon').innerHTML = '<i class="material-icons">pause</i>';
                    document.getElementById('playButton').innerHTML = 'Pause';
                    audio.play();
                }
                audio.onended = function() {
                    document.getElementById('playIcon').innerHTML = '<i class="material-icons">play_arrow</i>';
                    document.getElementById('playButton').innerHTML = 'Play';
                    audio.pause();
                };
            };
        </script>
    </head>
    <body>
        <div id="container">
            <main class="panelMain">
                <div class="mediaContain">
                    <div class="slideshow-container">

<!-- optional StreetView 
                        <div class="mySlides fade">
                        <iframe src="https://www.google.com/maps/embed?pb=!4v1588596709047!6m8!1m7!1sF6o0htzYKMvqmesQGEaD5A!2m2!1d39.67739783298934!2d-78.46155273982326!3f12.281321179618544!4f6.06123377318832!5f0.4142283749962638" style="width:100%;height:100%" frameborder="0">
                            </iframe>
                        </div>
-->
                                                                                
                        <div class="mySlides fade">
                            <img class="image" src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/2010ABRockies.JPG" />
                            <div class="captionDiv">
                                <div class="caption">Caption here. Source: <a href="https://psgt.earth.lsa.umich.edu/" target="_blank">PSGT</a></div>
                            </div>
                        </div>

<!-- Additional images
                        <div class="mySlides fade">
                            <img class="image" src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/20170408_091741.jpg" />
                            <div class="captionDiv">
                                <div class="caption">Caption here. Source: <a href="https://psgt.earth.lsa.umich.edu/" target="_blank">PSGT</a></div>
                            </div>
                        </div>
                 
                        <div class="mySlides fade">
                            <img class="image" src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/2-1.jpg" />
                            <div class="captionDiv">
                                <div class="caption">Caption here. Source: <a href="https://www.usgs.gov/products/maps/geologic-maps" target="_blank">USGS</a></div>
                            </div>
                        </div>
-->
   
                        <div class="mySlides fade">
                            <a href="#" name="video1" onclick="playPauseVideo(this.name)" >
                                <video class="videoMedia" id="video1" style="left: 50%;position: absolute;top: calc(50% - 10px);transform: translate(-50%, -50%);" width="480" height="270" poster="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.jpg">
                                    <source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.mp4" type="video/mp4">
                                        Your browser does not support the video tag.
                                </video>
                                <div class="playoverlay" style="display:block;"></div>
                                <span class="mediaIcon mdl-button mdl-button--icon mdl-js-button" id="mediaIcon" style="display:none;color:#DADCE0;left:3px;top:10px">
                                    <i class="material-icons">pause</i>
                                </span>
                            </a>
                            <div class="captionDiv">
                                <div class="caption" >Caption here.</div>
                            </div>
                        </div>                       

<!--Second video
                        <div class="mySlides fade">    
                            <a href="#" name="video2" onclick="playPauseVideo(this.name)" >                      
                                <video class="videoMedia" id="video2" style="left: 50%;position: absolute;top: calc(50% - 10px);transform: translate(-50%, -50%);" width="480" height="270" poster="https://storage.googleapis.com/geteachkml4/npr/chapter2Poster.jpg">
                                    <source src="https://storage.googleapis.com/geteachkml4/npr/machine.mp4" type="video/mp4">
                                        Your browser does not support the video tag.
                                </video>
                                <div class="playoverlay" style="display:block;"></div>
                                <span class="mediaIcon mdl-button mdl-button--icon mdl-js-button" id="mediaIcon" style="display:none;color:#DADCE0;left:3px;top:10px">
                                    <i class="material-icons">pause</i>
                                </span>
                            </a>
                            <div class="captionDiv">
                                <div class="caption" >Caption here.</div>
                            </div>
                        </div>
-->

                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>
                    </div>
                </div>
                <div class="content">
                    <div class="title">
                         Title: eGEW-GeoTrip
                    </div>
                    <audio id="audioI" style="display:none" >
                        <source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/voice.m4a" type="audio/mpeg">
                            Your browser does not support the audio tag.
                    </audio>
                    <span onclick="playPause()" class="mdl-chip mdl-chip--contact" 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>
                    <div class="description">
                        <p class="text">In this info panel there are one or more images and videos in the carousel.</p>
                        <p class="text">In addition, there are captions, title and an audio button for voice narrative.</p>
                        <p><img src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/MDlegendText.jpgwidth="400"/></p>
                    </div>
                </div>

<!--Optional footer
                <div class="footer">
                    <div class="logoLeft">
                        <a href="https://psgt.earth.lsa.umich.edu" target="_blank">
                            <img src="https://psgt.earth.lsa.umich.edu/image001.png" height="40" > geTeach/PSG&T (2020)
                        </a>
                    </div>
                    <div class="logoRight" style="display:none">
                    </div>
                </div>
-->

            </main>
        </div>
        <script>
// carousel script           
            var slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            function currentSlide(n) {
                showSlides(slideIndex = n);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                slides[slideIndex-1].style.display = "block";
            }
        </script>
    </body>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</html>
---------------------------------

Full Screen - Instructions 

Change highlighted parts with links to your own pics, video, audio and text (where highlighted only). Copy and paste (no formatting) in the New Feature text box after “Switch to HTML” under More Actions (empty the box) and use "Large Info Panel". 

Rename the FullScreenTemplate.html file for each Full Screen (for example stop Geology.html) and make changes in text editor (like Notebook). Save as .html file in a text editor (not Word formatted .docx file) 

Note: You will find the original templates and explanations by Josh Williams on GitHub: https://github.com/geteach/geteachGeology.  The file below is slightly modified.

---------------------------
<!doctype html>
<html lang="en-US">
                <head>
                                <meta charset="UTF-8" />
                                <title>geTeach: Full Screen with Image-Video Carousel, Audio and Description</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/geology.css" type="text/css" />
        <script>
            //video functions play/pause video along with changing icons          
                       function playPauseVideo(clicked_id) {
                           var playButton = document.getElementsByClassName("playoverlay");
                           var mediaIcon = document.getElementsByClassName("mediaIcon");
                           var video = document.getElementById(clicked_id);
                           if (video.paused){
                               for(i = 0; i < playButton.length; i++) {
                                   playButton[i].style.display = 'none';
                               }
                               for(i = 0; i < mediaIcon.length; i++) {
                                   mediaIcon[i].style.display = 'block';
                               }
                               video.play();
                           } else {
                               for(i = 0; i < playButton.length; i++) {
                                   playButton[i].style.display = 'block';
                               }
                               for(i = 0; i < mediaIcon.length; i++) {
                                   mediaIcon[i].style.display = 'none';
                               }
                               video.pause();
                           }
                           video.onended = function() {
                               for(i = 0; i < playButton.length; i++) {
                                   playButton[i].style.display = 'block';
                               }
                               for(i = 0; i < mediaIcon.length; i++) {
                                   mediaIcon[i].style.display = 'none';
                               }
                               video.load();
                           };
                           document.querySelectorAll('.prev').forEach(item => {
                               item.addEventListener('click', event => {
                                   for(i = 0; i < playButton.length; i++) {
                                   playButton[i].style.display = 'block';
                               }
                               for(i = 0; i < mediaIcon.length; i++) {
                                   mediaIcon[i].style.display = 'none';
                               }
                                   video.load();
                               })
                           })
                           document.querySelectorAll('.next').forEach(item => {
                               item.addEventListener('click', event => {
                                   for(i = 0; i < playButton.length; i++) {
                                   playButton[i].style.display = 'block';
                               }
                               for(i = 0; i < mediaIcon.length; i++) {
                                   mediaIcon[i].style.display = 'none';
                               }
                                   video.load();
                               })
                           })               
                          
                       };
            //audio script    
                       function playPause() {                     
                           var audio = document.getElementById("audioI")
                           if (document.getElementById('playIcon').innerHTML  != '<i class="material-icons">play_arrow</i>'){
                               document.getElementById('playIcon').innerHTML = '<i class="material-icons">play_arrow</i>';
                               document.getElementById('playButton').innerHTML = 'Play';
                               audio.pause();
                           } else {
                               document.getElementById('playIcon').innerHTML = '<i class="material-icons">pause</i>';
                               document.getElementById('playButton').innerHTML = 'Pause';
                               audio.play();
                           }
                           audio.onended = function() {
                               document.getElementById('playIcon').innerHTML = '<i class="material-icons">play_arrow</i>';
                               document.getElementById('playButton').innerHTML = 'Play';
                               audio.pause();
                           };
                       };
                   </script>
                </head>
                <body>
                                <div class="titleContain">
            <main class="fullScreenmain" style="background-image:url('https://psgt.earth.lsa.umich.edu/MDfieldtrip/mdgeogr.jpg')">
                           <div class="containerFullScreen" id="FullScreen">
                                <div class="scrollup" id="scrollHeader">
                                    <div class="title" style="font-size: 26px;font-weight: 500;float:left;">MD Fieldtrip</div>
                                    <div class="title" style="font-size: 26px;font-weight: 500;float:right;color:#DADCE0;"><span class="material-icons">
                                        expand_less
                                        </span></div>
                                </div>
                               <main class="panelMain">
                                   <div class="mediaContain">
                                       <div class="slideshow-container">
                                      
                                           <div class="mySlides fade">
                                               <img class="image"src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/mdgeogr.gif">
                                               <div class="captionDiv">
                                                   <div class="caption" >Geology of Maryland</div>
                                               </div>
                                           </div>
                                         
                                           <div class="mySlides fade">
                                               <a href="#" name="video1" onclick="playPauseVideo(this.name)" >
                                                   <video class="videoMedia" id="video1" style="left: 50%;position: absolute;top: calc(50% - 10px);transform: translate(-50%, -50%);" width="480" height="270" poster="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.jpg">
                                                       <source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/maryland.mp4" type="video/mp4">
                                                           Your browser does not support the video tag.
                                                   </video>
                                                   <div class="playoverlay" style="display:block;"></div>
                                                   <span class="mediaIcon mdl-button mdl-button--icon mdl-js-button" id="mediaIcon" style="display:none;color:#DADCE0;left:3px;top:10px">
                                                       <i class="material-icons">pause</i>
                                                   </span>
                                               </a>
                                               <div class="captionDiv">
                                                   <div class="caption" >Maryland USA</div>
                                               </div>
                                           </div>             
                                                             
                                           <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                                           <a class="next" onclick="plusSlides(1)">&#10095;</a>
                                       </div>
                                   </div>
                                   <div class="content">
                                       <div class="title">
                                            Geology of Maryland
                                       </div>
                                       <audio id="audioI" style="display:none" >
                                           <source src="https://psgt.earth.lsa.umich.edu/MDfieldtrip/voice.m4a" type="audio/mpeg">
                                               Your browser does not support the audio tag.
                                       </audio>
                                       <span onclick="playPause()" class="mdl-chip mdl-chip--contact" 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>
                                       <div class="description">
                                           <p class="text">Maryland is part of six distinct physiographic provinces: (1) the Atlantic Continental Shelf Province, (2) the Coastal Plain Province, (3) the Piedmont Plateau Province, (4) the Blue Ridge Province, (5) the Ridge and Valley Province, and (6) the Appalachian Plateaus Provinces. These extend in belts of varying width along the eastern edge of the North American continent from Newfoundland to the Gulf of Mexico.</p>
                                           <p class="text">From <a href="http://www.mgs.md.gov/geology/geologic_map/md_geologic_map.html" target="_blank">Maryland Geological Survey</a>   </p>                                
                                         </div>
                                   </div>

<!-- Optional footer
                                   <div class="footer">
                                    <div class="logoLeft">
                                        <a href="https://psgt.earth.lsa.umich.edu/" target="_blank">
                                            <img src="https://psgt.earth.lsa.umich.edu/image001.png" height="40" > geTeach/PSG&T (2020)
                                        </a>
                                    </div>
                                    <div class="logoRight" style="display:none">
                                    </div>
-->

                                </div>
                               </main>
                           </div>
                                                </main>
        </div>
        <script>
            //simple carousel script           
                        var slideIndex = 1;
                        showSlides(slideIndex);
           
                        function plusSlides(n) {
                            showSlides(slideIndex += n);
                        }
           
                        function currentSlide(n) {
                            showSlides(slideIndex = n);
                        }
           
                        function showSlides(n) {
                            var i;
                            var slides = document.getElementsByClassName("mySlides");
                            if (n > slides.length) {slideIndex = 1}
                            if (n < 1) {slideIndex = slides.length}
                            for (i = 0; i < slides.length; i++) {
                                slides[i].style.display = "none";
                            }
                            slides[slideIndex-1].style.display = "block";
                        }
            window.addEventListener("orientationchange", function() { 
                var box2 = document.getElementById('FullScreen');
                var top2 = box2.offsetTop
                var scrollHead = document.getElementById('scrollHeader');
                if(top2 < 600){
                    box2.style.top = 'calc(100% - 8em)';
                    scrollHead.style.display = "block";
                }else{
                    box2.style.top = '0';
                    scrollHead.style.display = "none"
                }
            })
            window.onload =  function() {
                var box = document.getElementById('FullScreen');
                var top = box.offsetTop
                var scrollHead = document.getElementById('scrollHeader');
                if(top > 600){
                    scrollHead.style.display = "block";
                }else{
                    scrollHead.style.display = "none"
                }
            }      
         </script>
                </body>
                <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

</html>
--------------------

1 comment:

Moha said...

This is great. Thanks for sharing.
We've just finished our MSc virtual field trip to the Pyrenees. It would have been nice to compile all the digital material that we built in Google Earth. Hopefully, we won't have to do it remotely next year, but if could be useful for people with limited mobility that can't do go to the field.

Moh.