[76] | 1 | =================== |
---|
| 2 | GeoExt QuickStart |
---|
| 3 | =================== |
---|
| 4 | |
---|
| 5 | Welcome to GeoExt! This document is intended to help you get started |
---|
| 6 | with GeoExt. With GeoExt, you can start from nothing and have a rich |
---|
| 7 | mapping application in seconds. |
---|
| 8 | |
---|
| 9 | |
---|
| 10 | Getting GeoExt |
---|
| 11 | ============== |
---|
| 12 | |
---|
| 13 | GeoExt is built on top of the robust OpenLayers JavaScript mapping |
---|
| 14 | library and the rich graphical components of ExtJS. For licensing |
---|
| 15 | reasons, ExtJS cannot be included in the GeoExt download, so preparing |
---|
| 16 | GeoExt for use on your own web pages is a multi-step process: |
---|
| 17 | |
---|
| 18 | #. Download GeoExt from the :doc:`downloads page </downloads>`. For the purposes |
---|
| 19 | of this quickstart, the development version will be fine. |
---|
| 20 | |
---|
| 21 | #. Download OpenLayers 2.10 or later from http://openlayers.org/. |
---|
| 22 | |
---|
| 23 | #. Download ExtJS 3.2 from `the ExtJS website <http://www.sencha.com/products/js/download.php>`_. |
---|
| 24 | |
---|
| 25 | #. Place both unpacked libraries in a directory that is published by your web |
---|
| 26 | server. For this tutorial, I will assume that this is the root of your web |
---|
| 27 | server, so that GeoExt.js is at http://localhost/GeoExt/lib/GeoExt.js and |
---|
| 28 | ext-all.js is at http://localhost/ext-3.2.1/ext-all.js |
---|
| 29 | |
---|
| 30 | #. Now you're ready to use GeoExt in your application! |
---|
| 31 | |
---|
| 32 | .. note:: For production environments, the GeoExt team recommends that |
---|
| 33 | you use compressed and minified builds of GeoExt and ExtJS to |
---|
| 34 | optimize the download size of your page. A generic minified build |
---|
| 35 | containing all of GeoExt is available from the |
---|
| 36 | :doc:`downloads page </downloads>`, but advanced users can build their |
---|
| 37 | own. |
---|
| 38 | |
---|
| 39 | |
---|
| 40 | |
---|
| 41 | Basic Example |
---|
| 42 | ============= |
---|
| 43 | |
---|
| 44 | Let's build a simple web page that just embeds a map with interactive |
---|
| 45 | navigation. |
---|
| 46 | |
---|
| 47 | #. Include the ExtJS libraries in your web page. |
---|
| 48 | |
---|
| 49 | .. code-block:: html |
---|
| 50 | |
---|
| 51 | <script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script> |
---|
| 52 | <script src="ext-3.2.1/ext-all.js" type="text/javascript"></script> |
---|
| 53 | <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/ext-all.css"></link> |
---|
| 54 | <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script> |
---|
| 55 | <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script> |
---|
| 56 | <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link> |
---|
| 57 | |
---|
| 58 | #. Create a ``<div>`` element in your web page with its ``id`` |
---|
| 59 | attribute set to ``gxmap``. We will use the ``id`` to attach a |
---|
| 60 | GeoExt component to the ``div``. |
---|
| 61 | |
---|
| 62 | #. Attach a ``MapPanel`` object to the ``div`` with some JavaScript code: |
---|
| 63 | |
---|
| 64 | .. code-block:: html |
---|
| 65 | |
---|
| 66 | <script type="text/javascript"> |
---|
| 67 | Ext.onReady(function() { |
---|
| 68 | var map = new OpenLayers.Map(); |
---|
| 69 | var layer = new OpenLayers.Layer.WMS( |
---|
| 70 | "Global Imagery", |
---|
| 71 | "http://maps.opengeo.org/geowebcache/service/wms", |
---|
| 72 | {layers: "bluemarble"} |
---|
| 73 | ); |
---|
| 74 | map.addLayer(layer); |
---|
| 75 | |
---|
| 76 | new GeoExt.MapPanel({ |
---|
| 77 | renderTo: 'gxmap', |
---|
| 78 | height: 400, |
---|
| 79 | width: 600, |
---|
| 80 | map: map, |
---|
| 81 | title: 'A Simple GeoExt Map' |
---|
| 82 | }); |
---|
| 83 | }); |
---|
| 84 | </script> |
---|
| 85 | |
---|
| 86 | The entire source of your page should look something like: |
---|
| 87 | |
---|
| 88 | .. code-block:: html |
---|
| 89 | |
---|
| 90 | <html> |
---|
| 91 | <head> |
---|
| 92 | |
---|
| 93 | <title> A Basic GeoExt Page </title> |
---|
| 94 | <script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script> |
---|
| 95 | <script src="ext-3.2.1/ext-all.js" type="text/javascript"></script> |
---|
| 96 | <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/ext-all.css"></link> |
---|
| 97 | <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script> |
---|
| 98 | <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script> |
---|
| 99 | <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link> |
---|
| 100 | |
---|
| 101 | <script type="text/javascript"> |
---|
| 102 | Ext.onReady(function() { |
---|
| 103 | var map = new OpenLayers.Map(); |
---|
| 104 | var layer = new OpenLayers.Layer.WMS( |
---|
| 105 | "Global Imagery", |
---|
| 106 | "http://maps.opengeo.org/geowebcache/service/wms", |
---|
| 107 | {layers: "bluemarble"} |
---|
| 108 | ); |
---|
| 109 | map.addLayer(layer); |
---|
| 110 | |
---|
| 111 | new GeoExt.MapPanel({ |
---|
| 112 | renderTo: 'gxmap', |
---|
| 113 | height: 400, |
---|
| 114 | width: 600, |
---|
| 115 | map: map, |
---|
| 116 | title: 'A Simple GeoExt Map' |
---|
| 117 | }); |
---|
| 118 | }); |
---|
| 119 | </script> |
---|
| 120 | </head> |
---|
| 121 | <body> |
---|
| 122 | <div id="gxmap"></div> |
---|
| 123 | </body> |
---|
| 124 | </html> |
---|
| 125 | |
---|
| 126 | And that's it! You now have all of GeoExt, ready to bring your geospatial data |
---|
| 127 | to life. Go forth and prosper! |
---|
| 128 | |
---|
| 129 | Going Further |
---|
| 130 | ============= |
---|
| 131 | |
---|
| 132 | From here, there are a wide variety of options available for making |
---|
| 133 | customized, highly interactive mapping applications with GeoExt. To |
---|
| 134 | learn more take a look at :doc:`index`, :ref:`examples <examples>` and |
---|
| 135 | :doc:`/lib/index`. |
---|
| 136 | |
---|
| 137 | We also recommend reading :doc:`../primers/ext-primer` and |
---|
| 138 | :doc:`../primers/openlayers-primer` to become acquainted with the libraries that |
---|
| 139 | form the foundation of GeoExt. |
---|
| 140 | |
---|