Driving Simulator

[ihab...@googlemail.com]

Hello,

I need a help in order to make Driving Simulator follow a specific
path stored in KML file.
would you please let me know the places where i have to make
modification to the code.
my experience with java script are limited

Thanks

[Roman N]

Ihab,

This would require significant changes to the simulator, outside the
scope of what it was originally intended for. You could use the
DDSimulator class I wrote (simulator.js :
http://code.google.com/p/earth-api-samples/source/browse/trunk/demos/drive-simulator/simulator.js)
as a starting point. DDSimulator allows you to pass in an array of
path vertices. Check out the comments in the simulator.js for more
details.

If you're thinking of undertaking this task, I'd recommend first
getting a good working knowledge of JavaScript. You can start with
some of these resources:
- http://code.google.com/edu/submissions/uwspr2007_webprogramming/listing.html
(see the JavaScript-related links)
- http://www.w3schools.com/JS/default.asp

Let me know if there's any other way I can help.

- Roman

[Tone82]

Hi,
also I need help for the same project, drive follow a path stored in
KML file.

Also my experience with java script are very limited.

Are there anyone that can help us?

Thanks very much,
Matteo.

[ihab...@googlemail.com]

Thanks,

the thing that i should figure it out, is how to parse the kml file
and store it in an array of points. then
passing these points to the simulator.js .... is this right?

i have experience with php ... so if what i need to do what is above
do you think it will be possible using php

Thanks

Ihab

[Roman N]

Ihab,

Well, the Earth API lets you parse KML with fetchKml(). Say your KML
file (test.kml) is this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<LineString>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>
0,0,0
1,0,0
2,0,0
3,0,0
</coordinates>
</LineString>
</Placemark>
</kml>

You could use the following to create the necessary path array (this
code requires the GE helpers file from
http://earth-api-samples.googlecode.com/svn/trunk/lib/geplugin-helpers.js
and that the Maps API be loaded):

google.earth.fetchKml(ge, 'http://path/to/test.kml',
function(kmlObject) {
// create the array of GLatLng coordinates
var coordsKmlObj = kmlObject.getGeometry().getCoordinates();
var coordsArray = [];
var n = coordsKmlObj.getLength();
for (var i = 0; i < n; i++) {
var coord = coordsKmlObj.get(i);
coordsArray.push(new google.maps.LatLng(coord.getLatitude(),
coord.getLongitude()));
}

// drive speed (in meters per second)
var speed = 10;

// create the path
var geHelpers = new GEHelpers(ge);
var path = [];
for (var i = 0; i < n; i++) {
if (i == coordsArray.length - 1) {
// last coordinate
path.push({
loc: coordsArray[i],
step: 0,
distance: 0,
duration: 0
});
} else {
var distance = geHelpers.distance(coordsArray[i], coordsArray[i
+ 1]);
path.push({
loc: coordsArray[i],
step: 0,
distance: distance,
duration: distance / speed
});
}
}

// now you can use path to create a DDSimulator...
var simulator = new DDSimulator(ge, path);
...
});

Hope that helps,
- Roman

[ihab...@googlemail.com]

Hello Roman,

This link shows my attempt to make the simulator run for my Kml file.

http://131.173.78.184/ihab/Ihab.php

below is the link for the Simulator.js file as i tried to create it...
i fetch the kml file inside it

http://131.173.78.184/ihab/Simulator.js

all what i need that the user can click start then the camera can
follow the path that appear in the earth.

Unfortunately it still not working

Looking for your help and directions.

Thanks

Ihab

On Aug 23, 12:39 am, Roman N wrote:
> Ihab,
>
> Well, the Earth API lets you parse KML with fetchKml(). Say your KML
> file (test.kml) is this:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Placemark>
> <LineString>
> <altitudeMode>clampToGround</altitudeMode>
> <coordinates>
> 0,0,0
> 1,0,0
> 2,0,0
> 3,0,0
> </coordinates>
> </LineString>
> </Placemark>
> </kml>
>
> You could use the following to create the necessary path array (this

> code requires the GE helpers file fromhttp://earth-api-samples.googlecode.com/svn/trunk/lib/geplugin-helper...

[Roman N]

Ihab,

For starters, you'll want to keep the simulator.js file completely
separate; it should be included before the JavaScript that uses it is
run. You can then create a new DDSimulator object as I've shown here
(and before):

<script type="text/javascript" src="simulator.js"></script>
<script type="text/javascript">
var ge;
var simulator;
...
// start by creating an earth instance
google.earth.createInstance(function(obj) {
ge = obj;
...
// load the route and create the simulator
google.earth.fetchKml(ge, 'http://path/to/route.kml',
function(kmlObject) {
// use the coordsKmlObj, coordsArray, and path generating
code I provided before
...
// create the simulator

simulator = new DDSimulator(ge, path);

});
});
</script>

I really recommend picking up some more JavaScript before continuing
though; the links I provided for you in a previous post should be a
good starting point.

- Roman

[ihab...@googlemail.com]

Thanks Roman,

So i should organize the files as follows?
simulator.js should be a separte file and include the same code as it
published in the web.
the php file that i use it to access the simulator will include the
simulator.js

Where i should put the code that fetch the kml file...

i start to learn java script and i will work intensevely from tommorw.
but i hope to make progress in the driving simulator as soon as
possible since i need it

Thanks

Ihab

> > > > Ihab- Hide quoted text -
>
> - Show quoted text -

[Tone82]

Here my test, that doesn't work :(

<html>
<head>
<title>Google Driving Example</title>
<!-- *** Replace the key below below with your own API key,
available at http://code.google.com/apis/maps/signup.html *** -->
<script type="text/javascript" src="http://www.google.com/jsapi?
key=abcdefg"></script>
<script type="text/javascript" src="geplugin-helpers.js"></script>
<script type="text/javascript" src="math3d.js"></script>

<script type="text/javascript" src="simulator.js"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.load("maps", "2.x");
google.load("earth", "1");

var Ds_ge = null;
var Ds_geocoder;

function Ds_init() {
Ds_geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", Ds_initCB, Ds_failureCB);
}

function Ds_initCB(object) {

Ds_ge = object;

var url = 'http://path/tmp.kml';
google.earth.fetchKml(Ds_ge, url, function(kmlObject) {

Ds_ge.getFeatures().appendChild(kmlObject);

// create the array of GLatLng coordinates
var coordsKmlObj = kmlObject.getGeometry().getCoordinates();
var coordsArray = [];
var n = coordsKmlObj.getLength();
for (var i = 0; i < n; i++) {
var coord = coordsKmlObj.get(i);
coordsArray.push(new google.maps.LatLng(coord.getLatitude(),
coord.getLongitude()));
}

// drive speed (in meters per second)
var speed = 10;

// create the path

var Ds_geHelpers = new GEHelpers(Ds_ge);
var path = [];
for (var j = 0; j < n; j++) {
if (j == coordsArray.length - 1) {
// last coordinate
path.push({
loc: coordsArray[j],

step: 0,
distance: 0,
duration: 0
});
} else {

var distance = Ds_geHelpers.distance(coordsArray[j],
coordsArray[j + 1]);
path.push({
loc: coordsArray[j],

step: 0,
distance: distance,
duration: distance / speed
});
}
}

// now you can use path to create a DDSimulator...

var simulator = new DDSimulator(Ds_ge, path);

simulator.start();


});

Ds_ge.getLayerRoot().enableLayerById(Ds_ge.LAYER_ROADS, true);
//var la = Ds_ge.createLookAt('');
//la.set(45.7385, 9.12685, 10, Ds_ge.ALTITUDE_RELATIVE_TO_GROUND, 90,
0, 200);
//Ds_ge.getView().setAbstractView(la);
Ds_ge.getNavigationControl().setVisibility(Ds_ge.VISIBILITY_AUTO);
Ds_ge.getWindow().setVisibility(true);


}

function Ds_failureCB(object) {
alert('load failed');
}

function submitLocation() {
var address = document.getElementById('address').value;
Ds_geocoder.getLatLng(
address,
function(point) {
if (point && Ds_ge != null) {
var la = Ds_ge.createLookAt('');
la.set(point.y, point.x, 100,
Ds_ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 4000);
Ds_ge.getView().setAbstractView(la);
}
}
);
}

</script>
</head>
<body onload='Ds_init()' id='body'>
<div>
<form name='searchform' id='searchform'
action='javascript:submitLocation();void(0);'>
<input type=text size=60 id='address'></input>
<input type=submit value='Go to location'>
</form>
</div>
<div id='map3d_container' style='border: 1px solid silver; height:
500px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
<div id="status"></div>

</body>
</html>

[ihab...@googlemail.com]

Hello,

Hopefully somebody will help us to find where is the problem...

Thanks

Ihab

On Aug 27, 7:31 pm, Tone82 wrote:
> Here my test, that doesn't work  :(
>
> <html>
> <head>
>  <title>Google Driving Example</title>
>   <!-- *** Replace the key below below with your own API key,

> available athttp://code.google.com/apis/maps/signup.html*** -->

[Roman N]

Tone82 -- you need to call the simulator's initUI() method before
calling start():

// now you can use path to create a DDSimulator...

simulator = new DDSimulator(Ds_ge, path);

simulator.initUI();
simulator.start();

It should then work on KML files that look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<LineString>

<tessellate>1</tessellate>
<coordinates>
-122.4256407986994,37.78533818739029,0
-122.4247024768128,37.78538996266349,0
-122.4243230048576,37.78555658187852,0
-122.4241059605521,37.78569067730041,0
-122.4239089267012,37.78589147637377,0
-122.4237217175986,37.78610671011897,0
-122.4235158878113,37.78638508507535,0
-122.4232510135105,37.78643309058503,0
-122.421661757338,37.78660724024726,0
-122.4214613991228,37.78567384320822,0
-122.4230605740659,37.78546401182836,0
-122.4228441910696,37.78456511068615,0
-122.4230884453138,37.78458160013338,0
-122.4233601863983,37.78463131185394,0
-122.4235518882045,37.7847357534608,0
-122.4237256194188,37.78485764919964,0
-122.4238301440039,37.784968209921,0
-122.424044261437,37.78515119103584,0
-122.4243196936237,37.78526396733719,0
-122.4246622404377,37.78530310346815,0
-122.425591436259,37.78519189062087,0
</coordinates>
</LineString>
</Placemark>
</kml>

Nice job on the derivative app :)

