1 | .. highlight:: javascript |
---|
2 | |
---|
3 | ============================ |
---|
4 | ``MapPanel`` Tutorial |
---|
5 | ============================ |
---|
6 | |
---|
7 | The :class:`GeoExt.MapPanel` is the heart of most GeoExt applications, |
---|
8 | displaying rendered data. Leveraging the OpenLayers JavaScript mapping library, |
---|
9 | it can display rendered tiles from OWS services, perform client-side rendering |
---|
10 | in the browser, and use tiles from popular mapping services such as Google Maps |
---|
11 | or Virtual Earth. In this tutorial, we explore ways that developers can |
---|
12 | customize the MapPanel. |
---|
13 | |
---|
14 | .. note:: |
---|
15 | It is recommended that you follow the :doc:`quickstart` tutorial |
---|
16 | before moving on to this one. It really is quick; we'll wait for you. |
---|
17 | |
---|
18 | A Basic MapPanel |
---|
19 | ================ |
---|
20 | |
---|
21 | Taking a look at the example code from the quickstart tutorial, we can see a |
---|
22 | very basic map configuration: |
---|
23 | |
---|
24 | .. code-block:: javascript |
---|
25 | :linenos: |
---|
26 | |
---|
27 | var map = new OpenLayers.Map(); |
---|
28 | var layer = new OpenLayers.Layer.WMS( |
---|
29 | "Global Imagery", |
---|
30 | "http://maps.opengeo.org/geowebcache/service/wms", |
---|
31 | {layers: "bluemarble"} |
---|
32 | ); |
---|
33 | map.addLayer(layer); |
---|
34 | |
---|
35 | var mapPanel = new GeoExt.MapPanel({ |
---|
36 | renderTo: 'gxmap', |
---|
37 | height: 400, |
---|
38 | width: 600, |
---|
39 | map: map, |
---|
40 | title: 'A Simple GeoExt Map' |
---|
41 | }); |
---|
42 | |
---|
43 | Looking at this code we can see a few things going on: |
---|
44 | |
---|
45 | In **line 1** we instantiate an :class:`OpenLayers.Map`. This isn't required by |
---|
46 | the MapPanel (it will create a Map for you if none is provided) but we want to |
---|
47 | customize our map a bit. |
---|
48 | |
---|
49 | In **lines 2-6** we create a new :class:`OpenLayers.Layer`. This particular |
---|
50 | layer is a WMS layer, which uses tiles from the Blue Marble layer at |
---|
51 | http://maps.opengeo.org/. |
---|
52 | |
---|
53 | In **line 7** we add our new layer to the map. |
---|
54 | |
---|
55 | In **lines 9-15** we create a new map panel with several options: |
---|
56 | |
---|
57 | ``renderTo`` |
---|
58 | This works the same as ``renderTo`` in a normal :class:`Ext.Panel`; it |
---|
59 | can be an id string, DOM node, or :class:`Ext.Element` telling the |
---|
60 | MapPanel where on the page it should insert itself. |
---|
61 | |
---|
62 | ``height``, ``width`` |
---|
63 | These tell the map panel how much large it should draw itself. |
---|
64 | |
---|
65 | ``map`` |
---|
66 | This is an :class:`OpenLayers.Map` which will be used as the actual map |
---|
67 | inside the panel. |
---|
68 | |
---|
69 | ``title`` |
---|
70 | This is the normal ``title`` property for ExtJS components. It will be |
---|
71 | rendered nicely across the top of the panel. |
---|
72 | |
---|
73 | Working with the MapPanel |
---|
74 | ========================= |
---|
75 | While using ``OpenLayers.Map.addLayer()`` to add layers is a convenient way to |
---|
76 | customize the map, a hand-coded, static list of map layers is not always what we |
---|
77 | want. In order to make manipulating the layer list more accessible to ExtJS |
---|
78 | widgets, the MapPanel exposes a `layers` property which is an |
---|
79 | :class:`Ext.data.Store` that will automatically be updated when layers are |
---|
80 | added, removed, changed, or reordered, with all of the Ext events that go with |
---|
81 | it. We can use this to, for example, populate an :class:`Ext.grid.GridPanel` |
---|
82 | with a live list of layers in the map:: |
---|
83 | |
---|
84 | new Ext.grid.GridPanel({ |
---|
85 | renderTo: 'layerlist', |
---|
86 | height: 200, width: 200, |
---|
87 | autoScroll: true, |
---|
88 | store: mapPanel.layers, |
---|
89 | columns: [{name: 'name', heading: 'Name'}] |
---|
90 | }); |
---|
91 | |
---|
92 | |
---|
93 | In the HTML, you'll need to add a ``div`` for the grid panel to render itself in: |
---|
94 | |
---|
95 | .. code-block:: html |
---|
96 | |
---|
97 | <div id='layerlist'></div> |
---|
98 | |
---|
99 | More information on the :class:`Ext.grid.GridPanel` is available from the `ExtJS |
---|
100 | API documentation |
---|
101 | <http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel>`_. |
---|
102 | |
---|
103 | .. note:: |
---|
104 | This code is only meant as an example to demonstrate the map panel's |
---|
105 | integration with Ext. An :class:`Ext.tree.TreePanel` with |
---|
106 | :class:`GeoExt.tree.LayerNode`\ s is a a much nicer way to display the layers in |
---|
107 | a map, with optional support for hiding/showing layers and reordering. The |
---|
108 | TreePanel approach is discussed in the :doc:`layertree-tutorial`. |
---|