wiki:mobile

GeoExt Mobile GXM

Description

While GeoExt offers a "Toolkit for Rich Web Mapping Applications" these applications will not provide full functionality when accessed with mobile devices. With the ever-growing use of smartphones such as the IPhone, IPad or Android based devices to access internet resources, a rich toolkit for mapping applications directly targeted at these devices was missing.

GeoExt Mobile ‒ or GXM ‒ wants to fill this gap by combining the powers of two extraordinary JavaScript libraries:

  • Sencha Touch ("the First HTML5 Mobile Web App Framework") can be used to build web application that look and feel native on lots of devices. It is in many ways the mobile counterpart of Ext JS
  • OpenLayers ("Free Maps for the Web") is well known for its feature richness for displaying and interacting with geographic data in the web. With the version 2.11 (currently in Release Candidate status) OpenLayers now supports mobile devices due to the fact that it e.g. respects touch-based events.

GXM wants to combine the powers of its base libraries and wants to provide usefull widgets and components that can be the foundation of your mobile-aware webgis applications.

Supported browsers

As GXM is based upon Sencha Touch, it supports the same browsers. You should expect GXM code to work on the native iOS browser (IPad, IPhone, etc.), the native Android browser on most devices and the desktop browsers Apple Safari or Google Chrome.

Currently implemented features

  • A component that wraps an OpenLayers Map and acts as a MapPanel
  • A button component that can be used to control OpenLayers controls
  • A list component that can be used to show a list of OpenLayers Layer objects
  • A layerstore that wraps around instances of OpenLayers layers
  • A model that maps OpenLayers layer instances to be used inside of stores

Examples

API documentation

A raw and unpolished version generated from the source code can be accessed here:

How to get GXM

...from SVN

As long as GXM lives in a sandbox it is easiest to checkout the source code directly from SVN:

svn co http://svn.geoext.org/sandbox/gxm/geoext/gxm/ gxm-sandbox

After a checkout you will have the following files and folders in the gxm-sandbox/ directory:

  • build/: Contains the build tools for GXM. Run make in shell to see your options
  • css/: Contains the stylesheet for GXM.
  • doc/: Contains the generated version of GXMs API documentation and its additional base files
  • examples/: Contains the examples showing basic usage of GXM
  • external/: Contains static references to Sencha Touch 1.1 and OpenLayers at revision 11966. You can use these or your own versions of OpenLayers and/or Sencha Touch
  • img/: Contains artwork used in GXM
  • lib/: Contains the source code of GXM and an autoloader for convenience
  • license.txt: The license of GXM
  • nightly/: Contains a zipfile of the main library code, see below
  • tests/: Contains the GXM test-suite based upon Test Another Way
  • tools/: contains tools used internally (e.g. for building a single file)

The most important folder is lib where the raw source code lives.

...from a (possibly outdated) nightly-build

Download a zipfile http://svn.geoext.org/sandbox/gxm/geoext/gxm/nightly/GXM-0.0.1.zip

This file might not always be up-to-date and only contains

  • a minimzed and compiled main JavaScript-file GXM.js
  • the css/-folder
  • the img/-folder
  • the lib/-folder

Your first mobile map interface with GXM

To build your first GXM application follow these steps:

Create an index.html-file with the following content:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Your page title</title>

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
    </head>
    <body>
        
    </body>
</html>

Next, add references to the relevant files (CSS and JavaScript) of Sencha Touch and OpenLayers (you can e.g. put them inside of the <head>-tag just after the last <meta ...>-tag):

<!-- Stylesheets of Sencha Touch and OpenLayers -->
<link rel="stylesheet" href="../external/sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="../external/OpenLayers.r11966/theme/default/style.css" type="text/css">

<!-- JavaScript of Sencha Touch and OpenLayers -->
<script type="text/javascript" src="../external/sencha-touch-1.1.0/sencha-touch.js"></script>
<script type="text/javascript" src="../external/OpenLayers.r11966/OpenLayers.js"></script>

Next, we'll load the CSS

<!-- add this after the OpenLayers stylesheet -->
<link rel="stylesheet" href="../css/gxm.css" type="text/css">

and JavaScript of GXM:

<!-- add this after the OpenLayers JavaScript -->
<!-- This file loads all relevant files -->
<script type="text/javascript" src="../lib/GXM.loader.js"></script>

We'll also include a file gxm-example.js as last element in the <head> with the following content:

alert('OpenLayers: ' + OpenLayers.VERSION_NUMBER);
alert('Sencha Touch: ' + Ext.version);
alert('GXM: ' + GXM.version);

If you visit that site with a browser you should be greeted with three alerts, and none of the alerts should contain the string undefined. If you see the string undefined, you will have to adjust the according path.

Next we are going to add a wrapper method that'll run all our instanciation code as soon as possible:

Ext.setup({
    onReady: function(){
        alert('Replace this alert with actual code.');
    }
});

In the next step we will remove the above debugging alert and start with the creation af a simple OpenLayers.Map. Place the following code inside of the onReady-method:

// create a map
var map = new OpenLayers.Map({
    controls: [
        new OpenLayers.Control.TouchNavigation(),
        new OpenLayers.Control.Attribution()
    ]
});
// create a layer
var ol_wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS", 
    "http://vmap0.tiles.osgeo.org/wms/vmap0", 
    {
        layers: "basic"
    },
    {
        attribution: 'Metacarta WMS hosted on <a href="http://www.osgeo.org/" target="_blank">osgeo.org<a>'
    }
);
// add the layer to the map
map.addLayers([ol_wms]);

Afterwards, we will create an instance of the GXM.MapPanel, that will show the map fullscreen by default:

new GXM.MapPanel({
    map: map,
    center: [ 
        8, 
        51
    ],
    zoom: 11
});

That should provide you with a very simple GXM.MapPanel that can be adjusted to your likes.

Development

GXM is still in development. You can trac the development on this GeoExt ticket:

Please do not open new seperate tickets for GXM. If you encounter problems, discover bugs or want to comment, please use the above linked ticket.

Credits

The initial development was lead by the following people:

  • Marc Jansen
  • Christian Mayer
  • Cédric Moullet
  • Johannes Weskamm

The code was reviewed in various stages by

  • Bart van den Eijnden
  • Andreas Hocevar
  • Tim Schaub

The first versions were inspired by the work of

The development was funded by

Last modified 6 years ago Last modified on 08/18/11 08:24:10