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 | |
---|