Executing Javascript from balloon open/close

[Greg-WBSR]

Hi,

I believe it is possible to execute javascript using the eventlistener
for a balloon open/close.

So, I would like to be able to use animatedupdates in GE tours to
execute javascript and am thinking it might be possible by the opening
and closing of balloons.

Something like (within the function that loads a GE tour)

google.earth.addEventListener(ge, 'balloonopening', function(event) {
event.preventDefault();

var placemark = event.getBalloon.getFeature();

// Need an IF statement to detect 'id' of Placemark whose balloon
has opened/closed which then executes the desired function - ie
functionName ('id')

});


Is this line of thinking correct? and if so would someone be able to
fill in the IF statement?

I have been trying a few ideas but I am not sure if you can 'walk the
DOM' of the the tour?
if so, is this close?

walkKmlDom(kmlObject, function() {
if (this.getType() == 'Placemark') {
id= this;
functionName ('id');
return false; // stop the DOM walk here.
}

The problem is I am not comparing the 'id' of the placemark, and some
my tours have more than 1 placemark.

Thanks, any help is greatly appreciated.
Greg

[Greg-WBSR]

Okay, so I have been playing further and the following works for
executing a JS function upon a balloon close

google.earth.addEventListener(ge, 'balloonclose', function() {
myFunction();
});

The problem is it works when the first balloon closes (obviously), but
it doesn't allow any other balloons to open, so I still need someway
of identifying which balloon has closed (I presume by id of it's
Placemark) so I can distinguish which JS function I want to execute
(if any) - while allowing multiple balloons to open and close during
the tour.

I am still playing with 'walking the DOM' to determine which balloon
it is, but no luck

Greg

[Greg-WBSR]

One more idea, trying to use the id of the placemark -


google.earth.addEventListener(ge, 'balloonclose', function(event) {

var placemark = event.getBalloon.getFeature(); // Supposed to
determine what the balloon is attached to (Placemark?)
var id = placemark.getId(); //
retrieves the id of the Placemark

if (id == 'value') {
alert ('Balloon Close Alert');
} else {
alert ('Balloon Close ELSE Alert');
}

});

Needless to say, it doesn't work.

Any ideas?

Greg

[Berwyn]

Greg

How about

google.earth.addEventListener(ge.getView(), 'viewchangeend',
eventHandler);


when the camera stops moving eventHandler should be fired, you could
inspect the view to figure out your location or use getCurrentTime on
the tour to find out where you are in the timeline

[Greg-WBSR]

Hi Berwyn,

Thanks for your reply.

I think your suggestion would be fine if I was only doing 1 tour - but
I have 200+ ....

The JS would get rather large trying to determine location each time
(and make sure in right tour) which is why I would like to work out a
way of calling a JS function 'directly' from within a GE tour. That
way I could make a call to (eg function start() or stop() )by simply
giving a balloon (or Placemark) the id of 'start' or 'stop' and it
would work regardless of which tour is running and be able to call
them multiple times (id's of start1,start2,start3 etc) during each GE
tour. The functions I want to call (only 5 or so) would be the same
(with no parameters that I can think of right now).

I read in a previous post (from Nymor) that the balloonclose is a
PluginEvent and not a KmlEvent and as such doesn't pass any info about
the closing balloon - I am not sure what that means really. He
mentioned trying to find out info about the Placemark the balloon was
attached to, thus my attempts above. Any ideas of how to determine the
id of a placemark who's balloon has just closed?

Also, It took me ages to work out why 'balloonclose' works but
'balloonopening' doesn't - balloonopening is not released yet and is
in 'testing'. Perhaps when it becomes available, it will allow info to
be passed about which balloon? fingers crossed.

So, thanks for your help, I appreciate people spending time and effort
on my problems, but I think I need to find a different solution to be
able to handle my requirements.

Greg

[Josh L]

Hi Greg,

You can get the latest version of the plugin which was launched last
week (with the new balloonopening event) by uninstalling and
reinstalling your plugin, or by joining the developer channel (in
which case you'll be auto-updated to future pre-release versions as
they become available).

You can see a test of the balloonopening event at http://earth-api-dev.appspot.com/#events
if you have the latest version, and you'll note it does allow you to
access the placemark of the balloon that is about to open.

Because each feature should have a unique ID, I'd recommend not using
that element for your function name. As one alternative, you could
place information on which functions (and down the line potentially
arguments or other attributes you'd like to use) in the ExtendedData
of the placemark. Then you can use fetchKml() on the placemark to
get the specific ExtendedData values you want, and do the appropriate
thing from there.

Hope this helps,

-Josh

[Greg-WBSR]

Hi Josh,

Thanks for your reply - unfortunately I am quite busy and not able to
play with it right now.

A couple of quick points though - I have updated the plugin (and the
app - which has caused some problems to be discussed elsewhere) and
the 'balloonopening' event works on your demo page. However, all 3
examples do the same thing - I had to delete the part about the event
listener to get the demo about 'extended data' to work.

Also - the entire 'Get By' examples don't load at all for me?

Anyway, when I get time I will try to implement the 'balloonopening'
event into my site - but could you give me an idea on how to use the
browse the Placemark to extract the ExtendedData for comparison?

ie - I presume something like this will work to a certain degree

google.earth.addEventListener(
ge, 'balloonopening', function(event) {
var placemark = event.getBalloon().getFeature();
var placemark_name = placemark.getName();

if (placemark_name = 'start') {
event.preventDefault();
functionstart();
} else {
if (placemark_name ='stop') {
event.preventDefault();
functionstop();
} else {
// do nothing and let the balloon open
}
});

I am not sure if you can do an IF within an IF like that????

However, it would be best to do what you said and not use the
placemark name, instead use some ExtendedData - so what is the command
to extract that?

something like ?
.....
var placemark = event.getBalloon().getFeature();
var ExtendedDataValue = placemark.ExtendedData('command')

where in the KML the ExtendedData would look like

<ExtendedData>
<Data Name="command">
<value>start</value>
</ExtendedData>

and I could change the <value> to be start/stop/pause/
loadScreenOverlay etc.....

and use the above IF statement to compare the value and choose which
JS function to execute

In your answer you mention having to use fetchKml() on the placemark?
Which I don't understand why (except if that is the way to access the
ExtendedData)
I have read up about the ExtendedData, and it seems like it is fairly
simple to use inside balloons, but I don't see any examples of how to
use it with JS

I am about to finish - and have thought - maybe you mean I need to do
something like
var placemark = event.getBalloon().getFeature();
//not sure on commands for this stuff
fetchKml of the placemark
Walk the Dom to extract ExtendedData
then use an IF statement to compare and decide what to do?

Also, it might be reasonable to just use the placemark_name as I could
make placemarks in the GE tour that are there for no other reason but
to execute some JS.
However, it would be nice to use the ExtendedData, that way I could
remove the 'preventDefault();' and let a balloon open normally while
ALSO executing the JS

Sorry about the long response (especially since I haven't had time to
test my thoughts) - I will be able to test a bit in the next day or
two (at home I have ftp access and time) - I just thought you might be
able to tell me whether I am heading in the right direction or not.
Plus I wanted to acknowledge you for responding to my thread.

Cheers,
Greg

On Jun 19, 2:51 pm, Josh L wrote:
> Hi Greg,
>
> You can get the latest version of the plugin which was launched last
> week (with the new balloonopening event)  by uninstalling and
> reinstalling your plugin, or  by joining the developer channel (in
> which  case you'll be auto-updated to future pre-release versions as
> they become available).
>

> You can see a test of the balloonopening event athttp://earth-api-dev.appspot.com/#events

[Greg-WBSR]

Okay, I need to step back a couple of steps again - it seems the
'balloonopening' event DOESN"T work for balloons opened by GE tours.

I have made a stripped down page with two buttons to load 2 tours (the
same tour but one has 2 popup balloons)

you can see the page here -

http://whistlervisitorguide.com/trailmap/

If you click the 'load tour with 1 balloon' you will see that the
balloon open event is ignored, while the balloon close is executed.
If you click the 'load tour with 2 balloons' you will see that the 2nd
balloon does not get opened at all


HOWEVER, if you pause the GE Tour, and manually click the placemark -
the 'balloonopening' event is triggered - and if you do so during the
tour with 2 balloons (after the first) you will see that the 2nd
balloon now opens where before it stayed closed.

Any ideas anyone?

p.s. I have tried with loading earth 1 and earth 1.x - I have also
tried using the command

google.earth.addEventListener(
ge, 'balloonopening', function(event)

......

and it doesn't make a difference.

[Josh L]

Hi Greg,

I've confirmed your issue: The balloonopen event does not get
appropriately called during a Tour. I've notified the team and will
update this thread when there's a solution to announce. Apologies for
getting your hopes up on this event!

-Josh

[Greg-WBSR]

Thanks Josh!

On Jun 28, 8:44 pm, Josh L wrote:
> Hi Greg,
>

> I've confirmed your issue:  The balloonopen event does not get
> appropriately called during a Tour.  I've notified the team and will
> update this thread when there's a solution to announce.  Apologies for

> getting your hopes up prematurely on this  new event listener!

>
>   -Josh
>
> On Jun 21, 9:09 pm, Greg-WBSR wrote:
>

[Greg-WBSR]

Hi Josh,

After noticing the latest plugin version release (5.2.1.1547) - I went
back to this problem.

It is fixed - sort of

I have put up a page at
http://whistlervisitorguide.com/examples/balloonpopup-executing-js/

It has four buttons -
All same tour as the first button

The second button uses the balloonopening listener and it now works
for balloons opened from a tour, but you will see that the 2nd balloon
fails to open

The third button, I added in tour 'pause's and now the second balloon
works. you just need to keep clicking 'play'

The last button is adding 'plays' as well, to make the tour
continuous. It also has some code in there to determine which balloon
has opened (by ID) to change the alert and a removelistener to prevent
multiple alerts.

Basically, it works so long as you pause the tour (I haven't actually
tested to see if it is because the balloons a too close together -
timewise - but that may be required at some point)
I think it would be best to not have to pause and restart the tour


my current 'want' for this feature would require a 'pause' of the tour
anyway - so I am happy for now - but I think in the future I may want
to use the balloonopening to execute JS and leave the tour running

all this could be avoided with a <gx:executeJS> too :)

Anyway, I am really happy to see that problems brought up here (in
this group) - like this one - are passed through and something is done
about it.

Thanks
Greg

[Greg-WBSR]

I may have spoken a little bit too soon........

That page is well and good, except for the 'working version' button.

It is supposed to also event.preventDefault(); to stop from the
balloons from opening and only show the alerts - but the balloons are
still opening....

the code being used is this -
function balloonevent(event) {
event.preventDefault();
ge.getTourPlayer().pause();
var placemark = event.getBalloon().getFeature();
var placemark_id = placemark.getId();
if (placemark_id == 1) {
alert ('Balloon opening with id of ' + placemark_id);
} else {
if (placemark_id == 2) {
alert('New alert for balloon with id of 2');
}
}
ge.getTourPlayer().play();
}

and inside the function which loads the tour is this

google.earth.removeEventListener(ge, 'balloonopening',
balloonevent);
google.earth.addEventListener(ge, 'balloonopening', balloonevent);

the removelistener is there to prevent multiple alerts when loading
tours one after the other....

any ideas anyone?

Thanks
Greg

On Aug 6, 2:29 pm, Greg-WBSR wrote:
> Hi Josh,
>

> After noticing the latest plugin version release (5.2.1.1547) - I went
> back to this problem.
>
> It is fixed - sort of
>

> I have put up a page athttp://whistlervisitorguide.com/examples/balloonpopup-executing-js/

[Josh L]

Hey Greg,

This seems like perhaps the Tour is simply reopening the balloon since
you paused it right at the point of opening it -- if you set the
'time' of the tour to a hundred milliseconds later (using
setCurrentTime()) I think it should solve this issue. That said the
whole requirement to pause the tour should not be needed, and this is
the core problem - I'll update this thread once we've got the balloon
open/close events working exactly as expected. In the meantime
hopefully this workaround does the trick.

Cheers,

-Josh

> ...
>
> read more »

[Greg-WBSR]

Hey Josh,

Thanks for the suggestion - I actually found my own work-a-round but
forgot to update this page/post with it.

I am using a ge.setBalloon(null)
It also means I no longer have to pause/play the tour - however, while
waiting for an acknowledgment of the 'alert', it appears the tour
continues to play in the background. Leave it 10 secs before
acknowledging the 2nd alert and you will see the tour jump ahead.

Using the event to trigger a 'real' js which doesn't require an
'alert' results in a smooth playback of the tour though. This is my
real world use of capturing the event, so the issue is 'solved for
now'
there must be a difference though between this and a preventDefault -
and it might haunt me later on??

the setBalloon(null) is located in the IF statements to allow other
balloons to open upon the clicking of their placemarks - however
something I have not noticed before - is that the tour must be paused
for a placemark click event to get triggered - is this normal?

I have updated the example page in this post and removed the excess to
make it easier to read the source.

side note - once you have used the tour with the setballoon(null) -
the tour button using preventdefault only now works, but refresh the
page and the preventdefault button shows the balloons again. This is
because there is no removeEventListener

Cheers
Greg

> ...
>
> read more »