Ticket #4: mappanel.3.patch

File mappanel.3.patch, 15.2 kB (added by ahocevar, 1 year ago)

  • lib/GeoExt.js

    old new  
    7676            "GeoExt/data/FeatureReader.js", 
    7777            "GeoExt/data/FeatureStoreMediator.js", 
    7878            "GeoExt/data/LayerStoreMediator.js", 
    79             "GeoExt/data/ProtocolProxy.js" 
     79            "GeoExt/data/LayerStore.js", 
     80            "GeoExt/data/ProtocolProxy.js", 
     81            "GeoExt/widgets/MapPanel.js" 
    8082        ); 
    8183 
    8284        var agent = navigator.userAgent; 

  • lib/GeoExt/widgets/MapPanel.js

    old new  
     1/* 
     2 * Initial code 
     3 * (C) 2008 Tim Coulter, The Open Planning Project 
     4 * 
     5 * Misc tweaks for inclusion into trunk GeoExt 
     6 * (C) 2009 Eric Lemoine, Camptocamp France SAS 
     7 * (C) 2009 Andreas Hocevar, The Open Planning Project 
     8 * 
     9 * This file is part of GeoExt 
     10 * 
     11 * GeoExt is free software: you can redistribute it and/or modify 
     12 * it under the terms of the GNU General Public License as published by 
     13 * the Free Software Foundation, either version 3 of the License, or 
     14 * (at your option) any later version. 
     15 * 
     16 * GeoExt is distributed in the hope that it will be useful, 
     17 * but WITHOUT ANY WARRANTY; without even the implied warranty of 
     18 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
     19 * GNU General Public License for more details. 
     20 * 
     21 * You should have received a copy of the GNU General Public License 
     22 * along with GeoExt.  If not, see <http://www.gnu.org/licenses/>. 
     23 */ 
     24 
     25Ext.namespace("GeoExt"); 
     26 
     27/** 
     28 * Class: GeoExt.MapPanel 
     29 *     A map panel is a panel with a map inside it. 
     30 * 
     31 * Example: create a map panel and render it in a div identified 
     32 * by "div-id". 
     33 * 
     34 * (start code) 
     35 * var mapPanel = new GeoExt.MapPanel({ 
     36 *     border: false, 
     37 *     renderTo: "div-id", 
     38 *     map: new OpenLayers.Map({ 
     39 *         maxExtent: new OpenLayers.Bounds(-90, -45, 90, 45) 
     40 *     }) 
     41 * }); 
     42 * (end) 
     43 * 
     44 * Example: create a panel including a map panel with a toolbar. 
     45 * 
     46 * (start code) 
     47 * var panel = new Ext.Panel({ 
     48 *     items: [{ 
     49 *         xtype: "gx_mappanel", 
     50 *         bbar: new Ext.Toolbar() 
     51 *     }] 
     52 * }); 
     53 * (end) 
     54 * 
     55 * Inherits from: 
     56 *  - {Ext.Panel} 
     57 */ 
     58 
     59/** 
     60 * Constructor: GeoExt.MapPanel 
     61 *     Creates a panel with a map inside it. 
     62 * 
     63 * Parameters: 
     64 * config - {Object} A config object. In addition to the config options 
     65 *     of its parent class, this object can receive specific options, 
     66 *     see the API properties to know about these specific options. 
     67 */ 
     68GeoExt.MapPanel = Ext.extend(Ext.Panel, { 
     69    /** 
     70     * APIProperty: map 
     71     * {OpenLayers.Map|Object} An {OpenLayers.Map} instance 
     72     * or an {OpenLayers.Map} config object, in the latter case 
     73     * the map panel will take care of creating the {OpenLayers.Map} 
     74     * object. 
     75     */ 
     76    map: null, 
     77     
     78    /** 
     79     * APIProperty: layers 
     80     * {Ext.data.Store} A store holding records representing a map's layers. 
     81     *     The data hash of a layer record contains a layer property 
     82     *     referencing the layer. Read-only. 
     83     *     {<GeoExt.data.LayerStore>} will be created. 
     84     */ 
     85    layers: null, 
     86 
     87    /** 
     88     * APIProperty: center 
     89     * {OpenLayers.LonLat} The lonlat to which the map will 
     90     * be initially centered, to be used in conjunction with 
     91     * the zoom option. 
     92     */ 
     93    center: null, 
     94 
     95    /** 
     96     * APIProperty: zoom 
     97     * {Number} The initial zoom level of the map, to be used 
     98     * in conjunction with the center option. 
     99     */ 
     100    zoom: null, 
     101 
     102    /** 
     103     * APIProperty: extent 
     104     * {OpenLayers.Bounds} The initial extent of the map, use 
     105     * either this option of the center and zoom options. 
     106     */ 
     107    extent: null, 
     108     
     109    /** 
     110     * Method: initComponent 
     111     *     Initializes the map panel. Creates an OpenLayers map if 
     112     *     none was provided in the config options passed to the 
     113     *     constructor. 
     114     */ 
     115    initComponent: function(){ 
     116        if(!(this.map instanceof OpenLayers.Map)) { 
     117            this.map = new OpenLayers.Map(this.map); 
     118        } 
     119        this.layers = new GeoExt.data.LayerStore({map: this.map}); 
     120         
     121        this.on("render", this.gx_onRender, this); 
     122        this.on("bodyresize", this.gx_onBodyResize, this); 
     123 
     124        GeoExt.MapPanel.superclass.initComponent.call(this);        
     125    }, 
     126     
     127    /** 
     128     * Method: gx_onRender 
     129     *     Private method called after the panel has been 
     130     *     rendered. 
     131     */ 
     132    gx_onRender: function() { 
     133        this.map.render(this.body.dom); 
     134        if(this.map.layers.length > 0) { 
     135            if(this.center && this.zoom) { 
     136                this.map.setCenter(this.center, this.zoom); 
     137            }  else if(this.extent) { 
     138                this.map.zoomToExtent(this.extent); 
     139            } else { 
     140                this.map.zoomToMaxExtent(); 
     141            } 
     142        } 
     143    }, 
     144 
     145    /** 
     146     * Method: gx_onBodyResize 
     147     *     Private method called after the panel has been 
     148     *     resized. 
     149     */ 
     150    gx_onBodyResize: function() { 
     151        this.map.updateSize(); 
     152    } 
     153}); 
     154 
     155Ext.reg('gx_mappanel', GeoExt.MapPanel);  

  • lib/GeoExt/data/LayerStore.js

    old new  
     1/** 
     2 * (C) 2009 The Open Planning Project 
     3 */ 
     4 
     5Ext.namespace("GeoExt.data"); 
     6 
     7/** 
     8 * Class: GeoExt.data.LayerStore 
     9 * A store of layer records. A layer record is an {Ext.Record} with at least a 
     10 * layer and a title property in its data object. This store is used by the 
     11 * MapPanel to provide an Ext way of accessing layers and storing meta 
     12 * information about layers. 
     13 */ 
     14GeoExt.data.LayerStore = Ext.extend(Ext.data.Store, { 
     15     
     16    /** 
     17     * ConfigProperty: map 
     18     * {OpenLayers.Map|GeoExt.MapPanel} If provided, the store will sync with 
     19     *     the layers array of the map. 
     20     */ 
     21    map: null, 
     22 
     23    /** 
     24     * Property: adding 
     25     * {Boolean} Private property to avoid add events from layer and store 
     26     *     bouncing back and forth 
     27     */ 
     28    adding: false, 
     29     
     30    /** 
     31     * Property: removing 
     32     * {Boolean} Private property to avoid remove events from layer and store 
     33     *     bouncing back and forth 
     34     */ 
     35    removing: false, 
     36 
     37    /** 
     38     * Constructor: GeoExt.tree.LayerNode 
     39     *  
     40     * Parameters: 
     41     * config - {Object} 
     42     */ 
     43    constructor: function(config) { 
     44        GeoExt.data.LayerStore.superclass.constructor.apply(this, arguments); 
     45        var map = config.map; 
     46        this.map = map instanceof GeoExt.MapPanel ? map.map : map; 
     47 
     48        if (this.map) { 
     49            var mapLayers = this.map.layers; 
     50            var layer; 
     51            for(var i=0; i<mapLayers.length; ++i) { 
     52                layer = mapLayers[i]; 
     53                if(!this.getById(layer.id)) { 
     54                    this.addLayer(layer); 
     55                } 
     56            } 
     57            this.each(function(record){ 
     58                var layer = record.data.layer; 
     59                if(mapLayers.indexOf(layer) == -1) { 
     60                    this.adding = true; 
     61                    this.map.addLayer(layer); 
     62                    this.adding = false; 
     63                } 
     64            }, this); 
     65             
     66            this.map.events.on({ 
     67                "addlayer": this.onAddLayer, 
     68                "removelayer": this.onRemoveLayer, 
     69                scope: this 
     70            }); 
     71            this.on({ 
     72                "add": this.onAddLayerRecords, 
     73                "remove": this.onRemoveLayerRecord, 
     74                scope: this 
     75            }); 
     76        } 
     77    }, 
     78     
     79    /** 
     80     * APIMethod: addLayer 
     81     * Adds a layer to this store 
     82     *  
     83     * Parameters: 
     84     * layer - {OpenLayers.Layer} The layer to add 
     85     * data - {Object} row data for the layer 
     86     *  
     87     * Data properties used by GeoExt: 
     88     * layer - {OpenLayers.Layer} reference to a layer 
     89     * title - {String} Title of the layer (if not provided, this will be the 
     90     *     layer object's name property) 
     91     */ 
     92    addLayer: function(layer, data) { 
     93        var recordData = Ext.applyIf({}, data); 
     94        Ext.applyIf(recordData, { 
     95            layer: layer, 
     96            title: layer.name 
     97        }); 
     98        this.add([new Ext.data.Record(recordData, layer.id)]); 
     99    }, 
     100     
     101    /** 
     102     * APIMethod: removeLayer 
     103     * Removes a layer from this store 
     104     *  
     105     * Parameters: 
     106     * layer - {OpenLayers.Layer} The layer to remove 
     107     */ 
     108    removeLayer: function(layer) { 
     109        this.remove([this.getById(layer.id)]); 
     110    }, 
     111 
     112    /** 
     113     * Method: onAddLayer 
     114     * Handler for the layer's addlayer event. 
     115     *  
     116     * Parameters: 
     117     * evt - {Object} 
     118     */ 
     119    onAddLayer: function(evt) { 
     120        var layer = evt.layer; 
     121        this.adding = true; 
     122        this.addLayer(layer); 
     123        this.adding = false; 
     124    }, 
     125     
     126    /** 
     127     * Method: onAddLayerRecords 
     128     * Handler for the layer store's add event 
     129     *  
     130     * Parameters: 
     131     * store - {Ext.data.Store} 
     132     * records - {Array(Ext.data.Record)} 
     133     * index - {Number} 
     134     */ 
     135    onAddLayerRecords: function(store, records, index) { 
     136        if(!this.adding) { 
     137            for(var i=0; i<records.length; ++i) { 
     138                this.map.addLayer(records[i].data.layer); 
     139            } 
     140        } 
     141    }, 
     142     
     143    /** 
     144     * Method: onRemoveLayer 
     145     * Handler for the layer's removelayer event 
     146     *  
     147     * Parameters: 
     148     * evt - {Object} 
     149     */ 
     150    onRemoveLayer: function(evt) { 
     151        var layer = evt.layer; 
     152        this.removing = true; 
     153        this.removeLayer(layer); 
     154        this.removing = false; 
     155    }, 
     156     
     157    /** 
     158     * Method: onRemoveLayerRecord 
     159     * Handler for the layer store's remove event 
     160     *  
     161     * Parameters: 
     162     * store - {Ext.data.Store} 
     163     * record - {Ext.data.Record} 
     164     * index - {Number} 
     165     */ 
     166    onRemoveLayerRecord: function(store, record, index) { 
     167        if(!this.removing) { 
     168            this.map.removeLayer(record.data.layer); 
     169        } 
     170    } 
     171 
     172}); 

  • examples/mappanel-div.html

    old new  
     1<html> 
     2  <head> 
     3    <script type="text/javascript" src="../../../openlayers/lib/OpenLayers.js"></script> 
     4    <script type="text/javascript" src="../../../ext/2.2/adapter/ext/ext-base.js"></script> 
     5    <script type="text/javascript" src="../../../ext/2.2/ext-all-debug.js"></script> 
     6    <script type="text/javascript" src="../lib/GeoExt.js"></script> 
     7 
     8    <link rel="stylesheet" type="text/css" href="../../../ext/2.2/resources/css/ext-all.css"></link> 
     9 
     10    <script type="text/javascript"> 
     11 
     12        var mapPanel = null; 
     13         
     14        function createMap() { 
     15            var map = new OpenLayers.Map(); 
     16            var layer = new OpenLayers.Layer.WMS( 
     17                "vmap0", 
     18                "http://labs.metacarta.com/wms/vmap0", 
     19                {layers: 'basic'} 
     20            ); 
     21            map.addLayer(layer); 
     22            return map; 
     23        } 
     24 
     25        function load() { 
     26            var map = createMap(); 
     27 
     28            mapPanel = new GeoExt.MapPanel({ 
     29                // panel options 
     30                id: "map-panel", 
     31                title: "GeoExt MapPanel", 
     32                renderTo: "mappanel", 
     33                height: 400, 
     34                width: 600, 
     35                // map panel-specific options 
     36                map: map, 
     37                center: new OpenLayers.LonLat(5, 45), 
     38                zoom: 4 
     39            }); 
     40        } 
     41 
     42        function mapSizeUp() { 
     43            var size = mapPanel.getSize(); 
     44            size.width += 40; 
     45            size.height += 40; 
     46            mapPanel.setSize(size); 
     47        } 
     48 
     49        function mapSizeDown() { 
     50            var size = mapPanel.getSize(); 
     51            size.width -= 40; 
     52            size.height -= 40; 
     53            mapPanel.setSize(size); 
     54        } 
     55 
     56        Ext.onReady(function() { 
     57            load(); 
     58        }); 
     59    </script> 
     60         
     61  </head> 
     62  <body> 
     63    <div id="mappanel"></div> 
     64    <input type="button" onclick="mapSizeUp()" value="bigger"></input> 
     65    <input type="button" onclick="mapSizeDown()" value="smaller"></input> 
     66  </body> 
     67</html> 

  • examples/mappanel-window.html

    old new  
     1<html> 
     2  <head> 
     3    <script type="text/javascript" src="../../../openlayers/lib/OpenLayers.js"></script> 
     4    <script type="text/javascript" src="../../../ext/2.2/adapter/ext/ext-base.js"></script> 
     5    <script type="text/javascript" src="../../../ext/2.2/ext-all-debug.js"></script> 
     6    <script type="text/javascript" src="../lib/GeoExt.js"></script> 
     7 
     8    <link rel="stylesheet" type="text/css" href="../../../ext/2.2/resources/css/ext-all.css"></link> 
     9 
     10    <script type="text/javascript"> 
     11        var app = (function() { 
     12 
     13            var mapPanel = null; 
     14             
     15            var createMap = function() { 
     16                var map = new OpenLayers.Map(); 
     17                var layer = new OpenLayers.Layer.WMS( 
     18                    "vmap0", 
     19                    "http://labs.metacarta.com/wms/vmap0", 
     20                    {layers: 'basic'} 
     21                ); 
     22                map.addLayer(layer); 
     23                return map; 
     24            }; 
     25 
     26            return { 
     27                load: function() { 
     28                    var map = createMap(); 
     29 
     30                    new Ext.Window({ 
     31                        id: "window", 
     32                        title: "GeoExt MapPanel Window", 
     33                        height: 400, 
     34                        width: 600, 
     35                        layout: "fit", 
     36                        items: [{ 
     37                            xtype: "gx_mappanel", 
     38                            map: map, 
     39                            extent: new OpenLayers.Bounds(-165, 45, -90, 45) 
     40                        }] 
     41                    }).show(); 
     42                } 
     43            } 
     44        })(); 
     45 
     46        Ext.onReady(function() { 
     47            app.load(); 
     48        }); 
     49    </script> 
     50         
     51  </head> 
     52  <body> 
     53  </body> 
     54</html>