Google Earth API Javascript Tour animation

0
votes

I'm trying to implement Google Earth API tour in javascript. I tried parsekml method, but i couldn't make any tour. I have one question... Does javascript with Google Earth API support tour? I don't want use fetchkml or import from any other link. Here I have enclosed my sample code. Any help...?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Google Earth-Practice</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <style type="text/css">@import "static/examples.css";</style>
  <style type="text/css">@import "static/prettify/prettify.css";</style>
  <script type="text/javascript" src="static/prettify/prettify.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
  <script type="text/javascript">
  /* <![CDATA[ */
  var ge;
var i=1;;
var l=1;
var Excel;
var value;
  google.load("earth", "1");

  function init() {

    google.earth.createInstance('map3d', initCB, failureCB);
  }

  function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);


    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

    // add some layers
   // ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
   // ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

    document.getElementById('installed-plugin-version').innerHTML =ge.getPluginVersion().toString();
  }

  function failureCB(errorCode) {
  }



function my_function()
{

return Excel.Workbooks.Open("C:/TEST.xls").ActiveSheet.Cells(l,i).Value;
}





//where l is number of rows and i are columns...
 function DrawVector()
 {

//where l is number of rows and i are columns...
//var i=1;
//var l=1;
var z=1;
var line=[];
document.getElementById('loadingImage').style.visibility='visible'; 
document.getElementById('Fly').style.visibility='visible'

Excel = new ActiveXObject("Excel.Application");
Excel.Visible = false;

do
{
    a=my_function()

    if (a!=null)
    {
    //var t=prompt("hello");
        line[z]=a;
    z++;
        i++;
    }
    else
    {
        l++;
        i=1;

        //document.write("<br />");
    }

    b = my_function()
}while(a!=null || b!=null);


    var lineStringPlacemark = ge.createPlacemark('');
    var lineString = ge.createLineString('');
    lineStringPlacemark.setGeometry(lineString);
    lineString.setExtrude(true);

    lineString.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);

// Add LineString points


for(i=1;i<z;i=i+4)
{
var placemark = ge.createPlacemark('');

var icon = ge.createIcon('');
icon.setHref('https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png');
var style = ge.createStyle(''); //create a new style
style.getIconStyle().setIcon(icon);
style.getIconStyle().setScale(3.0); //apply the icon to the style
//style.getColor().set('ffffffff');
placemark.setStyleSelector(style); //apply the style to the placemark
// Set the placemark's location.  

var point = ge.createPoint('');
point.setLatitude(line[i+1]);
point.setLongitude(line[i+2]);
point.setAltitude(line[i+3]);
point.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
placemark.setGeometry(point);

placemark.setName(line[i]);

// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
    lineString.getCoordinates().pushLatLngAlt(line[i+1],line[i+2],line[i+3]);

}// lineString.getCoordinates().pushLatLngAlt(38.885278,-77.701944,1900);
//  lineString.getCoordinates().pushLatLngAlt(38.769167,-77.901944,2700);


// Create a style and set width and color of line
    lineStringPlacemark.setStyleSelector(ge.createStyle(''));
    var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
    lineStyle.setWidth(4);
     var polyColor = lineStringPlacemark.getStyleSelector().getPolyStyle().getColor(); 
    //polyColor.set('ffffffff');
        polyColor.setA(127);
    polyColor.setB(0); 
    polyColor.setG(255);
    polyColor.setR(0);





    //lineStyle.polystyle.color = '990000ff';
    lineStyle.getColor().set('ffffffff');  // aabbggrr format
    //polystyle color = 66FFF700;
    //lineString.getPolyStyle(polystyle);// Add the feature to Earth
    ge.getFeatures().appendChild(lineStringPlacemark);





