Slade Ride

Slade Ride ... Adventure Cycling ... with bells on

You are here: Home / Blog / Academia / Google Earth API Simple KML Overlays Example

Google Earth API Simple KML Overlays Example

By

This Google Earth API simple map overlay was created for the WebGIS coursework which was part of the IT & GIS module of the MSc in GISc at UCL.

Installed Plugin Version: Loading…

As agreed with one of the markers of the module, the data has been taken from my own collection and six KML files have been used (rather than from an earlier IT & GIS assignment and ‘three’, respectively). These six KML files represent six stages of a bicycle trip that I undertook in 2009, as blogged at SladeRide.com.

In order to create the overlay I produced the following …

…note that SladeRide.com already existed prior to the production of the above – the website has been built using the Open Source blogging and CMS platform WordPress and as such utlilises PHP and CSS.

Six KML files have been uploaded to the web server. These files were created using the ‘snap-to-road’ and ‘export as KML’ features at mapmyride.com. Some formatting corrections were then carried out using Google Earth and Notepad++. The latter step included the allocation of colour to each stage of the route (i.e. each separate file) using the KML style tags.

The co-ordinates are in WGS84.

The KML is called from the external JavaScript file googleEarthInitialise.js and addSampleButton.js enables the user interface in the map legend. These JavaScript are called from the HTML in this page.

Note that viewing the source code of this page in your browser will show the aforementioned scripts – this can be achieved by looking between the body tags for the HTML in question, then searching for the JavaScript filenames and then clicking them to display the script itself. However, WordPress adds much additional script to what is essentially a dynamically created HTML page. Consequently, for ease if illustration the core scripts for the map overlay are shown below …

googleEarthInitialise.js…


var ge;

// store the object loaded for the given file... initially none of the objects
// are loaded, so initialize these to null
var currentKmlObjects = {
'1': null,
'2': null,
'3': null,
'4': null,
'5': null,
'6': null
};

google.load("earth", "1");

function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);

addSampleUIHtml(
'

Legend

' + 'Click to toggle
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
'
);
}

function initCallback(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
10000000 // range (inverse of zoom)
);
ge.getView().setAbstractView(la);

// if the page loaded with checkboxes checked, load the appropriate
// KML files
if (document.getElementById('pt_1_v2').checked)
loadKml('1');

if (document.getElementById('pt_2_v2').checked)
loadKml('2');

if (document.getElementById('pt_3_v2').checked)
loadKml('3');

if (document.getElementById('pt_4_v2').checked)
loadKml('4');

if (document.getElementById('pt_5_v2').checked)
loadKml('5');

if (document.getElementById('pt_6_v2').checked)
loadKml('6');

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

function failureCallback(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('pt_' + file + '_v2');
if (kmlCheckbox.checked)
loadKml(file);
}

function loadKml(file) {
var kmlUrl = 'http://www.sladeride.com/msc-data/kml/pt_' + file + '_v2.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;

// wrap alerts in API callbacks and event handlers
// in a setTimeout to prevent deadlock in some browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);

// uncheck the box
// document.getElementById('kml-' + file + '-check').checked = '';
}
});
}

addSampleButton.js…


function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;

if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);

// add the button to the Sample UI
document.getElementById('sample-ui').appendChild(btn);
}

function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}

html…

Installed Plugin Version: Loading...


Recent Posts