Welcome to GeoExt! This document is intended to help you get started with GeoExt. With GeoExt, you can start from nothing and have a rich mapping application in seconds.
GeoExt is built on top of the robust OpenLayers JavaScript mapping library and the rich graphical components of ExtJS. For licensing reasons, ExtJS cannot be included in the GeoExt download, so preparing GeoExt for use on your own web pages is a multi-step process:
Note
For production environments, the GeoExt team recommends that you use compressed and minified builds of GeoExt and ExtJS to optimize the download size of your page. A generic minified build containing all of GeoExt is available from the downloads page, but advanced users can build their own.
Let’s build a simple web page that just embeds a map with interactive navigation.
Include the ExtJS libraries in your web page.
<script src="ext-3.3.1/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"></link>
Create a <div> element in your web page with its id attribute set to gxmap. We will use the id to attach a GeoExt component to the div.
Attach a MapPanel object to the div with some JavaScript code:
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo: 'gxmap',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
The entire source of your page should look something like:
<html>
<head>
<title> A Basic GeoExt Page </title>
<script src="ext-3.3.1/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo: 'gxmap',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>
And that’s it! You now have all of GeoExt, ready to bring your geospatial data to life. Go forth and prosper!
From here, there are a wide variety of options available for making customized, highly interactive mapping applications with GeoExt. To learn more take a look at Tutorials, examples and API Reference.
We also recommend reading Primer: Ext and Primer: OpenLayers to become acquainted with the libraries that form the foundation of GeoExt.