How to handle a drag-event within Google Earth plugin? - drag-and-drop

Question

My javascript is very weak.
Is it possible to modify the same code below to do the following:
Make the objects loaded draggable
When the object is dropped, an ajax request to something like:
http://.../moveTo?lat=new_lat&long=new_long&id=some_way_to_uniquely_id_the_object
Any advice to offer?
Sample Code:
var ge;
// store the object loaded for the given file... initially none of the objects
// are loaded, so initialize these to null
var currentKmlObjects = {
'red': null,
'yellow': null,
'green': null
};
google.load("earth", "1");
function init() {
// Create checkboxes
var content = document.getElementById('content');
var inputHTML = 'Placemarks:<br/>';
inputHTML += '<input type="checkbox" id="kml-red-check" onclick="toggleKml(\'red\');"/>' +
'<label for="kml-red-check">Red</label>' +
'<input type="checkbox" id="kml-yellow-check" onclick="toggleKml(\'yellow\');"/>' +
'<label for="kml-yellow-check">Yellow</label>' +
'<input type="checkbox" id="kml-green-check" onclick="toggleKml(\'green\');"/>' +
'<label for="kml-green-check">Green</label>';
content.innerHTML = inputHTML;
google.earth.createInstance('content', 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);
// fly to Santa Cruz
var la = ge.createLookAt('');
la.set(37, -122,
0, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, // heading
0, // straight-down tilt
5000 // range (inverse of zoom)
);
ge.getView().setAbstractView(la);
// if the page loaded with checkboxes checked, load the appropriate
// KML files
if (document.getElementById('kml-red-check').checked)
loadKml('red');
if (document.getElementById('kml-yellow-check').checked)
loadKml('yellow');
if (document.getElementById('kml-green-check').checked)
loadKml('green');
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCB(errorCode) {
}
function toggleKml(file) {
// remove the old KML object if it exists
if (currentKmlObjects[file]) {
ge.getFeatures().removeChild(currentKmlObjects[file]);
currentKmlObject = null;
}
// if the checkbox is checked, fetch the KML and show it on Earth
var kmlCheckbox = document.getElementById('kml-' + file + '-check');
if (kmlCheckbox.checked)
loadKml(file);
}
function loadKml(file) {
var kmlUrl = 'http://earth-api-samples.googlecode.com/svn/trunk/' +
'examples/static/' + file + '.kml';
// fetch the KML
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
// NOTE: we still have access to the 'file' variable (via JS closures)
if (kmlObject) {
// show it on Earth
currentKmlObjects[file] = kmlObject;
ge.getFeatures().appendChild(kmlObject);
} else {
// bad KML
currentKmlObjects[file] = null;
alert('Bad KML');
// uncheck the box
document.getElementById('kml-' + file + '-check').checked = '';
}
});
}
google.setOnLoadCallback(init);
For bonus points, can I get the kml to be reloaded afterwards?

Answer 1

To make the objects draggable you need to set up some event listeners and handle the movement in the callback function. I presume the objects you wish to drag are place-marks (KmlPlacemark) if so you need something like this...(NB: This is untested and written here so there could be some typos.)
var dragging = false; // the object being dragged
var url = "http://.../moveTo?"; // path to your cgi script
function init() {
// Rest of your method body...
google.earth.addEventListener(ge.getGlobe(), "mousedown", function(e)
{
// if it is a place mark
if(e.getTarget().getType() == 'KmlPlacemark')
{
// set it as the dragging target
dragging = e.getTarget();
}
});
google.earth.addEventListener(ge.getGlobe(), "mouseup", function(e)
{
// drop on mouse up (if we have a target)
if(dragging) {
// build the query string
// ...you could use getName or getSnippet rather than getId
var query = "lat=" + dragging.getGeometry().getLatitude() +
"&long=" + dragging.getGeometry().getLongitude() +
"&id=" + dragging.getId();
// send the query to the url
httpPost(url, query);
// clear the dragging target
dragging = false;
}
});
google.earth.addEventListener(ge.getGlobe(), "mousemove", function(e)
{
// when the mouse moves (if we have a dragging target)
if(dragging) {
// stop any balloon opening
e.preventDefault();
// drag the object
// i.e. set the placemark location to cursor the location
dragging.getGeometry().setLatLng(e.getLatitude(), e.getLongitude());
}
});
}
// send a HTTP POST request
// could use jQuery, etc....
function httpPost(url, query) {
var httpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.httpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.httpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.httpReq .open('POST', url, true);
self.httpReq .setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.httpReq .onreadystatechange = function() {
if (self.httpReq .readyState == 4) {
// do something...
alert(self.httpReq.responseText);
}
}
self.httpReq.send(query);
}