[Commits] r2827 - sandbox/gxm/geoext/gxm/examples
commits at geoext.org
commits at geoext.org
Wed Aug 24 13:40:41 CEST 2011
Author: marcjansen
Date: 2011-08-24 13:40:41 +0200 (Wed, 24 Aug 2011)
New Revision: 2827
Added:
sandbox/gxm/geoext/gxm/examples/example-utility.js
Removed:
sandbox/gxm/geoext/gxm/examples/wiki.html
Modified:
sandbox/gxm/geoext/gxm/examples/buttons.html
sandbox/gxm/geoext/gxm/examples/buttons.js
sandbox/gxm/geoext/gxm/examples/examples.css
sandbox/gxm/geoext/gxm/examples/layerlist.html
sandbox/gxm/geoext/gxm/examples/layerlist.js
sandbox/gxm/geoext/gxm/examples/mappanel.html
sandbox/gxm/geoext/gxm/examples/mappanel.js
sandbox/gxm/geoext/gxm/examples/state.html
sandbox/gxm/geoext/gxm/examples/state.js
Log:
[gxm] examples cleanup
Modified: sandbox/gxm/geoext/gxm/examples/buttons.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.html 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/buttons.html 2011-08-24 11:40:41 UTC (rev 2827)
@@ -19,14 +19,18 @@
<!-- This file loads all relevant files -->
<script type="text/javascript" src="../lib/GXM.loader.js"></script>
- <!-- This references a singlefile build than can be created e.g. with
- 'make examplelib' inside the 'build' directory
- <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
- -->
-
+ <script type="text/javascript" src="./example-utility.js"></script>
<script type="text/javascript" src="./buttons.js"></script>
</head>
<body>
- <!-- TODO: have content here that describes this example -->
+ <h1 id="title">GXM: The GXM.Button-class</h1>
+ <div id="keywords">
+ Button, Segmented Button, Control
+ </div>
+ <div id="description">
+ This example shows the use of the GXM.Button-class to generate
+ buttons that can be used to manage and control
+ OpenLayers.Control-instances.
+ </div>
</body>
</html>
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/buttons.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.js 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/buttons.js 2011-08-24 11:40:41 UTC (rev 2827)
@@ -1,86 +1,13 @@
-//TODO: remove eventually
-var log = function(){
- if (console && console.log) {
- for (arg in arguments) {
- console.log(arguments[arg]);
- }
- }
-};
+// intentially global for better debugging
+var map,
+ mapPanel,
+ viewport;
-var viewport;
-
-
-
Ext.setup({
onReady: function(){
- // for this example:
- var getExampleCode = function() {
- var strS = '<span class="string">',
- strE = '</span>',
- comS = '<span class="comment">',
- comE = '</span>',
- numS = '<span class="number">',
- numE = '</span>',
- keyS = '<span class="keyword">',
- keyE = '</span>',
- boolS = '<span class="boolean">',
- boolE = '</span>',
- ind = ' ',
- varCode = keyS + 'var' + keyE,
- newCode = keyS + 'new' + keyE;
-
- return [
- '<pre class="example-code">'+
- comS + '// usually you generate a OpenLayers control and' + comE,
- comS + '// pass it over to the GXM.Button-constructor:' + comE,
- varCode + ' zoomin = ' + newCode + ' OpenLayers.Control.ZoomIn();',
- varCode + ' btnZoomIn = ' + newCode + ' GXM.Button( {',
- ind + 'control: zoomin,',
- ind + 'map: map, ' + comS + '// adds the control to the map' + comE,
- ind + 'title: ' + strS + '"Zoom In"' + strE,
- '} );',
- '',
- comS + '// in the above code a single-click control' + comE,
- comS + '// (OpenLayers.Control.TYPE_BUTTON), is managed, so' + comE,
- comS + '// the controls trigger()-method will execute ' + comE,
- comS + '// whenever a button-tap occurs.' + comE,
- '',
- comS + '// If you manage controls that are active/inactive' + comE,
- comS + '// (for example a TouchNavigation-control) the buttons' + comE,
- comS + '// "pressedCls" will reflect the buttons state.' + comE,
- comS + '// the "pressed"-configuration is used to autoactivate the control:' + comE,
- varCode + ' nav = ' + newCode + ' OpenLayers.Control.TouchNavigation();',
- varCode + ' btnNav = ' + newCode + ' GXM.Button( {',
- ind + 'control: nav,',
- ind + 'map: map,',
- ind + 'title: ' + strS + '"Navigation",' + strE,
- ind + 'pressed: ' + boolS + 'true' + boolE + ', ' + comS + '// autoactivate this control' + comE,
- ind + 'pressedCls: ' + strS + '"my-btn-pressed-cls",' + strE,
- '',
- comS + '// Use the "exclusiveGroup" configuration to make sure' + comE,
- comS + '// that from a group of controls only one is active at' + comE,
- comS + '// any time. The digitizing buuttons and the navigation' + comE,
- comS + '// buttons on this page are an example: ' + comE,
- varCode + ' ctrlDrawPoint = ' + newCode + ' OpenLayers.Control.DrawFeature(',
- ind + comS + "// more OpenLayers-configuration" + comE,
- ');',
- varCode + ' ctrlNav = ' + newCode + ' OpenLayers.Control.TouchNavigation();',
- varCode + ' btnNav = ' + newCode + ' GXM.Button( {',
- ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE,
- ind + 'control: ctrlDrawPoint',
- ind + comS + "// more GXM.Button-configuration" + comE,
- '} );',
- varCode + ' btnDigi = ' + newCode + ' GXM.Button( {',
- ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE,
- ind + 'control: ctrlNav',
- ind + comS + "// more GXM.Button-configuration" + comE,
- '} );' +
- '</pre>'
- ].join("\n");
- };
// OpenLayers specific
- var map = new OpenLayers.Map({
+ map = new OpenLayers.Map({
controls: []
});
var ol_wms = new OpenLayers.Layer.WMS(
@@ -152,7 +79,7 @@
})
});
- var mapPanel = new GXM.MapPanel({
+ mapPanel = new GXM.MapPanel({
map: map,
layers: [vector]
});
@@ -249,27 +176,9 @@
this.removeAllFeatures();
});
-
-
// A button to show relevant code parts
+ var btnSource = example.utility.getSourceCodeButton('buttons');
- var btnSource = {
- xtype: 'button',
- text: 'Source',
- handler: function(){
- var overlay = new Ext.Panel({
- floating: true,
- modal: true,
- centered: false,
- styleHtmlContent: true,
- scroll: 'both',
- html: getExampleCode()
- });
- overlay.showBy(this);
- }
- };
-
-
viewport = new Ext.Panel({
fullscreen: true,
layout: 'fit',
Added: sandbox/gxm/geoext/gxm/examples/example-utility.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/example-utility.js (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/example-utility.js 2011-08-24 11:40:41 UTC (rev 2827)
@@ -0,0 +1,204 @@
+// this holds methods that are being shared by the examples
+Ext.ns('example');
+
+example.utility = {
+ /**
+ * Returns a string of relevant code for an example by an identifier.
+ */
+ getExampleCode : function(exampleKey){
+ var strS = '<span class="string">',
+ strE = '</span>',
+ comS = '<span class="comment">',
+ comE = '</span>',
+ numS = '<span class="number">',
+ numE = '</span>',
+ keyS = '<span class="keyword">',
+ keyE = '</span>',
+ boolS = '<span class="boolean">',
+ boolE = '</span>',
+ ind = ' ',
+ varCode = keyS + 'var' + keyE,
+ newCode = keyS + 'new' + keyE,
+ lines = [];
+
+ lines.push('<pre class="example-code">');
+
+ switch(exampleKey){
+ case 'state':
+ lines.push(comS + '// To have a map that keeps track of it\'s current state' + comE);
+ lines.push(comS + '// simply give the map a OpenLayers.Control.Permalink.' + comE);
+ lines.push(comS + '// This page has such a control with "anchor: true",' + comE);
+ lines.push(comS + '// which results in the current map center and zoom' + comE);
+ lines.push(comS + '// being stored as parameters after the "#"-sign' + comE);
+ lines.push(comS + '// in this pages URL.' + comE);
+ lines.push(varCode + ' map = ' + newCode + ' OpenLayers.Map( {');
+ lines.push(ind + 'controls: [');
+ lines.push(ind + ind + 'new OpenLayers.Control.Permalink( {');
+ lines.push(ind + ind + ind + 'anchor: ' + boolS + 'true' + boolE);
+ lines.push(ind + ind + '} )');
+ lines.push(ind + ']');
+ lines.push('} );');
+ lines.push(varCode + ' mapPanel = ' + newCode + ' GXM.MapPanel( {');
+ lines.push(ind + 'map: map');
+ lines.push('} );');
+ lines.push('');
+ lines.push(comS + '// If you bookmark the current page after zooming' + comE);
+ lines.push(comS + '// and panning around and revisit this page through' + comE);
+ lines.push(comS + '// your bookmark, you should see the same map' + comE);
+ lines.push(comS + '// that was visible when you made the bookmark.' + comE);
+ break;
+
+ case 'buttons':
+ lines.push(comS + '// usually you generate a OpenLayers control and' + comE);
+ lines.push(comS + '// pass it over to the GXM.Button-constructor:' + comE);
+ lines.push(varCode + ' zoomin = ' + newCode + ' OpenLayers.Control.ZoomIn();');
+ lines.push(varCode + ' btnZoomIn = ' + newCode + ' GXM.Button( {');
+ lines.push(ind + 'control: zoomin,');
+ lines.push(ind + 'map: map, ' + comS + '// adds the control to the map' + comE);
+ lines.push(ind + 'title: ' + strS + '"Zoom In"' + strE);
+ lines.push('} );');
+ lines.push('');
+ lines.push(comS + '// in the above code a single-click control' + comE);
+ lines.push(comS + '// (OpenLayers.Control.TYPE_BUTTON), is managed, so' + comE);
+ lines.push(comS + '// the controls trigger()-method will execute ' + comE);
+ lines.push(comS + '// whenever a button-tap occurs.' + comE);
+ lines.push('');
+ lines.push(comS + '// If you manage controls that are active/inactive' + comE);
+ lines.push(comS + '// (for example a TouchNavigation-control) the buttons' + comE);
+ lines.push(comS + '// "pressedCls" will reflect the buttons state.' + comE);
+ lines.push(comS + '// the "pressed"-configuration is used to autoactivate the control:' + comE);
+ lines.push(varCode + ' nav = ' + newCode + ' OpenLayers.Control.TouchNavigation();');
+ lines.push(varCode + ' btnNav = ' + newCode + ' GXM.Button( {');
+ lines.push(ind + 'control: nav,');
+ lines.push(ind + 'map: map,');
+ lines.push(ind + 'title: ' + strS + '"Navigation",' + strE);
+ lines.push(ind + 'pressed: ' + boolS + 'true' + boolE + ', ' + comS + '// autoactivate this control' + comE);
+ lines.push(ind + 'pressedCls: ' + strS + '"my-btn-pressed-cls",' + strE);
+ lines.push('');
+ lines.push(comS + '// Use the "exclusiveGroup" configuration to make sure' + comE);
+ lines.push(comS + '// that from a group of controls only one is active at' + comE);
+ lines.push(comS + '// any time. The digitizing buuttons and the navigation' + comE);
+ lines.push(comS + '// buttons on this page are an example: ' + comE);
+ lines.push(varCode + ' ctrlDrawPoint = ' + newCode + ' OpenLayers.Control.DrawFeature(');
+ lines.push(ind + comS + "// more OpenLayers-configuration" + comE);
+ lines.push(');');
+ lines.push(varCode + ' ctrlNav = ' + newCode + ' OpenLayers.Control.TouchNavigation();');
+ lines.push(varCode + ' btnNav = ' + newCode + ' GXM.Button( {');
+ lines.push(ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE);
+ lines.push(ind + 'control: ctrlDrawPoint');
+ lines.push(ind + comS + "// more GXM.Button-configuration" + comE);
+ lines.push('} );');
+ lines.push(varCode + ' btnDigi = ' + newCode + ' GXM.Button( {');
+ lines.push(ind + 'exclusiveGroup:' + strS + '"working-on-map",' + strE);
+ lines.push(ind + 'control: ctrlNav');
+ lines.push(ind + comS + "// more GXM.Button-configuration" + comE);
+ lines.push('} );');
+ break;
+
+ case 'layerlist':
+ lines.push(comS + '// Use the "xtype"-configuration string "gxm_layerlist"' + comE);
+ lines.push(comS + '// to create a LayerList with default styling: ' + comE);
+ lines.push(varCode + ' myLayerList = {');
+ lines.push(ind + 'xtype: ' + strS + '"gxm_layerlist"' + strE + ',');
+ lines.push(ind + 'mapPanel: myMapPanel ' + comS + '// an instance of GXM.MapPanel' + comE);
+ lines.push('};');
+ lines.push('');
+ lines.push(comS + '// You can still register usual event listeners,'+ comE);
+ lines.push(comS + '// e.g. for the "itemtap"-event of the LayerList:'+ comE);
+ lines.push(varCode + ' myLayerList = {');
+ lines.push(ind + comS + '// standard configuration, see above' + comE);
+ lines.push(ind + 'listeners: [');
+ lines.push(ind + ind + 'scope: ' + keyS + 'this' + keyE+ ',');
+ lines.push(ind + ind + 'itemtap: ' + keyS + 'function' + keyE + '() {');
+ lines.push(ind + ind + ind + comS + '// your method...' + comE);
+ lines.push(ind + ind + '}');
+ lines.push(ind + ']');
+ lines.push('};');
+ lines.push('');
+ lines.push(comS + '// The following example shows how to create a LayerList'+ comE);
+ lines.push(comS + '// with direct instanciation of GXM.LayerList.'+ comE);
+ lines.push(comS + '// Here we use the configuration "layers" that takes an'+ comE);
+ lines.push(comS + '// instance of GXM.data.LayerStore:'+ comE);
+ lines.push(varCode +' anotherLayerList = ' + newCode + ' GXM.LayerList( {');
+ lines.push(ind + 'layers: myLayerStore,');
+ lines.push(ind + 'map: myOpenLayersMap');
+ lines.push('} );');
+ break;
+
+ case 'mappanel-simple':
+ lines.push(ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',');
+ lines.push(ind + comS + '// A reference to' + comE);
+ lines.push(ind + comS + '// an OpenLayers.Map' + comE);
+ lines.push(ind + 'map : map');
+ break;
+
+ case 'mappanel-layers':
+ lines.push(ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',');
+ lines.push(ind + 'layers : [');
+ lines.push(ind + ind + comS + '// A reference to' + comE);
+ lines.push(ind + ind + comS + '// an OpenLayers.Layer' + comE);
+ lines.push(ind + ind + 'myLayer');
+ lines.push(ind + ']');
+ lines.push('}');
+ break;
+
+ case 'mappanel-center':
+ lines.push(ind + 'layers : [');
+ lines.push(ind + ind + 'myLayer');
+ lines.push(ind + '],');
+ lines.push(ind + comS + '// pass as array, as string' + comE);
+ lines.push(ind + comS + '// or OpenLayers.LonLat-instance' + comE);
+ lines.push(ind + 'center : [');
+ lines.push(ind + ind + numS + '8' + numE + ',');
+ lines.push(ind + ind + numS + '51' + numE);
+ lines.push(ind + '],');
+ lines.push(ind + comS + '// pass an integer as zoom' + comE);
+ lines.push(ind + 'zoom : ' + numS + '11' + numE);
+ lines.push('} )');
+ break;
+
+ case 'mappanel-extent':
+ lines.push(ind + 'layers : [');
+ lines.push(ind + ind + 'myLayer');
+ lines.push(ind + '],');
+ lines.push(ind + comS + '// pass as array, as string' + comE);
+ lines.push(ind + comS + '// or OpenLayers.Bounds-instance' + comE);
+ lines.push(ind + 'extent : ' + strS + '"7,51,8,52"' + strE);
+ lines.push('} )');
+
+ default:
+ lines.push(comS + '// No documentation for "' + exampleKey + '"' + comE);
+ }
+
+ lines.push('</pre>');
+
+ // concatenate the array of code lines
+ return lines.join("\n");
+ },
+
+ /**
+ * Gets a plain object to show relevant source code by an identifier.
+ */
+ getSourceCodeButton: function(exampleKey) {
+ var sourceCode = example.utility.getExampleCode(exampleKey);
+ var btn = {
+ xtype: 'button',
+ text: 'Source',
+ handler: function(){
+ if (this.overlay && this.overlay instanceof Ext.Panel) {
+ this.overlay.destroy();
+ }
+ this.overlay = new Ext.Panel({
+ floating: true,
+ modal: true,
+ centered: false,
+ styleHtmlContent: true,
+ scroll: 'both',
+ html: sourceCode
+ });
+ this.overlay.showBy(this);
+ }
+ }
+ return btn;
+ }
+};
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/examples.css
===================================================================
--- sandbox/gxm/geoext/gxm/examples/examples.css 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/examples.css 2011-08-24 11:40:41 UTC (rev 2827)
@@ -27,18 +27,25 @@
color: #EE82EE;
}
+#title,
+#keywords,
+#description {
+ display: none;
+}
div.olControlAttribution {
- border-top: 2px solid rgba(50,50,50,0.65);
- border-left: 2px solid rgba(50,50,50,0.65);
+ border-top: 2px solid rgba(70,70,70,0.65);
+ border-left: 2px solid rgba(70,70,70,0.65);
border-top-left-radius: 10px;
position: relative;
bottom: 0;
right: 0;
- padding: 5px 8px;
- background-color: rgba(50,50,50,0.35);
+ padding: 3px 5px;
+ background-color: rgba(70,70,70,0.35);
+ color: black;
+ text-shadow: 0 0 2px #fff;
}
div.olControlAttribution a {
- color: darkblue
+ color: navy
}
Modified: sandbox/gxm/geoext/gxm/examples/layerlist.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/layerlist.html 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/layerlist.html 2011-08-24 11:40:41 UTC (rev 2827)
@@ -13,7 +13,6 @@
<link rel="stylesheet" href="../css/gxm.css" type="text/css">
<link rel="stylesheet" href="./examples.css" type="text/css">
-
<script type="text/javascript" src="../external/sencha-touch-1.1.0/sencha-touch.js"></script>
<script type="text/javascript" src="../external/OpenLayers.r11966/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
@@ -21,14 +20,17 @@
<!-- This file loads all relevant files -->
<script type="text/javascript" src="../lib/GXM.loader.js"></script>
- <!-- This references a singlefile build than can be created e.g. with
- 'make examplelib' inside the 'build' directory
- <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
- -->
-
+ <script type="text/javascript" src="./example-utility.js"></script>
<script type="text/javascript" src="./layerlist.js"></script>
</head>
<body>
- <!-- TODO: have content here that describes this example -->
+ <h1 id="title">GXM: The GXM.LayerList-class</h1>
+ <div id="keywords">
+ List, LayerList, LayerSwitcher, list of layers
+ </div>
+ <div id="description">
+ This example shows the use of the GXM.LayerList-class to generate
+ a list to manage and interact with the Layers of a GXM.MapPanel.
+ </div>
</body>
</html>
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/layerlist.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/layerlist.js 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/layerlist.js 2011-08-24 11:40:41 UTC (rev 2827)
@@ -1,55 +1,10 @@
-//TODO: remove eventually
-var log = function(){
- if (console && console.log) {
- for (arg in arguments) {
- console.log(arguments[arg]);
- }
- }
-};
+// intentially global for better debugging
+var map,
+ mapPanel,
+ viewport;
-var viewport;
-
Ext.setup({
onReady: function(){
- // for this example:
- var getExampleCode = function(){
- var strS = '<span class="string">',
- strE = '</span>',
- comS = '<span class="comment">',
- comE = '</span>',
- numS = '<span class="number">',
- numE = '</span>',
- keyS = '<span class="keyword">',
- keyE = '</span>',
- boolS = '<span class="boolean">',
- boolE = '</span>',
- ind = ' ',
- varCode = keyS + 'var' + keyE,
- newCode = keyS + 'new' + keyE;
- return [
- '<pre class="example-code">' +
- comS + '// Use the "xtype"-configuration string "gxm_layerlist"' + comE,
- comS + '// to create a LayerList with default styling: ' + comE,
- varCode + ' myLayerList = {',
- ind + 'xtype: ' + strS + '"gxm_layerlist"' + strE + ',',
- ind + 'mapPanel: myMapPanel ' + comS + '// an instance of GXM.MapPanel' + comE,
- '};',
- '',
- comS + '// You can still register usual evbent listeners,'+ comE,
- comS + '// e.g. for the "itemtap"-event of the LayerList:'+ comE,
- varCode + ' myLayerList = {',
- ind + comS + '// standard configuration, see above' + comE,
- ind + 'listeners: [',
- ind + ind + 'scope: ' + keyS + 'this' + keyE+ ',',
- ind + ind + 'itemtap: ' + keyS + 'function' + keyE + '() {',
- ind + ind + ind + comS + '// your method...' + comE,
- ind + ind + '}',
- ind + ']',
- '};',
- '</pre>'
- ].join("\n");
- };
-
OpenLayers.Layer.Vector.prototype.renderers = ["SVG2", "VML", "Canvas"];
var gg = new OpenLayers.Projection("EPSG:4326");
@@ -133,7 +88,7 @@
}
};
- var mapPanel = new GXM.MapPanel({
+ mapPanel = new GXM.MapPanel({
map: map,
title: 'MapPanel',
center: new OpenLayers.LonLat(8,51).transform(gg, sm),
@@ -160,16 +115,17 @@
items: [layerList]
};
- var sourcePanel = {
- xtype: 'panel',
- title: 'Source',
- fullscreen: true,
- styleHtmlContent: true,
- scroll: 'both',
- html: getExampleCode()
- };
+// var sourcePanel = {
+// xtype: 'panel',
+// title: 'Source',
+// fullscreen: true,
+// styleHtmlContent: true,
+// scroll: 'both',
+// html: example.utility.getExampleCode('layerlist')
+// };
+ var btnSource = example.utility.getSourceCodeButton('layerlist')
- var vp = new Ext.TabPanel({
+ viewport = new Ext.TabPanel({
tabBar: {
dock: 'top',
layout: {
@@ -182,14 +138,15 @@
xtype: 'toolbar',
dock: 'bottom',
items: [
- btnLayerlist
+ btnLayerlist,
+ {xtype: 'spacer'},
+ btnSource
]
}
],
fullscreen: true,
layout: 'card',
- items: [mapPanel, layerPanel, sourcePanel]
+ items: [mapPanel, layerPanel]
});
-
}
});
Modified: sandbox/gxm/geoext/gxm/examples/mappanel.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.html 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.html 2011-08-24 11:40:41 UTC (rev 2827)
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>GXM: Examples of the GXM.MapPanel-class </title>
+ <title>GXM: Examples of the GXM.MapPanel-class</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -19,14 +19,18 @@
<!-- This file loads all relevant files -->
<script type="text/javascript" src="../lib/GXM.loader.js"></script>
- <!-- This references a singlefile build than can be created e.g. with
- 'make examplelib' inside the 'build' directory
- <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
- -->
-
+ <script type="text/javascript" src="./example-utility.js"></script>
<script type="text/javascript" src="./mappanel.js"></script>
</head>
<body>
- <!-- TODO: have content here that describes this example -->
+ <h1 id="title">GXM: Examples of the GXM.MapPanel-class</h1>
+ <div id="keywords">
+ Map, MapPanel
+ </div>
+ <div id="description">
+ This example shows the use of the GXM.MapPanel-class to generate
+ a component that renders an OpenLayers.Map in a way it is easily
+ embedable into other Sench Touch components.
+ </div>
</body>
</html>
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/mappanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.js 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.js 2011-08-24 11:40:41 UTC (rev 2827)
@@ -1,18 +1,11 @@
-//TODO: remove eventually
-var log = function(){
- if ( console && console.log ) {
- for ( arg in arguments ) {
- console.log(arguments[arg]);
- }
- }
-};
-
-var viewport;
+// intentially global for better debugging
+var map,
+ viewport;
Ext.setup({
onReady: function(){
- // OpenLayers specific
- var map = new OpenLayers.Map({
+ // OpenLayers specific setup
+ map = new OpenLayers.Map({
controls: [
new OpenLayers.Control.TouchNavigation(),
new OpenLayers.Control.Attribution()
@@ -32,33 +25,16 @@
map.addLayers([ol_wms]);
/**
- *
- * @param {Number} idx
+ * Helper method to get a tab card by index
*/
- var getCard = function(idx){
- var strS = '<span class="string">',
- strE = '</span>',
- comS = '<span class="comment">',
- comE = '</span>',
- numS = '<span class="number">',
- numE = '</span>',
- ind = ' ';
-
+ var getCard = function(idx){
var card;
if (idx === 0) {
card = {
xtype: 'gxm_mappanel',
map: map,
title: 'MapPanel',
- sourceCode: [
- '<pre class="example-code">{',
- ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',',
- ind + comS + '// A reference to' + comE,
- ind + comS + '// an OpenLayers.Map' + comE,
- ind + 'map : map',
- '}',
- '</pre>'
- ].join('<br>')
+ sourceCode: example.utility.getExampleCode('mappanel-simple')
};
} else if(idx === 1) {
card = {
@@ -67,17 +43,7 @@
ol_wms.clone()
],
title: '… layers',
- sourceCode: [
- '<pre class="example-code">{',
- ind + 'xtype : ' + strS + '"gxm_mappanel"' + strE + ',',
- ind + 'layers : [',
- ind + ind + comS + '// A reference to' + comE,
- ind + ind + comS + '// an OpenLayers.Layer' + comE,
- ind + ind + 'myLayer',
- ind + ']',
- '}',
- '</pre>'
- ].join('<br>')
+ sourceCode: example.utility.getExampleCode('mappanel-layers')
};
} else if(idx === 2) {
card = new GXM.MapPanel({
@@ -90,22 +56,7 @@
],
zoom: 11,
title: '… center',
- sourceCode: [
- '<pre class="example-code">new GXM.MapPanel( {',
- ind + 'layers : [',
- ind + ind + 'myLayer',
- ind + '],',
- ind + comS + '// pass as array, as string' + comE,
- ind + comS + '// or OpenLayers.LonLat-instance' + comE,
- ind + 'center : [',
- ind + ind + numS + '8' + numE + ',',
- ind + ind + numS + '51' + numE,
- ind + '],',
- ind + comS + '// pass an integer as zoom' + comE,
- ind + 'zoom : ' + numS + '11' + numE,
- '} )',
- '</pre>'
- ].join('<br>')
+ sourceCode: example.utility.getExampleCode('mappanel-center')
});
} else if(idx === 3) {
card = new GXM.MapPanel({
@@ -114,17 +65,7 @@
],
extent: '7,51,8,52',
title: '… extent',
- sourceCode: [
- '<pre class="example-code">new GXM.MapPanel( {',
- ind + 'layers : [',
- ind + ind + 'myLayer',
- ind + '],',
- ind + comS + '// pass as array, as string' + comE,
- ind + comS + '// or OpenLayers.Bounds-instance' + comE,
- ind + 'extent : ' + strS + '"7,51,8,52"' + strE,
- '} )',
- '</pre>'
- ].join('<br>')
+ sourceCode: example.utility.getExampleCode('mappanel-extent')
});
}
return card;
Modified: sandbox/gxm/geoext/gxm/examples/state.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/state.html 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/state.html 2011-08-24 11:40:41 UTC (rev 2827)
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>GXM: state</title>
+ <title>GXM: A stateful MapPanel</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -19,14 +19,19 @@
<!-- This file loads all relevant files -->
<script type="text/javascript" src="../lib/GXM.loader.js"></script>
- <!-- This references a singlefile build than can be created e.g. with
- 'make examplelib' inside the 'build' directory
- <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
- -->
-
+ <script type="text/javascript" src="./example-utility.js"></script>
<script type="text/javascript" src="./state.js"></script>
</head>
<body>
- <!-- TODO: have content here that describes this example -->
+ <h1 id="title">GXM: A stateful MapPanel</h1>
+ <div id="keywords">
+ stateful, state
+ </div>
+ <div id="description">
+ This example shows the use of the OpenLayers.Control.Permalink
+ for the OpenLayers.Map that is used by an instance of the
+ GXM.MapPanel-class to have a stateful map that recenters and zooms
+ according to URL parameters.
+ </div>
</body>
</html>
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/state.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/state.js 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/state.js 2011-08-24 11:40:41 UTC (rev 2827)
@@ -1,18 +1,13 @@
-//TODO: remove eventually
-var log = function(){
- if (console && console.log) {
- for (arg in arguments) {
- console.log(arguments[arg]);
- }
- }
-};
+// intentially global for better debugging
+var map,
+ mapPanel,
+ viewport;
-var mapPanel;
-
Ext.setup({
onReady: function(){
+
// OpenLayers specific
- var map = new OpenLayers.Map({
+ map = new OpenLayers.Map({
controls: [
new OpenLayers.Control.TouchNavigation(),
new OpenLayers.Control.Attribution(),
@@ -39,7 +34,42 @@
layers: [ol_wms]
});
+ // A button to show relevant code parts
+ var btnSource = example.utility.getSourceCodeButton('state')
+ // A reload button:
+ var btnReload = {
+ xtype: 'button',
+ text: 'Reload',
+ handler: function(){
+ Ext.Msg.confirm(
+ "Reload page?",
+ "The map should have the same center and zoom after reloading.",
+ function(clicked){
+ if (clicked === "yes") {
+ location.reload();
+ }
+ }
+ );
+ }
+ };
+ viewport = new Ext.Panel({
+ fullscreen: true,
+ layout: 'fit',
+ items: [
+ mapPanel
+ ],
+ dockedItems: [{
+ ui: 'light',
+ xtype: 'toolbar',
+ dock: 'top',
+ items: [
+ btnReload,
+ {xtype: 'spacer'},
+ btnSource
+ ]
+ }]
+ });
}
});
Deleted: sandbox/gxm/geoext/gxm/examples/wiki.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/wiki.html 2011-08-24 11:38:23 UTC (rev 2826)
+++ sandbox/gxm/geoext/gxm/examples/wiki.html 2011-08-24 11:40:41 UTC (rev 2827)
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
- <title>GXM: The GXM.Button- and SegmentedButton-class</title>
-
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
- <meta name="apple-mobile-web-app-capable" content="yes">
-
- <link rel="stylesheet" href="../external/sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
- <link rel="stylesheet" href="../external/OpenLayers.r11966/theme/default/style.css" type="text/css">
- <link rel="stylesheet" href="../css/gxm.css" type="text/css">
-
- <script type="text/javascript" src="../external/sencha-touch-1.1.0/sencha-touch.js"></script>
- <script type="text/javascript" src="../external/OpenLayers.r11966/OpenLayers.js"></script>
-
- <!-- This file loads all relevant files -->
- <script type="text/javascript" src="../lib/GXM.loader.js"></script>
-
- <!-- This references a singlefile build than can be created e.g. with
- 'make examplelib' inside the 'build' directory
- <script type="text/javascript" src="../lib/GXM.closurized.js"></script>
- -->
-
- <script type="text/javascript">
-Ext.setup({
- onReady: function(){
- // create a map
-var map = new OpenLayers.Map({
- controls: [
- new OpenLayers.Control.TouchNavigation(),
- new OpenLayers.Control.Attribution()
- ]
-});
-// create a layer
-var ol_wms = new OpenLayers.Layer.WMS(
- "OpenLayers WMS",
- "http://vmap0.tiles.osgeo.org/wms/vmap0",
- {
- layers: "basic"
- },
- {
- attribution: 'Metacarta WMS hosted on <a href="http://www.osgeo.org/" target="_blank">osgeo.org<a>'
- }
-);
-// add the layer to the map
-map.addLayers([ol_wms]);
-
-new GXM.MapPanel({
- map: map,
- center: [
- 8,
- 51
- ],
- zoom: 11
-});
-
-
- }
-});
- </script>
- </head>
- <body>
- <!-- TODO: have content here that describes this example -->
- </body>
-</html>
\ No newline at end of file
More information about the Commits
mailing list