[Commits] r2298 - sandbox/foss4g2010/src/doc/layout
commits at geoext.org
commits at geoext.org
Wed Sep 1 21:43:21 CEST 2010
Author: pgiraud
Date: 2010-09-01 21:43:21 +0200 (Wed, 01 Sep 2010)
New Revision: 2298
Modified:
sandbox/foss4g2010/src/doc/layout/layout.rst
sandbox/foss4g2010/src/doc/layout/legend.rst
sandbox/foss4g2010/src/doc/layout/tree.rst
Log:
changes made following Andreas suggestions
Modified: sandbox/foss4g2010/src/doc/layout/layout.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/layout.rst 2010-09-01 07:24:11 UTC (rev 2297)
+++ sandbox/foss4g2010/src/doc/layout/layout.rst 2010-09-01 19:43:21 UTC (rev 2298)
@@ -41,42 +41,11 @@
buffer: 0
}
),
- new OpenLayers.Layer.WMS("Water",
- "/geoserver/wms", {
- layers: "topp:tasmania_water_bodies",
- transparent: true,
- format: "image/gif"
- }, {
- isBaseLayer: false,
- buffer: 0
- }
- ),
- new OpenLayers.Layer.WMS("Cities",
- "/geoserver/wms", {
- layers: "topp:tasmania_cities",
- transparent: true,
- format: "image/gif"
- }, {
- isBaseLayer: false,
- buffer: 0
- }
- ),
- new OpenLayers.Layer.WMS("Tasmania Roads",
- "/geoserver/wms", {
- layers: "topp:tasmania_roads",
- transparent: true,
- format: "image/gif"
- }, {
- isBaseLayer: false,
- buffer: 0
- }
- ),
// create a group layer (with several layers in the "layers" param)
// to show how the LayerParamLoader works
new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
"/geoserver/wms", {
layers: [
- "topp:tasmania_state_boundaries",
"topp:tasmania_water_bodies",
"topp:tasmania_cities",
"topp:tasmania_roads"
@@ -128,8 +97,9 @@
activeTab: 0,
items: [tree, legendPanel]
-.. warning::
+Now that the "map panel" is included as an item of a container (the viewport), you don't need to call the render method (or add a renderTo config parameter). This is done automatically.
+Same for tree and legend.
- Don't forget to add a title to the tree panel otherwise you will get ugly empty tab. Also no need to render the panel, the rendering will be done by Ext while doing the layout.
-
Reload your application. You should now see a column on the left with two tabs.
+
+In order to get tabs correctly rendered, you might want to add a title to the tree and legend panels. The given title will be displayed as text in the tab.
Modified: sandbox/foss4g2010/src/doc/layout/legend.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/legend.rst 2010-09-01 07:24:11 UTC (rev 2297)
+++ sandbox/foss4g2010/src/doc/layout/legend.rst 2010-09-01 19:43:21 UTC (rev 2298)
@@ -3,19 +3,18 @@
Create a LegendPanel
====================
-Add a legend to the map is as easy as adding this code:
+Add a legend to the map is as easy as adding to the `map.html` code:
.. code-block:: javascript
var legendPanel = new GeoExt.LegendPanel({
defaults: {
- labelCls: 'mylabel',
style: 'padding:5px'
},
bodyStyle: 'padding:5px'
});
legendPanel.render(document.body);
-The legend panel will change any time you load or unload layers.
+The legend panel will not only change when you load or unload layers, but also when you change layer visibility (which you can do in our application already).
As for the `treePanel`, the last line renders the legend panel inside the body tag of the page. You can use the `renderTo` property as well.
Modified: sandbox/foss4g2010/src/doc/layout/tree.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/tree.rst 2010-09-01 07:24:11 UTC (rev 2297)
+++ sandbox/foss4g2010/src/doc/layout/tree.rst 2010-09-01 19:43:21 UTC (rev 2298)
@@ -60,30 +60,10 @@
isBaseLayer: false,
buffer: 0
}
- ),
- // create a group layer (with several layers in the "layers" param)
- // to show how the LayerParamLoader works
- new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
- "/geoserver/wms", {
- layers: [
- "topp:tasmania_state_boundaries",
- "topp:tasmania_water_bodies",
- "topp:tasmania_cities",
- "topp:tasmania_roads"
- ],
- transparent: true,
- format: "image/gif"
- }, {
- isBaseLayer: false,
- buffer: 0,
- // exclude this layer from layer container nodes
- displayInLayerSwitcher: false,
- visibility: false
- }
)
];
-You need to find where layers array is used in the MapPanel code to use the new one.
+Find the layers config option in the MapPanel definition in map.html and replace it with the one above.
Also, since we don't want all layers to be considered as overlays we need to set
options for our map. Add the following to your `GeoExt.MapPanel` configuration object:
@@ -92,8 +72,8 @@
map: new OpenLayers.Map({allOverlays: false})
-Node Types
-----------
+Layer Nodes and Containers
+--------------------------
In GeoExt, the way to display the list of layers in a tree is as simple as
using a ``Ext.tree.TreePanel`` populated with nodes with a specific type. Several
@@ -114,28 +94,17 @@
.. code-block:: javascript
var node = new GeoExt.tree.LayerNode({
- layer: "Tasmania (Group Layer)"
+ layer: "Tasmania Roads"
});
- tree.appendChild(node);
+ tree.root.appendChild(node);
-For layers that have a params property (like ``OpenLayers.Layer.WMS``), if a `loader` config is given with a `param` property, then subnodes will be created using the given param.
-In the example below, sub-nodes are created using the `LAYERS` parameter. Another example of usage could be `CQL_FILTER`.
+With the code above, we created one checkbox for one OpenLayers Layer. We should be able to do the same for the other layers in our application.
-You can try it with the "Tasmania" layer:
+But instead of this, one can use helpers to do it in an easier way. By helpers, we mean containers. Containers are specific node types made to easily render layers as groups.
-.. code-block:: javascript
+The more generic one is ``GeoExt.tree.LayerContainer``. This container automatically pulls in `all` the layers from the map.
+In `map.html` you can remove the code you used for the `LayerNode` and replace it by the following:
- var node = new GeoExt.tree.LayerNode({
- layer: "Tasmania (Group Layer)",
- loader: {
- param: "LAYERS"
- }
- });
-
-One can also use containers to easily render layers as groups.
-``GeoExt.tree.LayerContainer`` automatically pulls in all the layers from the
-map.
-
.. code-block:: javascript
var node = new GeoExt.tree.LayerContainer({
@@ -143,16 +112,12 @@
});
tree.root.appendChild(node);
-.. note::
+Two more containers are also available. They both extend the `LayerContainer` and are preconfigured with a specific filter:
- You may have noticed that the "Tasmania" layer does not appear in the container. This is because displayInLayerSwitcher is set to false in the layer's options.
-
-Other containers with a preconfigured filter are also available:
-
- ``GeoExt.tree.BaseLayerContainer`` will be populated only with layers that have isBaseLayer set to true,
- ``GeoExt.tree.OverlayLayerContainer`` will be populated only with layers that have isBaseLayer set to false.
-Remplace the code above by the following:
+Replace the code above by the following:
.. code-block:: javascript
@@ -165,6 +130,11 @@
});
tree.root.appendChild(node);
+The `BaseLayerContainer` is populated with nodes with a radio button whereas the `OverlayLayerContainer` is populated with nodes with a checkbox.
+
+Node Types
+----------
+
In the same manner as `xtype` for components, one is invited to use shortcuts for node types. Respectively ``gx_layer``, ``gx_baselayercontainer`` and ``gx_overlaylayercontainer``.
.. code-block:: javascript
@@ -176,15 +146,8 @@
nodeType: "gx_overlaylayercontainer",
text: "Overlay Layers",
expanded: true
- }, {
- nodeType: "gx_layer",
- layer: "Tasmania (Group Layer)",
- loader: {
- param: "LAYERS"
- }
}];
var tree = new Ext.tree.TreePanel({
- border: false,
loader: new Ext.tree.TreeLoader({
applyLoader: false
}),
@@ -195,10 +158,45 @@
});
tree.render(document.body);
-.. note::
- You may ask why we don't need to refer to any mapPanel instance. Thanks to an internal method the MapPanel is guessed, the first instance found actually.
-
The `expanded` parameter allows you to expand tree when loaded.
A ``Ext.tree.TreeLoader`` with a `applyLoader` param set to false is required to not interfer with loaders of nodes further down the tree hierarchy.
+Layer Groups
+------------
+
+In the above examples, we were managing several `OpenLayers` layers. Most of them are provided by the same WMS service. It could then be a good idea to get them grouped in a single `OpenLayers` layers.
+
+The code below is intended to replace the three latest layers in the `MapPanel` configuration in `map.html`.
+
+.. code-block:: javascript
+
+ new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
+ "/geoserver/wms", {
+ layers: [
+ "topp:tasmania_water_bodies",
+ "topp:tasmania_cities",
+ "topp:tasmania_roads"
+ ]
+ }, {
+ isBaseLayer: false
+ }
+ )
+
+Updating the application in the browser, we now have only one checkbox for the group. Rather, we would now like to have one checkbox for each layer defined in the `layers` array.
+
+We'll be able to do it using the `LayerNode` we already used earlier, but this time giving a `loader` configuration with a `param` option which specifies the layer parameter to rely on. Here the ``OpenLayers.Layer.WMS`` layer parameter we want to rely on is the `LAYERS` parameter.
+
+The following code can be used to replace the `OverlayLayerContainer` code:
+
+.. code-block:: javascript
+
+ {
+ nodeType: "gx_layer",
+ layer: 'Tasmania (Group Layer)',
+ loader: {
+ param: 'LAYERS'
+ }
+ }
+
+Let's reload the browser page and confirm that you now have a tree node with sub-nodes for water bodies, cities and roads.
More information about the Commits
mailing list