[Commits] r2300 - in sandbox/foss4g2010/src/doc: . _static layout
commits at geoext.org
commits at geoext.org
Thu Sep 2 14:13:13 CEST 2010
Author: yjacolin
Date: 2010-09-02 14:13:13 +0200 (Thu, 02 Sep 2010)
New Revision: 2300
Added:
sandbox/foss4g2010/src/doc/_static/
sandbox/foss4g2010/src/doc/_static/map_layergroup.html
sandbox/foss4g2010/src/doc/_static/map_legend.html
sandbox/foss4g2010/src/doc/_static/map_simpletree.html
sandbox/foss4g2010/src/doc/_static/map_viewport.html
sandbox/foss4g2010/src/doc/layout/layout_legend.png
sandbox/foss4g2010/src/doc/layout/layout_tree_group.png
sandbox/foss4g2010/src/doc/layout/layout_tree_onelayer.png
sandbox/foss4g2010/src/doc/layout/layout_tree_simple.png
sandbox/foss4g2010/src/doc/layout/layout_viewport.png
Modified:
sandbox/foss4g2010/src/doc/conf.py
sandbox/foss4g2010/src/doc/layout/layout.rst
sandbox/foss4g2010/src/doc/layout/legend.rst
sandbox/foss4g2010/src/doc/layout/tree.rst
Log:
Add screenshots and html files
Added: sandbox/foss4g2010/src/doc/_static/map_layergroup.html
===================================================================
--- sandbox/foss4g2010/src/doc/_static/map_layergroup.html (rev 0)
+++ sandbox/foss4g2010/src/doc/_static/map_layergroup.html 2010-09-02 12:13:13 UTC (rev 2300)
@@ -0,0 +1,92 @@
+<html>
+ <head>
+ <title>GeoExt Map Window</title>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+<!-- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> -->
+<!-- <script type="text/javascript" src="ext/ext-all.js"></script> -->
+<!-- <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> -->
+<!-- <script src="openlayers/lib/OpenLayers.js"></script> -->
+
+<!-- <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>-->
+
+ <script type="text/javascript">
+ Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
+
+ Ext.onReady(function() {
+
+ var layers = [
+ new OpenLayers.Layer.WMS("Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms", {
+ layers: "bluemarble"
+ }, {
+ buffer: 0,
+ visibility: false
+ }
+ ),
+ // 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
+ }
+ )
+ ];
+
+ var mappanel = new GeoExt.MapPanel({
+ extent: new OpenLayers.Bounds(
+ 143.83482400000003, -43.648056,
+ 148.47914100000003, -39.573891
+ ),
+ map: new OpenLayers.Map({allOverlays: false}),
+ layers: layers,
+ width: 400,
+ height: 400
+ });
+ mappanel.render(document.body);
+
+ var layerList = [{
+ nodeType: "gx_baselayercontainer",
+ text: "Base Layers"
+ }, {
+ nodeType: "gx_layer",
+ layer: 'Tasmania (Group Layer)',
+ loader: {
+ param: 'LAYERS'
+ }
+ }];
+
+ var tree = new Ext.tree.TreePanel({
+ loader: new Ext.tree.TreeLoader({
+ applyLoader: false
+ }),
+ root: {
+ children: layerList
+ },
+ rootVisible: false
+ });
+ tree.render(document.body);
+
+ });
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Added: sandbox/foss4g2010/src/doc/_static/map_legend.html
===================================================================
--- sandbox/foss4g2010/src/doc/_static/map_legend.html (rev 0)
+++ sandbox/foss4g2010/src/doc/_static/map_legend.html 2010-09-02 12:13:13 UTC (rev 2300)
@@ -0,0 +1,111 @@
+<html>
+ <head>
+ <title>GeoExt Map Window</title>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+<!-- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="ext/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
+ <script src="openlayers/lib/OpenLayers.js"></script>
+
+ <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>-->
+
+ <script type="text/javascript">
+ Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
+
+ Ext.onReady(function() {
+
+ var layers = [
+ new OpenLayers.Layer.WMS("Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms", {
+ layers: "bluemarble"
+ }, {
+ buffer: 0,
+ visibility: false
+ }
+ ),
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ 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
+ }
+ )
+ ];
+
+ var mappanel = new GeoExt.MapPanel({
+ extent: new OpenLayers.Bounds(
+ 143.83482400000003, -43.648056,
+ 148.47914100000003, -39.573891
+ ),
+ map: new OpenLayers.Map({allOverlays: false}),
+ layers: layers,
+ width: 400,
+ height: 400
+ });
+ mappanel.render(document.body);
+
+ var tree = new Ext.tree.TreePanel({
+ root: {},
+ rootVisible: false
+ });
+
+// var node = new GeoExt.tree.LayerNode({
+// layer: "Tasmania Roads"
+// });
+// tree.root.appendChild(node);
+
+ var node = new GeoExt.tree.LayerContainer({
+ text: "All layers"
+ });
+ tree.root.appendChild(node);
+ tree.render(document.body);
+
+ var legendPanel = new GeoExt.LegendPanel({
+ defaults: {
+ style: 'padding:5px'
+ },
+ bodyStyle: 'padding:5px'
+ });
+ legendPanel.render(document.body);
+
+ });
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Added: sandbox/foss4g2010/src/doc/_static/map_simpletree.html
===================================================================
--- sandbox/foss4g2010/src/doc/_static/map_simpletree.html (rev 0)
+++ sandbox/foss4g2010/src/doc/_static/map_simpletree.html 2010-09-02 12:13:13 UTC (rev 2300)
@@ -0,0 +1,102 @@
+<html>
+ <head>
+ <title>GeoExt Map Window</title>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+<!-- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="ext/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
+ <script src="openlayers/lib/OpenLayers.js"></script>
+
+ <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>-->
+
+ <script type="text/javascript">
+ Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
+
+ Ext.onReady(function() {
+
+ var layers = [
+ new OpenLayers.Layer.WMS("Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms", {
+ layers: "bluemarble"
+ }, {
+ buffer: 0,
+ visibility: false
+ }
+ ),
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ 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
+ }
+ )
+ ];
+
+ var mappanel = new GeoExt.MapPanel({
+ extent: new OpenLayers.Bounds(
+ 143.83482400000003, -43.648056,
+ 148.47914100000003, -39.573891
+ ),
+ map: new OpenLayers.Map({allOverlays: false}),
+ layers: layers,
+ height: 400,
+ width: 400
+ });
+ mappanel.render(document.body);
+ var tree = new Ext.tree.TreePanel({
+ root: {},
+ rootVisible: false
+ });
+ tree.render(document.body);
+
+ var node = new GeoExt.tree.LayerNode({
+ layer: "Tasmania Roads"
+ });
+ tree.root.appendChild(node);
+
+// var node = new GeoExt.tree.LayerContainer({
+// text: "All layers"
+// });
+// tree.root.appendChild(node);
+
+ });
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Added: sandbox/foss4g2010/src/doc/_static/map_viewport.html
===================================================================
--- sandbox/foss4g2010/src/doc/_static/map_viewport.html (rev 0)
+++ sandbox/foss4g2010/src/doc/_static/map_viewport.html 2010-09-02 12:13:13 UTC (rev 2300)
@@ -0,0 +1,123 @@
+<html>
+ <head>
+ <title>GeoExt Map Window</title>
+
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://dev.geoext.org/trunk/geoext/lib/GeoExt.js"></script>
+<!-- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="ext/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
+ <script src="openlayers/lib/OpenLayers.js"></script>
+
+ <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>-->
+
+ <script type="text/javascript">
+ Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
+
+ Ext.onReady(function() {
+ var layers = [
+ new OpenLayers.Layer.WMS("Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms", {
+ layers: "bluemarble"
+ }, {
+ buffer: 0,
+ visibility: false
+ }
+ ),
+ new OpenLayers.Layer.WMS("Tasmania State Boundaries",
+ "/geoserver/wms", {
+ layers: "topp:tasmania_state_boundaries"
+ }, {
+ 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_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
+ }
+ )
+ ];
+
+ var mappanel = new GeoExt.MapPanel({
+ extent: new OpenLayers.Bounds(
+ 143.83482400000003, -43.648056,
+ 148.47914100000003, -39.573891
+ ),
+ map: new OpenLayers.Map({allOverlays: false}),
+ layers: layers,
+ region: 'center'
+ });
+
+ var layerList = [{
+ nodeType: "gx_baselayercontainer",
+ text: "Base Layers"
+ }, {
+ nodeType: "gx_layer",
+ layer: 'Tasmania (Group Layer)',
+ loader: {
+ param: 'LAYERS'
+ }
+ }];
+
+ var tree = new Ext.tree.TreePanel({
+ loader: new Ext.tree.TreeLoader({
+ applyLoader: false
+ }),
+ root: {
+ children: layerList
+ },
+ rootVisible: false
+ });
+
+
+ var legendPanel = new GeoExt.LegendPanel({
+ defaults: {
+ labelCls: 'mylabel',
+ style: 'padding:5px'
+ },
+ bodyStyle: 'padding:5px'
+ });
+
+ new Ext.Viewport({
+ layout: 'border',
+ items: [
+ mappanel,
+ {
+ xtype: 'tabpanel',
+ region: 'west',
+ width: 250,
+ activeTab: 0,
+ items: [{
+ title: "Tree",
+ items: [tree]
+ },{
+ title: "Legend",
+ items: [legendPanel]
+ }]
+ }
+ ]
+ });
+ });
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Modified: sandbox/foss4g2010/src/doc/conf.py
===================================================================
--- sandbox/foss4g2010/src/doc/conf.py 2010-09-02 08:31:43 UTC (rev 2299)
+++ sandbox/foss4g2010/src/doc/conf.py 2010-09-02 12:13:13 UTC (rev 2300)
@@ -120,7 +120,7 @@
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
-#html_static_path = ['_static']
+html_static_path = ['_static']
# If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
# using the given strftime format.
Modified: sandbox/foss4g2010/src/doc/layout/layout.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/layout.rst 2010-09-02 08:31:43 UTC (rev 2299)
+++ sandbox/foss4g2010/src/doc/layout/layout.rst 2010-09-02 12:13:13 UTC (rev 2300)
@@ -103,3 +103,9 @@
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.
+
+.. figure:: layout_viewport.png
+
+ A map and legend in a viewport
+
+See `map.html <../_static/map_viewport.html>`.
\ No newline at end of file
Added: sandbox/foss4g2010/src/doc/layout/layout_legend.png
===================================================================
(Binary files differ)
Property changes on: sandbox/foss4g2010/src/doc/layout/layout_legend.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/foss4g2010/src/doc/layout/layout_tree_group.png
===================================================================
(Binary files differ)
Property changes on: sandbox/foss4g2010/src/doc/layout/layout_tree_group.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/foss4g2010/src/doc/layout/layout_tree_onelayer.png
===================================================================
(Binary files differ)
Property changes on: sandbox/foss4g2010/src/doc/layout/layout_tree_onelayer.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/foss4g2010/src/doc/layout/layout_tree_simple.png
===================================================================
(Binary files differ)
Property changes on: sandbox/foss4g2010/src/doc/layout/layout_tree_simple.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/foss4g2010/src/doc/layout/layout_viewport.png
===================================================================
(Binary files differ)
Property changes on: sandbox/foss4g2010/src/doc/layout/layout_viewport.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: sandbox/foss4g2010/src/doc/layout/legend.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/legend.rst 2010-09-02 08:31:43 UTC (rev 2299)
+++ sandbox/foss4g2010/src/doc/layout/legend.rst 2010-09-02 12:13:13 UTC (rev 2300)
@@ -3,7 +3,7 @@
Create a LegendPanel
====================
-Add a legend to the map is as easy as adding to the `map.html` code:
+Add a legend to the map is as easy as adding to the `map.html <../static/map_legend.html>` code:
.. code-block:: javascript
@@ -18,3 +18,7 @@
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.
+
+.. figure:: layout_legend.png
+
+ A legend in a panel
\ No newline at end of file
Modified: sandbox/foss4g2010/src/doc/layout/tree.rst
===================================================================
--- sandbox/foss4g2010/src/doc/layout/tree.rst 2010-09-02 08:31:43 UTC (rev 2299)
+++ sandbox/foss4g2010/src/doc/layout/tree.rst 2010-09-02 12:13:13 UTC (rev 2300)
@@ -100,10 +100,14 @@
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.
+.. figure:: layout_tree_onelayer.png
+
+ One layer node
+
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.
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:
+In `map.html <../_static/map_simpletree.html>`_ you can remove the code you used for the `LayerNode` and replace it by the following:
.. code-block:: javascript
@@ -112,6 +116,11 @@
});
tree.root.appendChild(node);
+
+.. figure:: layout_tree_simple.png
+
+ a simple layer tree
+
Two more containers are also available. They both extend the `LayerContainer` and are preconfigured with a specific filter:
- ``GeoExt.tree.BaseLayerContainer`` will be populated only with layers that have isBaseLayer set to true,
@@ -167,7 +176,7 @@
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`.
+The code below is intended to replace the three latest layers in the `MapPanel` configuration in `map.html <../_static/map_layergroup.html>`_.
.. code-block:: javascript
@@ -200,3 +209,7 @@
}
Let's reload the browser page and confirm that you now have a tree node with sub-nodes for water bodies, cities and roads.
+
+.. figure:: layout_tree_group.png
+
+ Layer in a group
\ No newline at end of file
More information about the Commits
mailing list