Monday, 13 October 2008

Earth Atlas: Creating a KML tree with Ext JS

A new version of Earth Atlas is now available (earthatlas.info). 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).    

8 comments:

  1. Anonymous14 October 2008 at 08:16

    Hi.

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

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

    Regards.

    ReplyDelete
  2. Bjørn Sandvik14 October 2008 at 11:33

    Hi,

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

    License: GNU General Public License v3

    Bjorn

    ReplyDelete
  3. Anonymous14 October 2008 at 18:40

    Thank you very much, Bjorn.

    Have you any idea to make this script internationalisation?

    ReplyDelete
  4. Bjørn Sandvik14 October 2008 at 18:54

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

    ReplyDelete
  5. Anonymous10 November 2008 at 17:54

    Hi,

    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?

    Thanks

    Greg

    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());

    //google.earth.fetchKml(button.earthPanel.earth, button.earthPanel.kmlUrlField.getValue(), button.earthPanel.addKml.createDelegate(button.earthPanel));
    //button.earthPanel.kmlUrlField.reset();
    }
    }]
    });
    return form;
    },

    ReplyDelete
  6. Bjørn Sandvik11 November 2008 at 15:44

    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).

    ReplyDelete
  7. Unknown12 November 2008 at 02:18

    Hi.

    This EarthAtlas looks like "3D" OpenLayers(http://openlayers.org) 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?


    Regards.

    ReplyDelete
  8. Anonymous24 January 2012 at 05:30

    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.

    Sylvain

    ReplyDelete