[Commits] r387 - in apps/opengeo/geoexplorer/trunk: lib theme

[commits at geoext.org]

Author: dwins
Date: 2009-04-14 23:39:20 +0200 (Tue, 14 Apr 2009)
New Revision: 387

Modified:
   apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
   apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css
Log:
Add scale overlay with scale chooser, scale bar, and a decorative label


Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-04-14 21:38:00 UTC (rev 386)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-04-14 21:39:20 UTC (rev 387)
@@ -78,6 +78,8 @@
         this.initLayers();
 
         var toolbarItems = this.initMapControlsAndToolbar();
+
+        var mapOverlayPanel = this.initMapOverlay();
         
         // place map in panel
         var mapConfig = this.initialConfig.map || {};
@@ -88,7 +90,9 @@
             // TODO: update the OpenLayers.Map constructor to accept an initial center
             center: mapConfig.center && new OpenLayers.LonLat(mapConfig.center[0], mapConfig.center[1]),
             // TODO: update the OpenLayers.Map constructor to accept an initial zoom
-            zoom: mapConfig.zoom
+            zoom: mapConfig.zoom,
+            layout: 'anchor',
+            items: [mapOverlayPanel]
         });
 
         this.initCapabilitiesGrid();
@@ -98,7 +102,6 @@
             border: false,
             region: 'center',
             title: "Layers",
-            anchor: "100%, -200",
             items: [{
                 xtype: "treepanel",
                 border: false,
@@ -263,6 +266,80 @@
         this.capGrid.show();
     },
 
+    initMapOverlay: function() {
+        var scaleLinePanel = new Ext.Panel({
+            cls: 'olControlScaleLine',
+            border: false,
+            bodyStyle: 'position: relative'
+        });
+
+        scaleLinePanel.on('render', function(){
+            var scaleLine = new OpenLayers.Control.ScaleLine({
+                div: scaleLinePanel.body.dom
+            });
+
+            this.map.addControl(scaleLine);
+            scaleLine.activate();
+        }, this);
+
+        var zoomStore = new GeoExt.data.ScaleStore({
+            map: this.map
+        });
+
+        var zoomSelector = new Ext.form.ComboBox({
+            emptyText: 'Zoom level',
+            tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>',
+            editable: false,
+            triggerAction: 'all',
+            mode: 'local',
+            store: zoomStore,
+            width: 90
+        });
+
+        zoomSelector.on('select', function(combo, record, index) {
+                this.map.zoomTo(record.data.level);
+            },
+            this
+        );
+
+        this.map.events.register('zoomend', this, function() {
+            var scale = zoomStore.queryBy(function(record){
+                return this.map.getZoom() == record.data.level;
+            });
+
+            if (scale.length > 0) {
+                scale = scale.items[0];
+                zoomSelector.setValue("1 : " + parseInt(scale.data.scale));
+            } else {
+                if (!zoomSelector.rendered) return;
+                zoomSelector.clearValue();
+            }
+        });
+
+        var mapOverlay = new Ext.Panel({
+            // title: "Overlay",
+            cls: 'map-overlay',
+            style: {
+                'z-index': 1000, 
+                position: 'absolute', 
+                right: 10, 
+                bottom: 10
+            },
+            items: [
+                {border: false, html: "hi there"},
+                scaleLinePanel,
+                zoomSelector
+            ]
+        });
+
+        mapOverlay.on("afterlayout", function(){
+            scaleLinePanel.body.dom.style.position = 'relative';
+            scaleLinePanel.body.dom.style.display = 'inline';
+        }, this);
+
+        return mapOverlay;
+    },
+
     initMapControlsAndToolbar: function() {
 
         // create a navigation control

Modified: apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css
===================================================================
--- apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css	2009-04-14 21:38:00 UTC (rev 386)
+++ apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css	2009-04-14 21:39:20 UTC (rev 387)
@@ -45,3 +45,9 @@
     margin-left: 20px; /* Default GS legend swatch size */
     font-weight: bold;
 }
+
+.map-overlay>div.x-panel-bwrap>div.x-panel-body>div {
+    display:inline;
+    float:left;
+    margin: 5px;
+}