Changeset 387

Timestamp:

04/14/09 23:39:20 (1 year ago)

Author:

dwins

Message:

Add scale overlay with scale chooser, scale bar, and a decorative label

Files:

• apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js (modified) (4 diffs)
• apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css (modified) (1 diff)

apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js

@@ -79 +79 @@
-
-        var toolbarItems = this.initMapControlsAndToolbar();
+
+        var mapOverlayPanel = this.initMapOverlay();
-        
-        // place map in panel
@@ -89 +91 @@
-            center: mapConfig.center && new OpenLayers.LonLat(mapConfig.center[0], mapConfig.center[1]),
-            // TODO: update the OpenLayers.Map constructor to accept an initial zoom
-
+
+
+
-        });
-
@@ -99 +103 @@
-            region: 'center',
-            title: "Layers",
-            anchor: "100%, -200",
-            items: [{
-                xtype: "treepanel",
@@ -262 +265 @@
-    showCapabilitiesGrid: function(){
-        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;
-    },
-

apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css

@@ -46 +46 @@
-    font-weight: bold;
-}
+
+.map-overlay>div.x-panel-bwrap>div.x-panel-body>div {
+    display:inline;
+    float:left;
+    margin: 5px;
+}