document.getElementById('loadingImage').style.visibility='hidden';




 }


  function showSun() {
    ge.getSun().setVisibility(true);
    ge.getTime().getControl().setVisibility(ge.VISIBILITY_SHOW);



  }

 function KmlView()
 {  DrawVector();
    var name='start';
    var kmlString = ''
              + '<?xml version="1.0" encoding="UTF-8"?>'
+ '<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">'
+ '  <Document>'
+'<Camera> <altitudeMode>relativeToGround</altitudeMode>'
              + '    <longitude>-77.451111</longitude>'
              + '    <latitude>38.935278</latitude>'
              + '    <altitude>10000 </altitude>'
              + '    <heading>-105.948935</heading>'
              + '    <tilt>93</tilt>'
          + '<range>50</range>'
              + '  </Camera>'
+ '    <open>1</open>  '
+ '    <gx:Tour>     '
+ '      <name>Play me</name>     '
+ '      <gx:Playlist>   '
+ '        <gx:FlyTo>     '
+ '          <gx:duration>2.0</gx:duration>   '
+ '          <gx:flyToMode>bounce</gx:flyToMode>      '
+ '          <LookAt>    '
+ '            <longitude>-77.451111</longitude>  '   
+ '            <latitude>   38.935278</latitude> '        
+ '            <altitude>900</altitude>        '
+ '            <heading>-123.948935</heading>         '
+ '            <tilt>63.0957450</tilt>        '
+ '            <range>469.850414</range>        '
+ '            <gx:altitudeMode>relativeToGround </gx:altitudeMode>      '
+ '          </LookAt>   '
+ '        </gx:FlyTo>  '
+ '        <gx:AnimatedUpdate>    '
+ '          <gx:duration>0.0</gx:duration> '
+ '          <Update>  '
+ '            <targetHref/>    '
+ '            <Change>   '
+ '              <Placemark targetId="Fly1">    '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>      '
+ '              </Placemark>  '
+ '            </Change>    '
+ '          </Update>     '
+ '        </gx:AnimatedUpdate>    '
+ '        <gx:AnimatedUpdate>     '
+ '          <gx:duration>0.0</gx:duration>    '
+ '          <Update>       '
+ '            <targetHref/>    '
+ '            <Change>            '
+ '              <Placemark targetId="Fly1">'
+ '                <gx:balloonVisibility>0</gx:balloonVisibility>     '
+ '              </Placemark>        '
+ '            </Change>     '
+ '          </Update>       '
+ '        </gx:AnimatedUpdate>  '
+ '        <gx:FlyTo>       '
+ '          <gx:duration>20</gx:duration>       '
+ '          <gx:flyToMode>smooth</gx:flyToMode>  '
+ '          <LookAt>     '
+ '            <longitude>-77.701944</longitude>   '
+ '            <latitude>38.885278</latitude>  '
+ '            <altitude>1900</altitude>       '
+ '         <heading>-123.948935</heading>  '
+ '            <tilt>63.117317</tilt>        '
+ '            <range>792.665540</range>    '
+ '            <gx:altitudeMode>relativeToGround</gx:altitudeMode>       '
+ '          </LookAt>      '
+ '        </gx:FlyTo>         '
+ '        <gx:AnimatedUpdate> '
+ '          <gx:duration>0.0</gx:duration>  '
+ '          <Update>       '
+ '            <targetHref/>    '
+ '            <Change>         '
+ '              <Placemark targetId="Fly2">      '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>      '
+ '              </Placemark>          '
+ '            </Change>     '
+ '          </Update>        '
+ '        </gx:AnimatedUpdate> '
+ '          <gx:AnimatedUpdate>  '
+ '          <gx:duration>0.0</gx:duration>        '
+ '          <Update>     '
+ '            <targetHref/>       '
+ '            <Change>        '
+ '              <Placemark targetId="Fly2">     '
+ '                <gx:balloonVisibility>0</gx:balloonVisibility>  '
+ '              </Placemark>          '
+ '            </Change>       '
+ '          </Update>    '
+ '        </gx:AnimatedUpdate>    '
+ '        <gx:FlyTo>       '
+ '          <gx:duration>30</gx:duration>'
+ '          <gx:flyToMode>smooth</gx:flyToMode>     '
+ '          <LookAt>         '
+ '            <longitude>-77.901944</longitude>    '
+ '            <latitude>38.769167</latitude>     '
+ '            <altitude>2700</altitude>     '
+ '            <heading>-123.948935</heading> '
+ '            <tilt>63.063392</tilt>         '
+ '            <range>633.666023</range>     '
+ '            <altitudeMode>relativeToGround</altitudeMode>   '
+ '          </LookAt>   '
+ '        </gx:FlyTo>   '
+ '        <gx:AnimatedUpdate>      '
+ '          <gx:duration>0.0</gx:duration> '
+ '          <Update>     '
+ '            <targetHref/>  '
+ '            <Change>         '
+ '              <Placemark targetId="onland">       '
+ '                <gx:balloonVisibility>1</gx:balloonVisibility>  '
+ '              </Placemark>      '
+ '            </Change>       '
+ '          </Update>   '
+ '        </gx:AnimatedUpdate>    '
+ '   </gx:Playlist>     '
+ '    </gx:Tour>  '
+ '    <Placemark id="Fly1">   '
+ '      <name>   </name>    '
+ '      <description>    '
+ '           KIAD  Starting point...         </description>     '
+ '      <Point>      '
+ '        <gx:altitudeMode>relativeToGround</gx:altitudeMode>    '
+ '      </Point>   '
+ '    </Placemark>  '
+ '    <Placemark id="Fly2">     '
+ '      <name></name>  '
+ '      <description>We reached LOULU...</description> '
+ '      <Point>       '
+ '        <gx:altitudeMode>relativeToGround</gx:altitudeMode>   '
+ '      </Point> '
+ '    </Placemark> '
+ '     <Placemark id="onland">     '
+ '       <name></name>   '
+ '       <description>     '
+ '         <![CDATA[ RNDLI.   '
+ '       You<gx:balloonVisibility>1</gx:balloonVisibility>  '
+ '        Reached your destination]]>   '
+ '       </description>     '
+ '       <Point>      '
+ '       </Point>     '
+ '     </Placemark>  '
+ '        <ScreenOverlay>'
+ '     <name>Absolute Positioning: Top left</name>'
+ '     <visibility>1</visibility>'
+ '     <Icon>'
+ '       <href>https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Target.png</href>'
+ '     </Icon>'
+ '     <overlayXY x="0.5" y=".5" xunits="fraction" yunits="fraction"/>'
+ '     <screenXY x="0.5" y=".5" xunits="fraction" yunits="fraction"/>'
+ '     <rotation>2.37878630116985</rotation>'
+ '     <size x=".1" y=".1" xunits="fraction" yunits="fraction"/>'
+ '   </ScreenOverlay>'
+ '       </Document>'
+ ' </kml>';
    var kmlObject = ge.parseKml(kmlString);
    ge.getFeatures().appendChild(kmlObject);
     ge.getView().setAbstractView(kmlObject.getAbstractView());
//ge.getTourPlayer().setTour(kmlObject);
  // ge.getTourPlayer().play();


   }



  function hideSun() {
    ge.getSun().setVisibility(false);

  }

  /* ]]> */
  </script>
