[Commits] r225 - sandbox/opengeo/drake/trunk/apps/geoexplorer

[commits at geoext.org]

Author: dwins
Date: 2009-03-16 16:11:16 +0100 (Mon, 16 Mar 2009)
New Revision: 225

Modified:
   sandbox/opengeo/drake/trunk/apps/geoexplorer/index.html
Log:
Add getfeatureinfo control to GeoExplorer.


Modified: sandbox/opengeo/drake/trunk/apps/geoexplorer/index.html
===================================================================
--- sandbox/opengeo/drake/trunk/apps/geoexplorer/index.html	2009-03-13 20:02:33 UTC (rev 224)
+++ sandbox/opengeo/drake/trunk/apps/geoexplorer/index.html	2009-03-16 15:11:16 UTC (rev 225)
@@ -22,18 +22,94 @@
             GeoExplorer = {
                 load: function() {
                     this.map = new OpenLayers.Map();
+                    this.selectionLayer = new OpenLayers.Layer.Vector('Selection', { });
                     this.map.addLayers([
-                    new OpenLayers.Layer.WMS("TOPP States", 
-                    '/geoserver/wms' ,{
-                        layers: 'topp:states'
-                        }, {
-                        isBaseLayer: true
-                    })
+                        new OpenLayers.Layer.WMS("TOPP States", 
+                        '/geoserver/wms' ,{
+                            layers: 'topp:states,sf:restricted',
+                            format: 'image/png'
+                            }, {
+                            isBaseLayer: true
+                        }),
+                        this.selectionLayer
                     ]);
 
+                    var identify = new OpenLayers.Control.WMSGetFeatureInfo('/geoserver/wms', {
+                        title: 'Identify features by clicking',
+                        layers: 'topp:states',
+                        format: new OpenLayers.Format.WMSGetFeatureInfo({
+                            typeName: 'states', 
+                            featureNS: 'http://www.openplans.org/topp'
+                        })
+                    });
+
+                    var highlight = new OpenLayers.Control.WMSGetFeatureInfo('/geoserver/wms', {
+                        hover: true,
+                        title: 'Highlight features by hovering',
+                        layers: 'topp:states',
+                        infoFormat: 'application/vnd.ogc.gml',
+                        format: new OpenLayers.Format.WMSGetFeatureInfo({
+                            typeName: 'states', 
+                            featureNS: 'http://www.openplans.org/topp'
+                        })
+                    });
+
+                    identify.events.register('getfeatureinfo', this,
+                        function(evt) { 
+                            var html = evt.features && evt.features.length
+                                ? 'Found ' + evt.features.length + ' features' 
+                                : evt.text;
+                            var win = new Ext.Window({
+                                html: html,
+                                title: "Feature Info"
+                            });
+                            GeoExplorer.mapPanel.add(win);
+                            win.show();
+                        }
+                    );
+
+                    highlight.events.register('getfeatureinfo', this,
+                        function(evt){
+                            GeoExplorer.selectionLayer.destroyFeatures();
+                            if (evt.features){
+                                GeoExplorer.selectionLayer.addFeatures(evt.features);
+                            }
+                        }
+                    );
+
+                    this.map.addControl(identify);
+                    this.map.addControl(highlight);
+
+                    var idButton = new Ext.Button({
+                        text: 'Identify',
+                        enableToggle: true 
+                    });
+
+                    idButton.on('toggle', function(btn, pressed){
+                        if (pressed){
+                            identify.activate();
+                        } else {
+                            identify.deactivate();
+                        }
+                    });
+
+                    var selectButton = new Ext.Button({
+                        text: 'Select',
+                        enableToggle: true 
+                    });
+
+                    selectButton.on('toggle', function(btn, pressed){
+                        if (pressed){
+                            highlight.activate();
+                        } else {
+                            highlight.deactivate();
+                        }
+                    });
+
                     this.mapPanel = new GeoExt.MapPanel({
                         map: this.map,
-                        region: 'center'
+                        region: 'center',
+                        tbar: ['->', selectButton, idButton]
                     });
 
                     this.layerTree = new Ext.tree.TreePanel({