Monday 13 October 2008

Earth Atlas: Creating a KML tree with Ext JS

A new version of Earth Atlas is now available ( Earth Atlas demonstrates how a Google Earth-like user interface can be created in the web browser. This is achieved by combining the Google Earth API and the Ext JS library. Earth Atlas has no server-side dependencies, - the data layers are provided by loading various KML files. 
 The main changes since the initial release:
  • The layers available in the Google Earth Plug-in (borders, roads, buildings and terrain) can be switched on and off. 

  • Various options can be set (status bar, grid, overview map, scale legend, atmosphere and mouse navigation)

  • The KML structure (list view) is displayed in the left panel when external files are referenced (see example).    


Anonymous said...


Will source code of this "Earth Atlas" be opened?

I'd like to try to add more functions into this.


Bjørn Sandvik said...


You can download the Ext.ux.GEarthPanel extension on Google Code.

License: GNU General Public License v3


Anonymous said...

Thank you very much, Bjorn.

Have you any idea to make this script internationalisation?

Bjørn Sandvik said...

It's not my top priority, but please tell me if you want to contribute.

Anonymous said...


Nice job! Thanks for posting the source for 'Ext.ux.GEarthPanel.js' to Google. I am trying to extend the application by adding a panel for finding a location using the Google Geocoder. I am having a what I think is a scoping issue because 'button.earthPanel.location' is undefined (can't reference the value of the 'location' textfield. What am I doing wrong?



getFindForm: function(){
var form = new Ext.FormPanel({
frame: true,
labelWidth: 30,
border: true,
defaultType: 'textfield',

items: [{

fieldLabel: 'Loc',
width: 195,
name: 'location'


buttons: [{
text: 'Find Location',
earthPanel: this, // Accessible in handler
handler: function(button, pressed){
//It's all about scope...

alert("Value of location is " + button.earthPanel.location.getValue());

//, button.earthPanel.kmlUrlField.getValue(), button.earthPanel.addKml.createDelegate(button.earthPanel));
return form;

Bjørn Sandvik said...

Greg, thanks for your code. A panel for finding a location will be included in the next release. (For your code to work, you need to define the location text field in the initComponent function).

Unknown said...


This EarthAtlas looks like "3D" OpenLayers( for which I have taken a hands-on tutorial taught by developer himself(Schmidt) recently in Tokyo.

Do you have any plan to integrate yours with this?


Anonymous said...

Hello Bjorn,

I just tried your 3D globe view and got a blank page with a ATL 10.00 message on it. Is your example still working properly or is it a GE issue?

Thanks to let me know.