- Roman

On Aug 27, 10:31 am, Tone82 wrote:
> Here my test, that doesn't work  :(
>
> <html>
> <head>
>   <title>Google Driving Example</title>
>   <!-- *** Replace the key below below with your own API key,

> available athttp://code.google.com/apis/maps/signup.html*** -->

[ihab...@googlemail.com]

Hello Roman,

below is my test for Tone82 code after i did the correction based on
your last message. it doesent work...
looking for directions

thanks
ihab


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>Google Maps API Example: GGeoXml KML Overlay</title>
<script src="http://www.google.com/jsapi?
key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhRimUgHS6mMLCFlNX-
Zysfc8ySOAxQBpjEWhnvf4yhQDziQ0S2rWGY7dQ"></script>

<script type="text/javascript" src="geplugin-helpers.js"></script>
<script type="text/javascript" src="math3d.js"></script>
<script type="text/javascript" src="simulator.js"></script>


<script>

google.load("jquery", "1");
google.load("maps", "2.x");
google.load("earth", "1");

var Ds_ge = null;
var Ds_geocoder;


function Ds_init() {
Ds_geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", Ds_initCB, Ds_failureCB);

}

function Ds_initCB(object) {

Ds_ge = object;

google.earth.fetchKml(ge, 'http://131.173.78.184/ihab/test/
routekml.kml',function(kmlObject) {

// create the array of GLatLng coordinates
var coordsKmlObj = kmlObject.getGeometry().getCoordinates();
var coordsArray = [];
var n = coordsKmlObj.getLength();
for (var i = 0; i < n; i++) {
var coord = coordsKmlObj.get(i);
coordsArray.push(new google.maps.LatLng(coord.getLatitude(),
coord.getLongitude()));
}

// drive speed (in meters per second)
var speed = 10;

// create the path

var geHelpers = new GEHelpers(ge);
var path = [];

for (var i = 0; i < n; i++) {

if (i == coordsArray.length - 1) {
// last coordinate
path.push({
loc: coordsArray[i],

step: 0,
distance: 0,
duration: 0
});
} else {

var distance = geHelpers.distance(coordsArray[i], coordsArray[i

+ 1]);
path.push({
loc: coordsArray[i],

step: 0,
distance: distance,
duration: distance / speed
});
}
}

// now you can use path to create a DDSimulator...

simulator = new DDSimulator(ge, path);

simulator.initUI();
simulator.start();

Ds_ge.getWindow().setVisibility(true);

}

function Ds_failureCB(object) {
alert('load failed');

}

[Trapulo]

On Aug 29, 6:56 pm, "[email address]" wrote:
> Hello Roman,
>
>  below is my test for Tone82 code after i did the correction based on
> your last message. it doesent work...
> looking for directions

That's work for me

[ihab...@googlemail.com]

hello Trapulo,

Can you please send me your trail... hopefully i can get it work also

Thanks... did u see my code in the above message,,, is it correct ..
can you show me where is the problem..


Thanks

Ihab

[ihab...@googlemail.com]

the problem in the above code looks to be in the creating
path...Hopefully somebody can help

Thanks

Ihab

[ihab...@googlemail.com]

Hello Roman,

Can you please tell me where is the problem in the code above.
Hopefully you will be there to help me

Thanks

Ihab

[TinyGrasshopper]

Here's a fixed version of your code: http://www.tinyg.com/googlearthtest8.html

The logic was ok, just bracketing problems and using "ge" instead of
"Ds_ge" etc.

Cheers,
Chris

[ihab...@googlemail.com]

Hello Chris

Below is the link for the driving simulator hosted in my website.
the result is still not ok... i receive warning messages regarding the
key.
i have changed the key in jsapi file. but its looks that i should
change it in the map file.

http://131.173.78.184/ihab/ihabhamzi.html

Looking to receive your directions

Thanks

Ihab

[TinyGrasshopper]

Umm you cant host google's AJAX library loader on your own site. The
line:

<script src="sim/jsapi?key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhTUzCPN-
AYg8LoGCqpf7pjOYeyNzBT2ynrUY7q51DKEcpHmxPeZY5XcUw"></script>

should be:

<script src="http://www.google.com/jsapi?
key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhTUzCPN-
AYg8LoGCqpf7pjOYeyNzBT2ynrUY7q51DKEcpHmxPeZY5XcUw"></script>

Cheers,
Chris

[ihab...@googlemail.com]

Hello

I made the correction the problem are still the same ...

Do i need to correct the path for the code belwo to www.google.com
inested of sim

<script src="www.google.com/jsapi?
key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhTUzCPN-
AYg8LoGCqpf7pjOYeyNzBT2ynrUY7q51DKEcpHmxPeZY5XcUw"></script>
<script type="text/javascript" src="sim/geplugin-helpers.js"></
script>
<script type="text/javascript" src="sim/math3d.js"></script>
<script type="text/javascript" src="sim/simulator.js"></script>

this line of code also need modification...?
</script><script src="sim/jquery.js" type="text/javascript"></
script><script src="sim/maps" type="text/javascript"></script><script
src="sim/main.js" type="text/javascript"></script><style
media="screen" type="text/css">.gmnoscreen{display:none}</style><style
media="print" type="text/css">.gmnoprint{display:none}</style><script
src="sim/default.js" type="text/javascript"></script></head><body

onload="Ds_init()" id="body">
<div>

Thanks

Ihab

[ihab...@googlemail.com]

Here is the website again

http://131.173.78.184/ihab/ihabhamzi.html

Thansk

> > - Show quoted text -- Hide quoted text -

[TinyGrasshopper]

Are you sure that that key is valid for the website you're hosting it
on?

Remember that a key is only valid for the domain you entered when you
signed up for the API key.

[TinyGrasshopper]

maybe try using a text url rather than the IP address (although not
sure that should make a difference).

[ihab...@googlemail.com]

Yes the key is valid ...becuause it work with another ones... but i
noticed that there is a file in my sim folder name map.

In this file it looks like i should add the API key also ?

Thanks

Ihab

[TinyGrasshopper]

Hmm you have a lot of weird stuff down the bottom there, I think you
should just replace all the code you have after the end of the
Ds_failureCB function with this:

</script>

</head>
<body onload='Ds_init()' id='body'>
<div>

<form name='searchform' id='searchform'
action='javascript:submitLocation();void(0);'>
<input type=text size=60 id='address'></input>
<input type=submit value='Go to location'>
</form>
</div>
<div id='map3d_container' style='border: 1px solid silver; height:
500px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
<div id="status"></div>

</body>
</html>

And check whether that works.

[ihab...@googlemail.com]

Thank you
I have added the code as you told me ... there is still a problem.
hopefully you can help me to get it work... this si the link to the
website again

http://131.173.78.184/ihab/ihabhamzi.html

thanks

ihab

[TinyGrasshopper]

Weird - took me a fair while to work out but you need "http://" in the
web address for google, eg:

<script src="www.google.com/jsapi?
key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhTUzCPN-
AYg8LoGCqpf7pjOYeyNzBT2ynrUY7q51DKEcpHmxPeZY5XcUw"></script>

should be:

<script src="http://www.google.com/jsapi?
key=ABQIAAAAVgUNoXD1JYBpD50I1AM_WhTUzCPN-
AYg8LoGCqpf7pjOYeyNzBT2ynrUY7q51DKEcpHmxPeZY5XcUw"></script>

Then it works fine :)

