[76] | 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`. |
---|