</head>
<body onload="if(window.prettyPrint)prettyPrint();init();" bgcolor=#87CEEB>
  <h1>Google Earth -Practice</h1>
  <dl>

  </dl>
  <div style="clear: both;"></div>

  <div id="ui" style="position: relative;">
    <div id="map3d_container" style="border: 1px solid #000; width: 800px; height: 800px;">
      <div id="map3d" style="height: 100%;"></div>
    </div>

    <div id="extra-ui" style="position: absolute; left: 820px; top: 0;">
      Starting Point:<input type="text" name="fname">&nbsp;&nbsp;
  Destination Point: <input type="text" name="lname"><br><br/><br/>
  <center><input type="button"  onclick="KmlView()" value="Start"/><br/><br/></center><br/><br/>
    <form id="Fly" style="visibility:hidden">

 <input type="button" onclick="showSun()" value="Show Sun"/><br/><br/><br/>
      <input type="button" onclick="hideSun()" value="Hide Sun"/><br/><br/><br/>
      <img id="loadingImage" src="C:\Users\h118093\Downloads\Load2.gif" height="50%" width="50%" style="visibility:hidden" alt="Ready To Fly...."/>

</form>

    </div>
  </div>

</body>
</html>

How to make tour on Google Earth using javascript without fetchkml?

1
google-earth

1 Answers

0
votes

According to Google's Earth API site, Touring is supported via the javascript API to just play tours already encoded in the KML. Google's Touring API web-page: https://developers.google.com/earth/documentation/touring

Google's documentation on the above web-page link contains examples how to invoke a tour in a KML. The code you supplied above just loads the KML into the Google Earth plugin. Your code does not invoke the tour.

Your next step is to invoke the tour properly via the ge.getTourPlayer().setTour(object) and ge.getTourPlayer().play() methods shown on that page. You should be able to utilize the "Simple Tour" example shown on Google's touring documentation web page.

I tried out your code, and got it to play the tour when coded properly according to the info on Google's touring web page. However, your kmlString has some errors in it too. You don't have closing /Document and /kml tags. And to get the "Simple Tour" to work you actually need to remove the Document tag entirely.

[FYI ... you do know this API is going to be turned off by Google on 12/12/2015? You will need to begin looking for a tour alternative if you plan to utilize it past the end of this year.]

Edited answer to add code changes:

var kmlString = ''
+ '<?xml version="1.0" encoding="UTF-8"?>'
+ '<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">'
//+ '  <Document>'  //<---------delete this line
:
: <clipped>
:
+ '    </gx:Tour>'
+ '</kml>'; //<---------add this line

kmlObject = ge.parseKml(kmlString);
ge.getFeatures().appendChild(kmlObject);
//ge.getView().setAbstractView(kmlObject.getAbstractView());    //<---------delete this line unless you need it for other purposes
ge.getTourPlayer().setTour(kmlObject);              //<---------add these two lines
ge.getTourPlayer().play();