Ticket #2: ticket2.patch

File ticket2.patch, 27.5 kB (added by bartvde, 1 year ago)

changed static to dynamic, add support for changing legendURL property, more tests

  • tests/lib/GeoExt/widgets/LegendPanel.html

    old new  
     1<!DOCTYPE html> 
     2<html debug="true"> 
     3  <head> 
     4    <script type="text/javascript" src="../../../../../openlayers/lib/OpenLayers.js"></script> 
     5    <script type="text/javascript" src="../../../../../ext/adapter/ext/ext-base.js"></script> 
     6    <script type="text/javascript" src="../../../../../ext/ext-all.js"></script> 
     7    <script type="text/javascript" src="../../../../lib/GeoExt.js"></script> 
     8 
     9    <script type="text/javascript"> 
     10 
     11        function createMap() { 
     12            var map = new OpenLayers.Map({allOverlays: true}); 
     13            var layer = new OpenLayers.Layer.WMS("test", '/ows', {layers: 'a'}); 
     14            map.addLayer(layer); 
     15            return map; 
     16        } 
     17 
     18        function loadMapPanel() { 
     19            var map = createMap(); 
     20 
     21            mapPanel = new GeoExt.MapPanel({ 
     22                // panel options 
     23                id: "map-panel", 
     24                title: "GeoExt MapPanel", 
     25                renderTo: "mappanel", 
     26                height: 400, 
     27                width: 600, 
     28                // map panel-specific options 
     29                map: map, 
     30                center: new OpenLayers.LonLat(5, 45), 
     31                zoom: 4 
     32            }); 
     33 
     34            return mapPanel; 
     35        } 
     36 
     37        function test_legendurl(t) { 
     38            t.plan(1); 
     39            var mapPanel = loadMapPanel(); 
     40            var lp  = new GeoExt.LegendPanel({ 
     41                renderTo: 'legendpanel'}); 
     42            lp.render(); 
     43 
     44            var newUrl = "http://www.geoext.org//trac/geoext/chrome/site/img/GeoExt.png"; 
     45            mapPanel.layers.getAt(0).set("legendURL", newUrl); 
     46 
     47            var item = lp.getComponent(mapPanel.map.layers[0].id); 
     48            var url = item.items.items[1].items.items[0].getEl().dom.src; 
     49            t.eq(url, newUrl, "Update the image with the provided legendURL"); 
     50 
     51            lp.destroy(); 
     52            mapPanel.destroy(); 
     53        } 
     54 
     55        function test_togglevisibility(t) { 
     56            t.plan(2); 
     57            var mapPanel = loadMapPanel(); 
     58            var lp  = new GeoExt.LegendPanel({ 
     59                renderTo: 'legendpanel'}); 
     60            lp.render(); 
     61 
     62            mapPanel.map.layers[0].setVisibility(false); 
     63            var id = mapPanel.layers.getAt(0).get('layer').id; 
     64            t.eq(lp.getComponent(id).hidden, true, "Layer has been hidden in legend"); 
     65 
     66            mapPanel.map.layers[0].setVisibility(true); 
     67            t.eq(lp.getComponent(id).hidden, false, "Layer has been made visible again in legend"); 
     68 
     69            lp.destroy(); 
     70            mapPanel.destroy(); 
     71        } 
     72 
     73        function test_hide(t) { 
     74            t.plan(1); 
     75            var mapPanel = loadMapPanel(); 
     76            var lp  = new GeoExt.LegendPanel({ 
     77                renderTo: 'legendpanel'}); 
     78            lp.render(); 
     79 
     80            mapPanel.layers.getAt(0).set("hideInLegend", true); 
     81            var id = mapPanel.layers.getAt(0).get('layer').id; 
     82            t.eq(lp.getComponent(id).hidden, true, "Layer has been hidden in legend"); 
     83 
     84            lp.destroy(); 
     85            mapPanel.destroy(); 
     86        } 
     87 
     88        function test_dynamic(t) { 
     89            t.plan(1); 
     90            var mapPanel = loadMapPanel(); 
     91            var lp  = new GeoExt.LegendPanel({ 
     92                dynamic: false, 
     93                renderTo: 'legendpanel'}); 
     94            lp.render(); 
     95 
     96            var layer; 
     97            layer = new OpenLayers.Layer.WMS("test2", '/ows', {layers: 'b', format: 'image/png', transparent: 'TRUE'}); 
     98            mapPanel.map.addLayer(layer); 
     99 
     100            t.eq(lp.items.length, 1, "If dynamic is false, do not add or remove layers from legend"); 
     101             
     102            lp.destroy(); 
     103            mapPanel.destroy(); 
     104        } 
     105 
     106        function test_wms(t) { 
     107            t.plan(1); 
     108            var mapPanel = loadMapPanel(); 
     109            var lp  = new GeoExt.LegendPanel({ 
     110                renderTo: 'legendpanel'}); 
     111            lp.render(); 
     112 
     113            var item = lp.getComponent(mapPanel.map.layers[0].id); 
     114            var url = item.items.items[1].items.items[0].url; 
     115            var expectedUrl = "/ows?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_xml&FORMAT=image%2Fgif&LAYER=a"; 
     116            t.eq(url, expectedUrl, "GetLegendGraphic url is generated correctly"); 
     117             
     118            lp.destroy(); 
     119            mapPanel.destroy(); 
     120        } 
     121 
     122        function test_addremove(t) { 
     123            t.plan(4); 
     124            var mapPanel = loadMapPanel(); 
     125            var lp  = new GeoExt.LegendPanel({ 
     126                renderTo: 'legendpanel'}); 
     127            lp.render(); 
     128            t.eq(lp.items.length, 1, "Same number of layers in legend panel and in map"); 
     129 
     130            var item = lp.getComponent(mapPanel.map.layers[0].id); 
     131 
     132            var layer; 
     133            layer = new OpenLayers.Layer.WMS("test2", '/ows', {layers: 'b', format: 'image/png', transparent: 'TRUE'}); 
     134            mapPanel.map.addLayer(layer); 
     135 
     136            t.eq(lp.items.length, 2, "New WMS layer has been added"); 
     137 
     138            layer = new OpenLayers.Layer.WMS("test3", '/ows', {layers: 'c'}, {visibility: false}); 
     139            mapPanel.map.addLayer(layer); 
     140 
     141            t.eq(lp.items.length, 3, "A non visible WMS layer will be added"); 
     142 
     143            mapPanel.map.removeLayer(mapPanel.map.layers[0]); 
     144            t.eq(lp.items.length, 3, "Removing the WMS layer only hides the legend from the panel"); 
     145 
     146            lp.destroy(); 
     147            mapPanel.destroy(); 
     148        } 
     149 
     150    </script> 
     151  <body> 
     152    <div id="legendpanel"></div> 
     153    <div id="mappanel"></div> 
     154  </body> 
     155</html> 

  • tests/list-tests.html

    old new  
    1313  <li>lib/GeoExt/widgets/form/SearchAction.html</li> 
    1414  <li>lib/GeoExt/widgets/form/BasicForm.html</li> 
    1515  <li>lib/GeoExt/widgets/form/FormPanel.html</li> 
     16  <li>lib/GeoExt/widgets/LegendPanel.html</li> 
    1617</ul> 

  • lib/GeoExt.js

    old new  
    7272            "GeoExt/widgets/Popup.js", 
    7373            "GeoExt/widgets/form/SearchAction.js", 
    7474            "GeoExt/widgets/form/BasicForm.js", 
    75             "GeoExt/widgets/form/FormPanel.js" 
     75            "GeoExt/widgets/form/FormPanel.js", 
     76            "GeoExt/widgets/legend/Image.js", 
     77            "GeoExt/widgets/legend/WMS.js", 
     78            "GeoExt/widgets/LegendPanel.js" 
    7679        ); 
    7780 
    7881        var agent = navigator.userAgent; 

  • lib/GeoExt/widgets/LegendPanel.js

    old new  
     1/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation 
     2 * Published under the BSD license. 
     3 * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text 
     4 * of the license. 
     5 * 
     6 * pending approval */ 
     7 
     8/** api: (define) 
     9 *  module = GeoExt 
     10 *  class = LegendPanel 
     11 */ 
     12 
     13Ext.namespace('GeoExt'); 
     14 
     15/** api: constructor 
     16 *  .. class:: LegendPanel(config) 
     17 * 
     18 *  A panel showing legends of all layers in a layer store. 
     19 *  Depending on the layer type, a legend renderer will be chosen. 
     20 */ 
     21GeoExt.LegendPanel = Ext.extend(Ext.Panel, { 
     22 
     23    /** api: config[ascending] 
     24     *  ``Boolean`` 
     25     *  If true the layers in the legend will show the bottom OpenLayers  
     26     *  layer on top and the top OpenLayers layer on the bottom.  
     27     *  If false, this is inverted. Default value is true. 
     28     */ 
     29    ascending: true, 
     30 
     31    /** api: config[dynamic] 
     32     *  ``Boolean`` 
     33     *  If false the LegendPanel will not listen to the add, remove and change  
     34     *  events of the LayerStore. So it will load with the initial state of 
     35     *  the LayerStore and not change anymore.  
     36     */ 
     37    dynamic: true, 
     38     
     39    /** api: config[showTitle] 
     40     *  ``Boolean`` 
     41     *  Whether or not to show the title of a layer. This can be a global 
     42     *  setting for the whole panel, or it can be overridden on the LayerStore  
     43     *  record using the hideInLegend property. 
     44     */ 
     45    showTitle: true, 
     46 
     47    /** api: config[labelCls] 
     48     *  ``String`` 
     49     *  Optional css class to use for the layer title labels. 
     50     */ 
     51    labelCls: null, 
     52 
     53    /** api:config[bodyStyle] 
     54     *  ``String`` 
     55     *  Optional style to apply to the body of the legend panels. 
     56     */ 
     57    bodyStyle: '', 
     58 
     59    /** api: config[layerStore] 
     60     *  ``GeoExt.data.LayerStore`` 
     61     *  The layer store containing layers to be displayed in the legend  
     62     *  container. If not provided it will be taken from the MapPanel. 
     63     */ 
     64    layerStore: null, 
     65 
     66    /** private: method[initComponent] 
     67     *  Initializes the legend panel. 
     68     */ 
     69    initComponent: function() { 
     70        GeoExt.LegendPanel.superclass.initComponent.call(this); 
     71    }, 
     72     
     73    /** private: method[onRender] 
     74     *  Private method called when the legend panel is being rendered. 
     75     */ 
     76    onRender: function() { 
     77        GeoExt.LegendPanel.superclass.onRender.apply(this, arguments); 
     78        if(!this.layerStore) { 
     79            this.layerStore = GeoExt.MapPanel.guess().layers; 
     80        } 
     81        this.layerStore.each(this.addLegend, this); 
     82        if (this.dynamic) { 
     83            this.layerStore.on({ 
     84                "add": this.onStoreAdd, 
     85                "move": this.onStoreMove, 
     86                "remove": this.onStoreRemove, 
     87                "update": this.onStoreUpdate, 
     88                scope: this 
     89            }); 
     90        } 
     91        this.doLayout(); 
     92    }, 
     93 
     94    /** private: method[onStoreUpdate] 
     95     *  Update a layer within the legend panel. Gets called when the store 
     96     *  fires the update event. This usually means the visibility of the layer 
     97     *  has changed. 
     98     * 
     99     *  :param store: ``Ext.data.Store`` The store in which the record was 
     100     *      changed. 
     101     *  :param record: ``Ext.data.Record`` The record object corresponding 
     102     *      to the updated layer. 
     103     *  :param operation: ``String`` The type of operation. 
     104     */ 
     105    onStoreUpdate: function(store, record, operation) { 
     106        var layer = record.get('layer'); 
     107        var legend = this.getComponent(layer.id); 
     108        if (legend) { 
     109            legend.setVisible(layer.getVisibility() && !record.get('hideInLegend')); 
     110            if (record.get('legendURL')) { 
     111                var items = legend.findByType('gx_legendimage'); 
     112                for (var i=0, len=items.length; i<len; i++) { 
     113                    items[i].setUrl(record.get('legendURL')); 
     114                } 
     115            } 
     116        } 
     117    }, 
     118 
     119    /** private: method[onStoreMove] 
     120     *  Relocate a layer within the legend panel. Gets called when the store 
     121     *  fires the move event. 
     122     * 
     123     *  :param store: ``Ext.data.Store`` The store in which the record was 
     124     *      moved. 
     125     *  :param record: ``Ext.data.Record`` The record object corresponding 
     126     *      to the moved layer. 
     127     *  :param from: ``Integer`` The previous index of the moved record. 
     128     *  :param to: ``Integer`` The new index of the moved record. 
     129     */ 
     130    onStoreMove: function(store, record, from, to) { 
     131        this.moveLegend(record, to); 
     132    }, 
     133 
     134    /** private: method[moveLegend] 
     135     *  Relocate a layer within the legend panel. Removes the existing panel 
     136     *  and then inserts it at the right index. 
     137     * 
     138     *  :param record: ``Ext.data.Record`` The record object(s) corresponding 
     139     *      to the moved layer. 
     140     *  :param index: ``Integer`` The new index of the moved record. 
     141     */ 
     142    moveLegend: function(record, index) { 
     143        var legend = this.getComponent(record.get('layer').id); 
     144        this.remove(legend); 
     145        var newLegend = this.createLegendSubpanel(record); 
     146        if (this.ascending) { 
     147            this.insert(index, newLegend);  
     148        } else { 
     149            this.insert((this.items.length-index), newLegend); 
     150        } 
     151        this.doLayout();  
     152    }, 
     153 
     154    /** private: method[onStoreAdd] 
     155     *  Private method called when a layer is added to the store. 
     156     * 
     157     *  :param store: ``Ext.data.Store`` The store to which the record(s) was  
     158     *      added. 
     159     *  :param record: ``Ext.data.Record`` The record object(s) corresponding 
     160     *      to the added layers. 
     161     *  :param index: ``Integer`` The index of the inserted record. 
     162     */ 
     163    onStoreAdd: function(store, records, index) { 
     164        for (var i=0, len=records.length; i<len; i++) { 
     165            this.addLegend(records[i]); 
     166        } 
     167        this.doLayout(); 
     168    }, 
     169 
     170    /** private: method[onStoreRemove] 
     171     *  Private method called when a layer is removed from the store. 
     172     * 
     173     *  :param store: ``Ext.data.Store`` The store from which the record(s) was 
     174     *      removed. 
     175     *  :param record: ``Ext.data.Record`` The record object(s) corresponding 
     176     *      to the removed layers. 
     177     *  :param index: ``Integer`` The index of the removed record. 
     178     */ 
     179    onStoreRemove: function(store, record, index) { 
     180        this.removeLegend(record); 
     181    }, 
     182 
     183    /** private: method[removeLegend] 
     184     *  Remove the legend of a layer. 
     185     *  :param record: ``Ext.data.Record`` The record object from the layer  
     186     *      store to remove. 
     187     */ 
     188    removeLegend: function(record) { 
     189        var legend = this.getComponent(record.get('layer').id); 
     190        if (legend) { 
     191            legend.hide(); 
     192            this.doLayout(); 
     193        } 
     194    }, 
     195 
     196    /** private: method[createLegendSubpanel] 
     197     *  Create a legend sub panel for the layer. 
     198     * 
     199     *  :param record: ``Ext.data.Record`` The record object from the layer 
     200     *      store. 
     201     * 
     202     *  :return: ``Ext.Panel`` The created panel per layer 
     203     */ 
     204    createLegendSubpanel: function(record) { 
     205        var layer = record.get('layer'); 
     206        var mainPanel = this.createMainPanel(record); 
     207        // the default legend can be overridden by specifying a 
     208        // legendURL property 
     209        if (record.get('legendURL')) { 
     210            var legend = new GeoExt.legend.Image({url: 
     211                record.get('legendURL')}); 
     212            mainPanel.add(legend); 
     213        } else { 
     214            var legendGenerator = GeoExt.legend[layer.CLASS_NAME.replace( 
     215                'OpenLayers.Layer.', '')]; 
     216            if (legendGenerator) { 
     217                var legend = new legendGenerator({layer: layer}); 
     218                mainPanel.add(legend); 
     219            } 
     220        } 
     221        return mainPanel; 
     222    }, 
     223 
     224    /** private: method[addLegend] 
     225     *  Add a legend for the layer. 
     226     * 
     227     *  :param record: ``Ext.data.Record`` The record object from the layer  
     228     *      store. 
     229     */ 
     230    addLegend: function(record) { 
     231        var layer = record.get('layer'); 
     232        // a layer can be excluded from the legend by setting the hideInLegend 
     233        // property to true 
     234        var hideInLegend = record.get('hideInLegend'); 
     235        var legendSubpanel = this.createLegendSubpanel(record); 
     236        if (legendSubpanel !== null) { 
     237            // if there is only a label, it does not make much sense to show it 
     238            if (legendSubpanel.items.items.length == 1) { 
     239                legendSubpanel.hide(); 
     240            } else { 
     241                legendSubpanel.setVisible((layer && layer.getVisibility() && !hideInLegend)); 
     242            } 
     243            if (this.ascending) { 
     244                this.add(legendSubpanel); 
     245            } else { 
     246                this.insert(0, legendSubpanel); 
     247            } 
     248        } 
     249    }, 
     250 
     251    /** private: method[createMainPanel] 
     252     *  Creates the main panel with a title for the layer. 
     253     * 
     254     *  :param record: ``Ext.data.Record`` The record object from the layer 
     255     *      store. 
     256     * 
     257     *  :return: ``Ext.Panel`` The created main panel with a label. 
     258     */ 
     259    createMainPanel: function(record) { 
     260        var layer = record.get('layer'); 
     261        var panelConfig = { 
     262            id: layer.id, 
     263            border: false, 
     264            bodyBorder: false, 
     265            bodyStyle: this.bodyStyle, 
     266            items: [ 
     267                new Ext.form.Label({ 
     268                    text: (this.showTitle && !record.get('hideTitle')) ?  
     269                        layer.name : '', 
     270                    cls: 'x-form-item x-form-item-label' + 
     271                        (this.labelCls ? ' ' + this.labelCls : '') 
     272                }) 
     273            ] 
     274        }; 
     275        var panel = new Ext.Panel(panelConfig); 
     276        return panel; 
     277    }, 
     278 
     279    /** private: method[onDestroy] 
     280     *  Private method called during the destroy sequence. 
     281     */ 
     282    onDestroy: function() { 
     283        if(this.layerStore) { 
     284            this.layerStore.un("add", this.onStoreAdd, this); 
     285            this.layerStore.un("remove", this.onStoreRemove, this); 
     286        } 
     287        GeoExt.LegendPanel.superclass.onDestroy.apply(this, arguments); 
     288    } 
     289     
     290}); 
     291 
     292Ext.reg('gx_legend', GeoExt.LegendPanel); 

  • lib/GeoExt/widgets/legend/WMS.js

    old new  
     1/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation 
     2 * Published under the BSD license. 
     3 * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text 
     4 * of the license. 
     5 * 
     6 * pending approval */ 
     7 
     8/** 
     9 * @include GeoExt/widgets/legend/Image.js 
     10 */ 
     11 
     12/** api: (define) 
     13 *  module = GeoExt.legend 
     14 *  class = WMS 
     15 */ 
     16Ext.namespace('GeoExt', 'GeoExt.legend'); 
     17 
     18/** api: constructor 
     19 *  .. class:: WMS(config) 
     20 * 
     21 *  Show a legend image for a WMS layer. 
     22 */ 
     23GeoExt.legend.WMS = Ext.extend(Ext.Panel, { 
     24 
     25    /** api: config[imageFormat] 
     26     *  ``String``   
     27     *  The image format to request the legend image in. 
     28     *  Defaults to image/png. 
     29     */ 
     30    imageFormat: "image/gif", 
     31 
     32    /** api: config[layer] 
     33     *  ``OpenLayers.Layer.WMS`` 
     34     *  The WMS layer to request the legend for. 
     35     */ 
     36    layer: null, 
     37 
     38    /** api: config[bodyBorder] 
     39     *  ``Boolean`` 
     40     *  Show a border around the legend image or not. Default is false. 
     41     */ 
     42    bodyBorder: false, 
     43 
     44    /** private: method[initComponent] 
     45     *  Initializes the WMS legend. For group layers it will create multiple 
     46     *  image box components. 
     47     */ 
     48    initComponent: function() { 
     49        GeoExt.legend.WMS.superclass.initComponent.call(this); 
     50        this.createLegend(); 
     51    }, 
     52 
     53    /** private: method[getLegendUrl] 
     54     *  :param layer: ``OpenLayers.Layer.WMS`` The OpenLayers WMS layer object 
     55     *  :param layerName: ``String`` The name of the layer  
     56     *  (used in the LAYERS parameter) 
     57     *  :return: ``String`` The url of the SLD WMS GetLegendGraphic request. 
     58     * 
     59     *  Get the url for the SLD WMS GetLegendGraphic request. 
     60     */ 
     61    getLegendUrl: function(layerName) { 
     62       return this.layer.getFullRequestString({ 
     63           REQUEST: "GetLegendGraphic", 
     64           WIDTH: null, 
     65           HEIGHT: null, 
     66           EXCEPTIONS: "application/vnd.ogc.se_xml", 
     67           LAYER: layerName, 
     68           LAYERS: null, 
     69           SRS: null, 
     70           FORMAT: this.imageFormat 
     71       }); 
     72    }, 
     73 
     74    /** private: method[createLegend] 
     75     *  Add one BoxComponent per sublayer to this panel. 
     76     */ 
     77    createLegend: function() { 
     78        var layers = this.layer.params.LAYERS.split(","); 
     79        for (var i = 0, len = layers.length; i < len; i++){ 
     80            var layerName = layers[i]; 
     81            var legend = new GeoExt.legend.Image({url: 
     82                this.getLegendUrl(layerName)}); 
     83            this.add(legend); 
     84        } 
     85    } 
     86 
     87}); 

  • lib/GeoExt/widgets/legend/Image.js

    old new  
     1/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation 
     2 * Published under the BSD license. 
     3 * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text 
     4 * of the license. 
     5 *  
     6 * pending approval */ 
     7 
     8/** api: (define) 
     9 *  module = GeoExt.legend 
     10 *  class = Image 
     11 */ 
     12 
     13Ext.namespace('GeoExt', 'GeoExt.legend'); 
     14 
     15/** api: constructor 
     16 *  .. class:: Image(config) 
     17 * 
     18 *  Show a legend image in a BoxComponent and make sure load errors are dealt 
     19 *  with. 
     20 */ 
     21GeoExt.legend.Image = Ext.extend(Ext.BoxComponent, { 
     22 
     23    /** api: config[url] 
     24     *  ``String``  The url of the image to load 
     25     */ 
     26    url: null, 
     27 
     28    /** api: config[imgCls] 
     29     *  ``String``  Optional css class to apply to img tag 
     30     */ 
     31    imgCls: null, 
     32 
     33    /** private: method[initComponent] 
     34     *  Initializes the legend image component.  
     35     */ 
     36    initComponent: function() { 
     37        GeoExt.legend.Image.superclass.initComponent.call(this); 
     38        this.autoEl = {tag: 'img', 
     39            'class': (this.imgCls ? this.imgCls : ''), src: this.url}; 
     40    }, 
     41 
     42    /** public: method[setUrl] 
     43     *  Sets the url of the image. 
     44     * 
     45     *  :param url: ``String`` The new url of the image. 
     46     */ 
     47    setUrl: function(url) { 
     48        if (this.getEl()) { 
     49            this.getEl().dom.src = url; 
     50        } 
     51    }, 
     52 
     53    /** private: method[onRender] 
     54     *  Private method called when the legend image component is being 
     55     *  rendered. 
     56     */ 
     57    onRender: function(ct, position) { 
     58        GeoExt.legend.Image.superclass.onRender.call(this, ct, position); 
     59        this.getEl().on('error', this.onImageLoadError, this); 
     60    }, 
     61 
     62    /** private: method[onDestroy] 
     63     *  Private method called during the destroy sequence. 
     64     */ 
     65    onDestroy: function() { 
     66        this.getEl().un('error', this.onImageLoadError, this); 
     67        GeoExt.legend.Image.superclass.onDestroy.apply(this, arguments); 
     68    }, 
     69     
     70    /** private: method[onImageLoadError] 
     71     *  Private method called if the legend image fails loading. 
     72     */ 
     73    onImageLoadError: function() { 
     74        this.getEl().dom.src = Ext.BLANK_IMAGE_URL; 
     75    } 
     76 
     77}); 
     78 
     79Ext.reg('gx_legendimage', GeoExt.legend.Image); 

  • examples/legendpanel.html

    old new  
     1<html> 
     2    <head> 
     3        <script type="text/javascript" src="http://dev.geoext.org/trunk/ext/adapter/ext/ext-base.js"></script> 
     4        <script type="text/javascript" src="http://dev.geoext.org/trunk/ext/ext-all.js"></script> 
     5        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> 
     6        <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/shared/examples.css"></link> 
     7        <script src="http://openlayers.org/api/2.8-rc2/OpenLayers.js"></script> 
     8        <script type="text/javascript" src="../lib/GeoExt.js"></script> 
     9 
     10        <script type="text/javascript" src="legendpanel.js"></script> 
     11 
     12        <style type="text/css"> 
     13        .mylabel { 
     14            font-weight: bold; 
     15            color: red; 
     16        } 
     17        </style> 
     18    </head> 
     19    <body> 
     20        <h1>GeoExt.LegendPanel</h1> 
     21        <p>This example shows the how to create a LegendPanel that autopopulates with legends from a map 
     22        that has already been created.</p> 
     23        <p>The js is not minified so it is readable. See <a href="legendpanel.js">legendpanel.js</a>.</p> 
     24        <div id="view"></div> 
     25    </body> 
     26</html> 

  • examples/legendpanel.js

    old new  
     1 
     2var mapPanel; 
     3 
     4Ext.onReady(function() { 
     5    var map = new OpenLayers.Map({allOverlays: true}); 
     6    map.addLayers([ 
     7        new OpenLayers.Layer.WMS( 
     8            "Tasmania", 
     9            "http://publicus.opengeo.org/geoserver/wms?", 
     10            {layers: 'topp:tasmania_state_boundaries', format: 'image/png', transparent: true}, 
     11            {singleTile: true}), 
     12        new OpenLayers.Layer.WMS( 
     13            "Cities and Roads", 
     14            "http://publicus.opengeo.org/geoserver/wms?", 
     15            {layers: 'topp:tasmania_cities,topp:tasmania_roads', format: 'image/png', transparent: true}, 
     16            {singleTile: true}), 
     17        new OpenLayers.Layer.Vector('Polygons', {styleMap: new OpenLayers.StyleMap({ 
     18                "default": new OpenLayers.Style({ 
     19                    pointRadius: 8, 
     20                    fillColor: "#00ffee", 
     21                    strokeColor: "#000000", 
     22                    strokeWidth: 2 
     23                }) }) }) 
     24    ]); 
     25 
     26    addLayer = function() { 
     27        var wmslayer = new OpenLayers.Layer.WMS("Bodies of Water", 
     28            "http://publicus.opengeo.org/geoserver/wms?", 
     29            {layers: 'topp:tasmania_water_bodies', format: 'image/png', transparent: true}, 
     30            {singleTile: true}); 
     31        mapPanel.map.addLayer(wmslayer); 
     32    }; 
     33 
     34    removeLayer = function() { 
     35        mapPanel.map.removeLayer(mapPanel.map.layers[1]); 
     36    }; 
     37 
     38    moveLayer = function(idx) { 
     39        mapPanel.map.setLayerIndex(mapPanel.map.layers[0], idx); 
     40    }; 
     41 
     42    toggleVisibility = function() { 
     43        mapPanel.map.layers[1].setVisibility(!mapPanel.map.layers[1].getVisibility()); 
     44    }; 
     45 
     46    updateHideInLegend = function() { 
     47        mapPanel.layers.getAt(1).set("hideInLegend", true); 
     48    }; 
     49 
     50    updateLegendUrl = function() { 
     51        mapPanel.layers.getAt(0).set("legendURL", "http://www.geoext.org//trac/geoext/chrome/site/img/GeoExt.png"); 
     52    }; 
     53 
     54    mapPanel = new GeoExt.MapPanel({ 
     55        region: 'center', 
     56        height: 400, 
     57        width: 600, 
     58        map: map, 
     59        center: new OpenLayers.LonLat(146.4, -41.6), 
     60        zoom: 7}); 
     61 
     62    legendPanel = new GeoExt.LegendPanel({ 
     63        labelCls: 'mylabel', 
     64        ascending: false, 
     65        bodyStyle: 'padding:5px', 
     66        width: 350, 
     67        tbar: new Ext.Toolbar({items: [ 
     68            new Ext.Button({text: 'add', handler: addLayer}), 
     69            new Ext.Button({text: 'remove', handler: removeLayer}), 
     70            new Ext.Button({text: 'movetotop', handler: function() { moveLayer(10); } }), 
     71            new Ext.Button({text: 'moveup', handler: function() { moveLayer(1); } }), 
     72            new Ext.Button({text: 'togglevis', handler: toggleVisibility}), 
     73            new Ext.Button({text: 'hide', handler: updateHideInLegend}), 
     74            new Ext.Button({text: 'legendurl', handler: updateLegendUrl}) 
     75            ]}), 
     76        autoScroll: true, 
     77        region: 'west'}); 
     78 
     79     new Ext.Panel({ 
     80        title: "GeoExt LegendPanel Demo", 
     81        layout: 'border', 
     82        renderTo: 'view', 
     83        height: 400, 
     84        width: 800, 
     85        items: [legendPanel, mapPanel] }); 
     86}); 
     87