=================== GeoExt QuickStart =================== 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. Getting GeoExt ============== 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: #. Download GeoExt from :doc:`/downloads`. For the purposes of this quickstart, the development version will be fine. #. Download OpenLayers from http://openlayers.org/. .. note:: GeoExt 0.1 uses OpenLayers 2.8. OpenLayers 2.8 has not been released yet. For now, just use the unstable development version (link directly to http://openlayers.org/dev/OpenLayers.js) #. Download ExtJS 2.2 from `the ExtJS website `_. #. Place both unpacked libraries in a directory that is published by your web server. For this tutorial, I will assume that this is the root of your web server, so that GeoExt.js is at http://localhost/GeoExt/lib/GeoExt.js and ext-all.js is at http://localhost/ext-2.2/ext-all.js #. Now you're ready to use GeoExt in your application! .. 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 :doc:`/downloads`, but advanced users can build their own, further ``optimized_builds``. Basic Example ============= let's build a simple web page that just embeds a map with interactive navigation. #. Include the ExtJS libraries in your web page. .. code-block:: xml #. Create a ``
`` 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: .. code-block:: html The entire source of your page should look something like: .. code-block:: html A Basic GeoExt Page
And that's it! You now have all of GeoExt, ready to bring your geospatial data to life. Go forth and prosper! Going Further ============= 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 :doc:`index`, :doc:`/examples/index` and :doc:`/lib/index`. We also recommend reading :doc:`../primers/ext-primer` and :doc:`../primers/openlayers-primer` to become acquainted with the libraries that form the foundation of GeoExt.