javaScript: Click events in Google Earth
This relates to Data Driven Mapping applications and the Javascript HowTo section
Events in Google Earth
I deal with event handling in Google earth in Using Google Earth but dealing with click and double click events is especially tricky, made even more so by cross browser issues.
[su_space rsize=”10″]
Knowing the difference between click and double click
If you try to handle the double click, firstly you lose the useful double click behavior native to Earth, but also the first click of a double click fires off a single click. In the case oft his application, single click means bring up an info Balloon, and double click is to mean go to the next spot, so I had to find a way of handling double click.
Here’s the code below
mcpherSpot.prototype.dealWithClicks = function(showit) { var spot=this; var vm = this.parent; var doubleClickTimeout = 300; // now see if its the second click within the timeout period if (!vm.dealingWithClicks){ vm.dealingWithClicks = true; // this is single click behavior setTimeout( function() { if(vm.dealingWithClicks) { vm.dealingWithClicks = false; spot.createInfoWindow (0); }} , doubleClickTimeout); } else { // double click behavior vm.dealingWithClicks = false; vm.gotoAnotherSpot(spot,vm.nextSpot(spot)); if(showit)vm.nextSpot.createInfoWindow(0); } return(false); }; function mcpherClicks(e,spot,plot){ if(e.preventDefault)e.preventDefault(); if(e.stopPropagation)e.stopPropagation(); if (spot.flying){ var ge = spot.parent.ve.ge; spot.stopFlyAround(); google.earth.addEventListener(ge.getView(), 'viewchangeend', mcpherFlyingClicks(spot,plot)); } else { spot.dealWithClicks(plot); } }
Walkthrough
google.earth.addEventListener(spot.placemark, 'click', function(e) { mcpherClicks(e,spot,false); } );
The trick here is to only handle single clicks, but if a single click happens within a short time (in this case var doubleClickTimeout = 300;) then process as a double click.
This is achieved by setting a timeout that calls a function spot.createInfoWindow to deal with a single click if a second single click didn’t happen within the timeout period. If it did happen, then it’s a double click.
if (!vm.dealingWithClicks){ vm.dealingWithClicks = true; // this is single click behavior setTimeout( function() { if(vm.dealingWithClicks) { vm.dealingWithClicks = false; spot.createInfoWindow (0); }} , doubleClickTimeout); } else { // double click behavior vm.dealingWithClicks = false; vm.gotoAnotherSpot(spot,vm.nextSpot(spot)); if(showit)vm.nextSpot.createInfoWindow(0); }
Dealing with multiple browsers
if(e.preventDefault)e.preventDefault(); if(e.stopPropagation)e.stopPropagation();As usual questions, feedback and comments are welcome at our forum. Now lets take a look at more javaScript snippets from this application