Cheers,
Chris

[ihab...@googlemail.com]

Yes Thanks Its works finally

Ihab

[snakebyteme]

The above code samples work great for a LineString object, but I don't
see the additional attributes being rendered like the line color or
line width.
Is there a way to import other placemarks (with their Style info) into
the simulator?
Also is there a way to enable the street name overlays in the driving
simulator as well?

[snakebyteme]

I can't figure out why it will selectively parse certain KML files and
not other ones.
What is wrong with this file to make it not parse a path?

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<LineString>
<tessellate>1</tessellate>
<coordinates>

102.507136666667,12.258345,4
102.507023333333,12.2583866666667,-32.9
102.50688,12.2583916666667,-17.7
102.506736666667,12.25835,-12.2
102.506613333333,12.2582916666667,-10.6
102.506588333333,12.2581683333333,2.5
102.506636666667,12.2580583333333,6.3
102.506706666667,12.2579533333333,6.7
102.506731666667,12.25783,5.3
102.506648333333,12.25774,-2.2
102.50654,12.257805,0.3
102.50645,12.2579383333333,-3.7
102.506358333333,12.2580733333333,-3.4
102.506281666667,12.258175,-3.4
102.506188333333,12.2583016666667,-0.6
102.506095,12.2584366666667,-0.6
102.505993333333,12.258565,0.3
102.505895,12.2586883333333,0.3
102.505795,12.25881,2.2
102.505675,12.2589533333333,2.2
102.505573333333,12.25911,5.4
102.505443333333,12.25926,5.4
102.505343333333,12.2594233333333,13.1
102.50523,12.2595983333333,13.1
102.505111666667,12.2597683333333,18.3
102.504976666667,12.259925,18.3
102.504836666667,12.2600833333333,17.7
102.504691666667,12.2602466666667,17.7
102.504556666667,12.26041,16.4
102.504418333333,12.260585,16.4
102.50428,12.26077,14.7
102.504208333333,12.260865,14.7
102.504141666667,12.2609633333333,14.7
102.504065,12.2610616666667,14.7
102.503976666667,12.2611616666667,15.7
102.503896666667,12.2612666666667,15.7
102.503813333333,12.2613733333333,15.7
102.503726666667,12.2614783333333,15.7
102.50363,12.2615866666667,12.6
</coordinates>
</LineString>
</Placemark>
</kml>

