Creating a Map Window

In GeoExt, following the conventions of the underlying Ext JS framework, a map is wrapped into an Ext.Panel. The map is an OpenLayers.Map object.

It is important to understand that Ext JS encourages a web application paradigm, as opposed to a web page paradigm. This means that we won’t create markup, so the basic ingredients of our map window will be:

Working Example

Let’s take a look at a fully working example of a GeoExt map window.

        <title>GeoExt Map Window</title>

        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script src="openlayers/lib/OpenLayers.js"></script>

        <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>

        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";

        Ext.onReady(function() {
            new Ext.Window({
                title: "My Map Window",
                height: 290,
                width: 528,
                layout: "fit",
                items: [{
                    xtype: "gx_mappanel",
                    layers: [new OpenLayers.Layer.WMS(
                        {layers: "world"}


  1. Copy the text above into a new file called map.html, and save it in the root of the workshop folder.
  2. Open the working application in your web browser: http://localhost:8080/geoserver/www/gx_tutorial/map.html

A working map window displaying imagery of the world.

Having successfully created our first GeoExt application, we’ll continue by looking more closely at the parts.