[Commits] r2700 - in sandbox/gxm/geoext/gxm: examples lib
commits at geoext.org
commits at geoext.org
Tue May 17 17:10:10 CEST 2011
Author: marcjansen
Date: 2011-05-17 17:10:10 +0200 (Tue, 17 May 2011)
New Revision: 2700
Added:
sandbox/gxm/geoext/gxm/examples/buttons.html
sandbox/gxm/geoext/gxm/examples/buttons.js
sandbox/gxm/geoext/gxm/examples/examples.css
Modified:
sandbox/gxm/geoext/gxm/examples/mappanel.html
sandbox/gxm/geoext/gxm/examples/mappanel.js
sandbox/gxm/geoext/gxm/examples/simple.html
sandbox/gxm/geoext/gxm/lib/Button.js
sandbox/gxm/geoext/gxm/lib/LayerList.js
sandbox/gxm/geoext/gxm/lib/MapPanel.js
Log:
- important adjustment to the MapPanel: we now render to a beforehand emptied div created by the Ext.Panel
- This fixes weird pan/pinch issues when a panel had been overlaid by something else (e.g. a LayerList-overlay)
- added a new buttons example
- minors
- next:
- check whether we can have a statefull map
- add a LayerList example
- add tests and documentation
- remove example simple.html as it is becoming useless
Added: sandbox/gxm/geoext/gxm/examples/buttons.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.html (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/buttons.html 2011-05-17 15:10:10 UTC (rev 2700)
@@ -0,0 +1,33 @@
+<!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">
+ <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/lib/OpenLayers.js?mobile"></script>
+
+ <script type="text/javascript" src="../lib/GXM.js"></script>
+ <script type="text/javascript" src="../lib/MapPanel.js"></script>
+ <script type="text/javascript" src="../lib/Button.js"></script>
+ <script type="text/javascript" src="../lib/SegmentedButton.js"></script>
+ <script type="text/javascript" src="../lib/data/model/Layer.js"></script>
+ <script type="text/javascript" src="../lib/data/LayerReader.js"></script>
+ <script type="text/javascript" src="../lib/data/LayerStore.js"></script>
+ <script type="text/javascript" src="../lib/LayerList.js"></script>
+
+ <script type="text/javascript" src="./buttons.js"></script>
+ </head>
+ <body>
+ <!-- TODO: have content here that describes this example -->
+ </body>
+</html>
\ No newline at end of file
Added: sandbox/gxm/geoext/gxm/examples/buttons.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.js (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/buttons.js 2011-05-17 15:10:10 UTC (rev 2700)
@@ -0,0 +1,145 @@
+//TODO: remove eventually
+var log = function(){
+ if (console && console.log) {
+ for (arg in arguments) {
+ console.log(arguments[arg]);
+ }
+ }
+};
+
+var viewport;
+
+Ext.setup({
+ onReady: function(){
+ // OpenLayers specific
+ var map = new OpenLayers.Map({
+ controls: []
+ });
+ var ol_wms = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {
+ layers: "basic"
+ }
+ );
+
+ map.addLayers([ol_wms]);
+
+ var btnClickCallback = function(btn){
+ Ext.Msg.alert('Callback defined in application', 'You tapped the "' + btn.title + '"-button.');
+ };
+
+ var zoomin = new OpenLayers.Control.ZoomIn();
+ var zoomout = new OpenLayers.Control.ZoomOut();
+
+ var btnZoomIn = new GXM.Button({
+ control: zoomin,
+ map: map,
+ title: 'Zoom In',
+ iconCls: 'add',
+ iconMask: true,
+ handler: Ext.createDelegate(btnClickCallback)
+ });
+ var btnZoomOut = {
+ xtype: 'gxm_button',
+ control: zoomout,
+ map: map,
+ title: 'Zoom Out',
+ iconCls: 'minus',
+ iconMask: true,
+ handler: Ext.createDelegate(btnClickCallback)
+ };
+
+ var nav = new OpenLayers.Control.Navigation();
+
+ var btnNavigation = {
+ xtype: 'gxm_segmentedbutton',
+ exclusiveGroup: 'working-on-map',
+ map: map,
+ items: [{
+ text: 'Navigation',
+ control: nav,
+ pressed: true,
+ handler: function(btn, evt, activeState){
+ Ext.Msg.alert('Navigation', 'Navigation is ' + (activeState ? 'active' : 'inactive') + '.');
+ }
+ }]
+ };
+
+ // create a vector layer for drawing
+ var vector = new OpenLayers.Layer.Vector('Vector Layer', {
+ styleMap: new OpenLayers.StyleMap({
+ temporary: OpenLayers.Util.applyDefaults({
+ pointRadius: 16
+ }, OpenLayers.Feature.Vector.style.temporary)
+ })
+ });
+
+ var mapPanel = new GXM.MapPanel({
+ map: map,
+ layers: [vector]
+ });
+
+ var ctrlDrawPoint = new OpenLayers.Control.DrawFeature(
+ vector,
+ OpenLayers.Handler.Point
+ );
+ var ctrlDrawLine = new OpenLayers.Control.DrawFeature(
+ vector,
+ OpenLayers.Handler.Path
+ );
+ var ctrlDrawPoly = new OpenLayers.Control.DrawFeature(
+ vector,
+ OpenLayers.Handler.Polygon
+ );
+
+ var btnDigPoint = {
+ control: ctrlDrawPoint,
+ text: 'Point'
+ };
+ var btnDigLine = {
+ control: ctrlDrawLine,
+ text: 'Line'
+ };
+ var btnDigPoly = {
+ control: ctrlDrawPoly,
+ text: 'Poly'
+ };
+
+ var digGroup = {
+ xtype: 'gxm_segmentedbutton',
+ map: map,
+ exclusiveGroup: 'working-on-map',
+ items: [
+ btnDigPoint,
+ btnDigLine,
+ btnDigPoly
+ ]
+ };
+
+ viewport = new Ext.Panel({
+ fullscreen: true,
+ layout: 'fit',
+ ui: 'light',
+ dockedItems: [{
+ xtype: 'toolbar',
+ dock: 'top',
+ items: [
+ btnZoomIn,
+ btnZoomOut,
+ {xtype: 'spacer'},
+ btnNavigation
+ ]
+ },{
+ xtype: 'toolbar',
+ dock: 'bottom',
+ items: [
+ digGroup
+ ]
+ }],
+ items: [
+ mapPanel
+ ]
+ });
+ }
+});
Added: sandbox/gxm/geoext/gxm/examples/examples.css
===================================================================
--- sandbox/gxm/geoext/gxm/examples/examples.css (rev 0)
+++ sandbox/gxm/geoext/gxm/examples/examples.css 2011-05-17 15:10:10 UTC (rev 2700)
@@ -0,0 +1,16 @@
+pre.example-code {
+ font-weight: bold !important;
+}
+
+span.string {
+ color: darkgreen;
+}
+
+span.number {
+ color: darkblue;
+}
+
+span.comment {
+ color: #800080;
+ font-style: italic
+}
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/mappanel.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.html 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.html 2011-05-17 15:10:10 UTC (rev 2700)
@@ -1,32 +1,17 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <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=false, initial-scale=1.0, maximum-scale=1.0;">
+ <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">
- <style type="text/css">
- pre.example-code {
- font-weight: bold !important;
- }
- span.string {
- color: darkgreen;
- }
- span.number {
- color: darkblue;
- }
- span.comment {
- color: #800080;
- font-style: italic
- }
-
- </style>
+ <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/lib/OpenLayers.js?mobile"></script>
@@ -43,5 +28,6 @@
<script type="text/javascript" src="./mappanel.js"></script>
</head>
<body>
+ <!-- TODO: have content here that describes this example -->
</body>
</html>
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/examples/mappanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/mappanel.js 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/examples/mappanel.js 2011-05-17 15:10:10 UTC (rev 2700)
@@ -23,96 +23,105 @@
map.addLayers([ol_wms]);
- var strS = '<span class="string">',
- strE = '</span>',
- comS = '<span class="comment">',
- comE = '</span>',
- numS = '<span class="number">',
- numE = '</span>';
-
- var ind = ' ';
- var lazyMapPanel = {
- 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>')
+ /**
+ *
+ * @param {Number} idx
+ */
+ 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 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>')
+ };
+ } else if(idx === 1) {
+ card = {
+ xtype: 'gxm_mappanel',
+ layers: [
+ 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>')
+ };
+ } else if(idx === 2) {
+ card = new GXM.MapPanel({
+ layers: [
+ ol_wms.clone()
+ ],
+ center: [
+ 8,
+ 51
+ ],
+ 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>')
+ });
+ } else if(idx === 3) {
+ card = new GXM.MapPanel({
+ layers: [
+ ol_wms.clone()
+ ],
+ 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>')
+ });
+ }
+ return card;
};
- var lazyMapPanelLayers = {
- xtype: 'gxm_mappanel',
- layers: [
- 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>')
- };
-
- var explicitMapPanelCenter = new GXM.MapPanel({
- layers: [
- ol_wms.clone()
- ],
- center: [
- 8,
- 51
- ],
- 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>')
- });
-
- var explicitMapPanelExtent = new GXM.MapPanel({
- layers: [
- ol_wms.clone()
- ],
- 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>')
- });
-
-
// general layout:
viewport = new Ext.TabPanel({
fullscreen: true,
@@ -124,10 +133,10 @@
}
},
items: [
- lazyMapPanel,
- lazyMapPanelLayers,
- explicitMapPanelCenter,
- explicitMapPanelExtent
+ getCard(0),
+ getCard(1),
+ getCard(2),
+ getCard(3)
],
dockedItems: [
{
@@ -149,7 +158,6 @@
},
dock: 'bottom'
}
-
]
});
}
Modified: sandbox/gxm/geoext/gxm/examples/simple.html
===================================================================
--- sandbox/gxm/geoext/gxm/examples/simple.html 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/examples/simple.html 2011-05-17 15:10:10 UTC (rev 2700)
@@ -455,71 +455,72 @@
* ... show / hide list on button click in overlay
* ------------------------------------------------------------------
*/
+//
+// var btnLayerlist = {
+// xtype: 'button',
+// text: 'Layerlist',
+// handler: function(){
+// vp.setActiveItem(1, 'slide');
+// }
+// };
+//
+// var mapPanel = new GXM.MapPanel({
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'bottom',
+// items: [btnLayerlist]
+// }],
+// map: map,
+// controls: new OpenLayers.Control.Navigation(),
+// center: [7, 51],
+// zoom: 7
+// });
+// var layerList = {
+// xtype: 'gxm_layerlist',
+// // call with mapPanel...
+// // mapPanel: mapPanel
+// // ... or with layers and map
+// layers: mapPanel.layers,
+// map: map,
+// listeners: {
+// itemtap: function() {
+// Ext.Msg.alert('Application event "itemtap"', 'You can still register events as usual.');
+// }
+// }
+// };
+// var layerPanel = {
+// fullscreen: true,
+// layout: 'fit',
+// items: [
+// layerList
+// ],
+// dockedItems: [{
+// xtype: 'toolbar',
+// dock: 'top',
+// items: [{
+// text: 'Back',
+// ui: 'back',
+// handler: function(){
+// vp.setActiveItem(0);
+// }
+// }]
+// }]
+// };
+//
+// var vp = new Ext.Panel({
+// fullscreen: true,
+// layout: 'card',
+// items: [
+// mapPanel,
+// layerPanel
+// ]
+// });
+// vp.setActiveItem(0);
- var btnLayerlist = {
- xtype: 'button',
- text: 'Layerlist',
- handler: function(){
- vp.setActiveItem(1, 'slide');
- }
- };
-
- var mapPanel = new GXM.MapPanel({
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'bottom',
- items: [btnLayerlist]
- }],
- map: map,
- controls: new OpenLayers.Control.Navigation(),
- center: [7, 51],
- zoom: 7
- });
- var layerList = {
- xtype: 'gxm_layerlist',
- // call with mapPanel...
- // mapPanel: mapPanel
- // ... or with layers and map
- layers: mapPanel.layers,
- map: map,
- listeners: {
- itemtap: function() {
- Ext.Msg.alert('Application event "itemtap"', 'You can still register events as usual.');
- }
- }
- };
- var layerPanel = {
- fullscreen: true,
- items: [
- layerList
- ],
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'top',
- items: [{
- text: 'Back',
- ui: 'back',
- handler: function(){
- vp.setActiveItem(0);
- }
- }]
- }]
- };
-
- var vp = new Ext.Panel({
- fullscreen: true,
- layout: 'card',
- items: [
- mapPanel,
- layerPanel
- ]
- });
- vp.setActiveItem(0);
-
// DEBUG only
- window.mapPanel = mapPanel;
- window.map = mapPanel.map;
+// window.mapPanel = mapPanel;
+// window.map = mapPanel.map;
}
});
</script>
Modified: sandbox/gxm/geoext/gxm/lib/Button.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/Button.js 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/lib/Button.js 2011-05-17 15:10:10 UTC (rev 2700)
@@ -103,7 +103,6 @@
});
},
onCtrlDeactivate: function(){
- log( ' - onCtrlDeactivate');
}
});
Ext.reg('gxm_button', GXM.Button);
\ No newline at end of file
Modified: sandbox/gxm/geoext/gxm/lib/LayerList.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/LayerList.js 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/lib/LayerList.js 2011-05-17 15:10:10 UTC (rev 2700)
@@ -1,10 +1,5 @@
// requires model/Layer.js
-// needs refactoring:
-// - Layers go to the Mappanel as store
-// - this currently has a map but will soon need a layer store to work on
-//
-
GXM.LayerList = Ext.extend(Ext.List, {
layers: null,
Modified: sandbox/gxm/geoext/gxm/lib/MapPanel.js
===================================================================
--- sandbox/gxm/geoext/gxm/lib/MapPanel.js 2011-05-17 08:02:17 UTC (rev 2699)
+++ sandbox/gxm/geoext/gxm/lib/MapPanel.js 2011-05-17 15:10:10 UTC (rev 2700)
@@ -75,7 +75,30 @@
},
renderMap: function(){
var map = this.map;
- map.render(this.body.dom);
+// JW approach, not working as expected
+//
+// if (this.body && this.body.dom && this.body.dom.addEventListener) {
+// this.body.dom.addEventListener("touchmove", function(evt) {
+// if (evt && evt.preventDefault) {
+// evt.preventDefault();
+// }
+// }, true);
+// }
+//
+//
+// map.render(this.body.dom);
+
+
+ // new approach
+ var me = this;
+ if (me.el && me.el.dom && me.el.dom.firstChild) {
+ Ext.fly(me.el.dom.firstChild).remove();
+ }
+ map.render(me.el.dom);
+
+ // new approach
+
+
if (this.center || this.zoom ) {
// center and/or zoom?
map.setCenter(this.center, this.zoom);
More information about the Commits
mailing list