[Roman N]

I tried that file here locally, and it seems to work. Can you post a
link to your entire page? Also, make sure you have Firebug or another
JS debugger installed so that you can trap basic errors.

- Roman

[Nymor]

Superb thread - thanks all.

With the contents I've managed to fly a path I have but have come
across something that I'm trying to solve and thought it best to post
here, rather than start a separate thread, as it's solution may add to
the Well.

The issue I have is that my path segments are very short and as such
the display is "jerky". I thought this was done to how the camera
moves so I made some moderations in a copy of the simulator.js to try
and sort it.

What I did was to add a this.segmentPercent_ variable in which I
stored the...

this.segmentTime_ / this.path[this.pathIndex_].duration

...within the Tick function.
I then used that within the moveToPointDriving_ function -
replacing...

curHeading + 1.0 * this.getTurnToDirection_(curHeading,
desiredHeading)

with

curHeading + ((desiredHeading-curHeading) * this.segmentPercent_)

...but the transition is still jerky.


While I'm still going to keep bashing away at this I thought it would
be wise to ask if anyone can assist. What I'm striving for is for the
path Tour to be as smooth as it is within GE itself when dealing with
a path with many short segments.

I'm not looking necessarily for a complete solution, although it would
be welcome ;), but a few pointers in the right direction.

Thanks again
Nymor

[Nymor]

I'm getting somewhere. My mistake in the above code changes is the

curHeading + ((desiredHeading-curHeading) * this.segmentPercent_)

line. I should be using the Heading at the start and end of each
segment and curHeading is not either of those - but is, as it says on
the tin, the current heading. So I replaced curHeading with
heading_segment_start and desiredHeading with heading_segment_end -
which are calculated.

That seems to have done the job in that the tour is now smooth -
although I get some flickering and also the odd 360deg spin along the
way :) - both are which are bugs I need to track down.

Anyway thought I'd just mention the error I made and with that in mind
I'm getting closer to a smooth fly-through. Will post later when it's
finished.

Nymor

[Roman N]

Nymor,

Great--glad you found the problem! This would be a great sample,
definitely post a link if you'd like to share once you're done.

- Roman

[Kashinath Patil]

Hello can anybody send me demo of how to add kml for custom route