Ticket #4: mappanel.7.patch

File mappanel.7.patch, 20.7 kB (added by ahocevar, 1 year ago)

  • license.txt

    old new  
     1Copyright (c) 2008-2009, The Open Source Geospatial Foundation ¹ 
     2All rights reserved. 
     3 
     4Redistribution and use in source and binary forms, with or without 
     5modification, are permitted provided that the following conditions are met: 
     6 
     7    * Redistributions of source code must retain the above copyright notice, 
     8      this list of conditions and the following disclaimer. 
     9    * Redistributions in binary form must reproduce the above copyright 
     10      notice, this list of conditions and the following disclaimer in the 
     11      documentation and/or other materials provided with the distribution. 
     12    * Neither the name of the <ORGANIZATION> nor the names of its 
     13      contributors may be used to endorse or promote products derived from 
     14      this software without specific prior written permission. 
     15 
     16THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 
     17AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 
     18IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 
     19ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 
     20LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 
     21CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 
     22SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
     23INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 
     24CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
     25ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 
     26POSSIBILITY OF SUCH DAMAGE. 
     27 
     28¹ pending approval 

  • tests/widgets/MapPanel.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/2.2.1/adapter/ext/ext-base.js"></script> 
     6    <script type="text/javascript" src="../../../../ext/2.2.1/ext-all-debug.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(); 
     13            var layer = new OpenLayers.Layer("test", {isBaseLayer: true}); 
     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_mappanel(t) { 
     38            t.plan(2) 
     39             
     40            loadMapPanel(); 
     41            t.eq(mapPanel.map.getCenter().toString(), "lon=5,lat=45", "Map center set correctly"); 
     42            t.eq(mapPanel.map.getZoom(), 4, "Zoom set correctly"); 
     43        } 
     44 
     45    </script> 
     46  <body> 
     47    <div id="mappanel"></div> 
     48  </body> 
     49</html> 

  • tests/data.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/2.2.1/adapter/ext/ext-base.js"></script> 
     6    <script type="text/javascript" src="../../../ext/2.2.1/ext-all-debug.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(); 
     13            return map; 
     14        } 
     15 
     16        function loadMapPanel() { 
     17            var map = createMap(); 
     18 
     19            mapPanel = new GeoExt.MapPanel({ 
     20                // panel options 
     21                id: "map-panel", 
     22                title: "GeoExt MapPanel", 
     23                renderTo: "mappanel", 
     24                height: 400, 
     25                width: 600, 
     26                // map panel-specific options 
     27                map: map, 
     28                center: new OpenLayers.LonLat(5, 45), 
     29                zoom: 4 
     30            }); 
     31 
     32            return mapPanel; 
     33        } 
     34 
     35        function test_layerstore(t) { 
     36            t.plan(6); 
     37 
     38            var mapPanel = loadMapPanel(); 
     39            var map = mapPanel.map; 
     40 
     41            var layer = new OpenLayers.Layer.Vector("Foo Layer"); 
     42 
     43            map.addLayer(layer); 
     44 
     45            t.eq(map.layers.length,1,"Adding layer to map does not create duplicate layers on map"); 
     46            t.eq(mapPanel.layers.getCount(),1,"Adding layer to map does not create duplicate records in LayerStore"); 
     47 
     48            mapPanel.layers.remove(mapPanel.layers.getById(layer.id)); 
     49 
     50            t.eq(map.layers.length,0,"removeLayer on MapPanel's LayerStore removes layer from map"); 
     51            t.eq(mapPanel.layers.getCount(),0,"removeLayer on MapPanel's LayerStore removes layer from map"); 
     52 
     53            mapPanel.layers.add(GeoExt.data.createLayerRecord(layer)); 
     54            t.eq(map.layers.length,1,"Adding layer to MapPanel's LayerStore adds only one layer to map"); 
     55            t.eq(mapPanel.layers.getCount(),1,"Adding layers to MapPanel's LayerStore does not create duplicate layers");  
     56 
     57 
     58        } 
     59    </script> 
     60  <body> 
     61    <div id="mappanel"></div> 
     62  </body> 
     63</html> 

  • tests/list-tests.html

    old new  
    11<ul id="testlist"> 
     2  <li>data.html</li> 
    23  <li>data/FeatureReader.html</li> 
    34  <li>data/FeatureStoreMediator.html</li> 
    45  <li>data/LayerStoreMediator.html</li> 
    56  <li>data/ProtocolProxy.html</li> 
     7  <li>widgets/MapPanel.html</li> 
    68</ul> 

  • lib/GeoExt.js

    old new  
    7373     */ 
    7474    if(!singleFile) { 
    7575        var jsfiles = new Array( 
     76            "GeoExt/data.js", 
    7677            "GeoExt/data/FeatureReader.js", 
    7778            "GeoExt/data/FeatureStoreMediator.js", 
    7879            "GeoExt/data/LayerStoreMediator.js", 
    79             "GeoExt/data/ProtocolProxy.js" 
     80            "GeoExt/data/ProtocolProxy.js", 
     81            "GeoExt/widgets/MapPanel.js" 
    8082        ); 
    8183 
    8284        var agent = navigator.userAgent; 

  • lib/GeoExt/data.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 
     8Ext.namespace("GeoExt.data"); 
     9 
     10/** 
     11 * APIFunction: GeoExt.data.createLayerStore 
     12 * Creates a store that will sync its records with the layers array of a map. 
     13 * Records should be created using <GeoExt.data.createLayerRecord>. 
     14 *  
     15 * Parameters: 
     16 * config - {Object} 
     17 *  
     18 * Valid config options: 
     19 * map    - {OpenLayers.Map|<GeoExt.MapPanel>} map to sync the layer store 
     20 *     with. 
     21 * store  - {Ext.data.Store} Optional. Instance of a store. If not provided, 
     22 *     a plain {Ext.data.Store} will be created. If the provided store 
     23 *     contains layer records already, the layers will be synced with the map. 
     24 * layers - {Array(OpenLayers.Layer)} Optional. Layers that will be added to 
     25 *     the layer store (and the map, because we are already syncing). 
     26 *  
     27 * Returns: 
     28 * {Ext.data.Store} 
     29 */ 
     30GeoExt.data.createLayerStore = function(config) { 
     31    var map = config.map instanceof GeoExt.MapPanel ? 
     32        config.map.map : config.map; 
     33    config.layers && map.addLayers(config.layers); 
     34     
     35    // create a snapshop of the map's layers 
     36    var layers = map.layers.concat(); 
     37     
     38    var store = config.store; 
     39    if(store) { 
     40        store.each(function(record){ 
     41            map.addLayer(record.get("layer")); 
     42        }); 
     43    } else { 
     44        store = new Ext.data.Store(); 
     45    } 
     46 
     47    var layer; 
     48    // walk through the layers snapshot and add layers to the store 
     49    for(var i=0; i<layers.length; ++i) { 
     50        layer = layers[i]; 
     51        store.add([GeoExt.data.createLayerRecord({ 
     52            layer: layer 
     53        })]); 
     54    } 
     55 
     56    map.events.on({ 
     57        "addlayer": function(evt) { 
     58            var layer = evt.layer; 
     59            store._adding = true; 
     60            store.add([GeoExt.data.createLayerRecord({ 
     61                layer: layer 
     62            })]); 
     63            delete store._adding; 
     64        }, 
     65        "removelayer": function(evt){ 
     66            var layer = evt.layer; 
     67            store._removing = true; 
     68            store.remove(store.getById(layer.id)); 
     69            delete store._removing; 
     70        } 
     71    }); 
     72    store.on({ 
     73        "add": function(store, records, index) { 
     74            if(!store._adding) { 
     75                for(var i=0; i<records.length; ++i) { 
     76                    map.addLayer(records[i].get("layer")); 
     77                } 
     78            } 
     79        }, 
     80        "remove": function(store, record, index) { 
     81            if(!store._removing) { 
     82                map.removeLayer(record.get("layer")); 
     83            } 
     84        } 
     85    }); 
     86     
     87    return store; 
     88}; 
     89 
     90/** 
     91 * APIFunction: GeoExt.data.createLayerRecord 
     92 * Creates a record with an {OpenLayers.Layer}, to be used in a layer store. 
     93 * Records will have the layer's id as id, so layers can be easily located 
     94 * inside the store, e.g. 
     95 * (start code) 
     96 * store.remove(store.getById(layer.id)); 
     97 * (end) 
     98 *  
     99 * Parameters: 
     100 * config - {Object|OpenLayers.Layer} 
     101 *  
     102 * Valid config options: 
     103 * layer - {OpenLayers.Layer} layer that the record will wrap. 
     104 * data  - {Object} Optional. Additional record data. 
     105 */ 
     106GeoExt.data.createLayerRecord = function(config) { 
     107    if(config instanceof OpenLayers.Layer) { 
     108        config = {layer: config} 
     109    } 
     110    var layer = config.layer; 
     111    var recordData = Ext.applyIf({}, config.data); 
     112    Ext.applyIf(recordData, { 
     113        layer: layer, 
     114        title: layer.name 
     115    }); 
     116    return new Ext.data.Record(recordData, layer.id); 
     117}; 
     118 
     119/** 
     120 * APIFunction: GeoExt.data.guessLayerStore 
     121 * Convenience function to guess the layer store by querying the Ext component 
     122 * manager for a MapPanel, and taking the layer store from the first map panel 
     123 * it finds. 
     124 *  
     125 * Returns: 
     126 * {<GeoExt.data.LayerStore>} 
     127 */ 
     128GeoExt.data.guessLayerStore = function() { 
     129    var mapPanel = Ext.ComponentMgr.all.find(function(o) { 
     130        return o instanceof GeoExt.MapPanel; 
     131    }); 
     132    return mapPanel.layers; 
     133}; 

  • lib/GeoExt/widgets/MapPanel.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 
     8Ext.namespace("GeoExt"); 
     9 
     10/** 
     11 * Class: GeoExt.MapPanel 
     12 *     A map panel is a panel with a map inside it. 
     13 * 
     14 * Example: create a map panel and render it in a div identified 
     15 * by "div-id". 
     16 * 
     17 * (start code) 
     18 * var mapPanel = new GeoExt.MapPanel({ 
     19 *     border: false, 
     20 *     renderTo: "div-id", 
     21 *     map: new OpenLayers.Map({ 
     22 *         maxExtent: new OpenLayers.Bounds(-90, -45, 90, 45) 
     23 *     }) 
     24 * }); 
     25 * (end) 
     26 * 
     27 * Example: create a panel including a map panel with a toolbar. 
     28 * 
     29 * (start code) 
     30 * var panel = new Ext.Panel({ 
     31 *     items: [{ 
     32 *         xtype: "gx_mappanel", 
     33 *         bbar: new Ext.Toolbar() 
     34 *     }] 
     35 * }); 
     36 * (end) 
     37 * 
     38 * Inherits from: 
     39 *  - {Ext.Panel} 
     40 */ 
     41 
     42/** 
     43 * Constructor: GeoExt.MapPanel 
     44 *     Creates a panel with a map inside it. 
     45 * 
     46 * Parameters: 
     47 * config - {Object} A config object. In addition to the config options 
     48 *     of its parent class, this object can receive specific options, 
     49 *     see the API properties to know about these specific options. 
     50 */ 
     51GeoExt.MapPanel = Ext.extend(Ext.Panel, { 
     52    /** 
     53     * APIProperty: map 
     54     * {OpenLayers.Map|Object} An {OpenLayers.Map} instance 
     55     * or an {OpenLayers.Map} config object, in the latter case 
     56     * the map panel will take care of creating the {OpenLayers.Map} 
     57     * object. 
     58     */ 
     59    map: null, 
     60     
     61    /** 
     62     * APIProperty: layers 
     63     * {Ext.data.Store|Array(OpenLayers.Layer)} A store holding records 
     64     *     representing a map's layers. The records should be created using 
     65     *     <GeoExt.data.createLayerRecord>. If not provided, an empty 
     66     *     {Ext.data.Store>} will be created. After instantiation, this 
     67     *     property will always be an {Ext.data.Store}, even if an array of 
     68     *     {OpenLayers.Layer} is prvided. 
     69     */ 
     70    layers: null, 
     71 
     72    /** 
     73     * APIProperty: center 
     74     * {OpenLayers.LonLat} The lonlat to which the map will 
     75     * be initially centered, to be used in conjunction with 
     76     * the zoom option. 
     77     */ 
     78    center: null, 
     79 
     80    /** 
     81     * APIProperty: zoom 
     82     * {Number} The initial zoom level of the map, to be used 
     83     * in conjunction with the center option. 
     84     */ 
     85    zoom: null, 
     86 
     87    /** 
     88     * APIProperty: extent 
     89     * {OpenLayers.Bounds} The initial extent of the map, use 
     90     * either this option of the center and zoom options. 
     91     */ 
     92    extent: null, 
     93     
     94    /** 
     95     * Method: initComponent 
     96     *     Initializes the map panel. Creates an OpenLayers map if 
     97     *     none was provided in the config options passed to the 
     98     *     constructor. 
     99     */ 
     100    initComponent: function(){ 
     101        if(!(this.map instanceof OpenLayers.Map)) { 
     102            this.map = new OpenLayers.Map(this.map); 
     103        } 
     104        var layers = this.layers; 
     105        this.layers = GeoExt.data.createLayerStore({ 
     106            store: layers instanceof Ext.data.Store && layers, 
     107            layers: layers instanceof Array && layers, 
     108            map: this.map 
     109        }); 
     110         
     111        var args; 
     112        if(typeof this.center == "string") { 
     113            this.center = OpenLayers.LonLat.fromString(this.center); 
     114        } 
     115        if(typeof this.extent == "string") { 
     116            this.extent = OpenLayers.Bounds.fromString(this.extent); 
     117        } 
     118         
     119        this.on("render", this.gx_onRender, this); 
     120        this.on("bodyresize", this.gx_onBodyResize, this); 
     121 
     122        GeoExt.MapPanel.superclass.initComponent.call(this);        
     123    }, 
     124     
     125    /** 
     126     * Method: gx_onRender 
     127     *     Private method called after the panel has been 
     128     *     rendered. 
     129     */ 
     130    gx_onRender: function() { 
     131        this.map.render(this.body.dom); 
     132        if(this.map.layers.length > 0) { 
     133            if(this.center && this.zoom) { 
     134                this.map.setCenter(this.center, this.zoom); 
     135            }  else if(this.extent) { 
     136                this.map.zoomToExtent(this.extent); 
     137            } else { 
     138                this.map.zoomToMaxExtent(); 
     139            } 
     140        } 
     141    }, 
     142 
     143    /** 
     144     * Method: gx_onBodyResize 
     145     *     Private method called after the panel has been 
     146     *     resized. 
     147     */ 
     148    gx_onBodyResize: function() { 
     149        this.map.updateSize(); 
     150    } 
     151}); 
     152 
     153Ext.reg('gx_mappanel', GeoExt.MapPanel);  

  • 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.1/adapter/ext/ext-base.js"></script> 
     5    <script type="text/javascript" src="../../../ext/2.2.1/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.1/resources/css/ext-all.css"></link> 
     9 
     10    <script type="text/javascript"> 
     11 
     12        var mapPanel; 
     13         
     14        function createMap() { 
     15            var map = new OpenLayers.Map(); 
     16            var layer = new OpenLayers.Layer.WMS( 
     17                "bluemarble", 
     18                "http://sigma.openplans.org/geoserver/wms?", 
     19                {layers: 'bluemarble'} 
     20            ); 
     21            map.addLayer(layer); 
     22            return map; 
     23        } 
     24 
     25        function load() { 
     26            var map = createMap(); 
     27 
     28            mapPanel = new GeoExt.MapPanel({ 
     29                id: "map-panel", 
     30                title: "GeoExt MapPanel", 
     31                renderTo: "mappanel", 
     32                height: 400, 
     33                width: 600, 
     34                map: map, 
     35                center: new OpenLayers.LonLat(5, 45), 
     36                zoom: 4 
     37            }); 
     38        } 
     39 
     40        // functions for resizing the map panel 
     41        function mapSizeUp() { 
     42            var size = mapPanel.getSize(); 
     43            size.width += 40; 
     44            size.height += 40; 
     45            mapPanel.setSize(size); 
     46        } 
     47        function mapSizeDown() { 
     48            var size = mapPanel.getSize(); 
     49            size.width -= 40; 
     50            size.height -= 40; 
     51            mapPanel.setSize(size); 
     52        } 
     53 
     54        Ext.onReady(function() { 
     55            load(); 
     56        }); 
     57    </script> 
     58         
     59  </head> 
     60  <body> 
     61    <div id="mappanel"></div> 
     62    <input type="button" onclick="mapSizeUp()" value="bigger"></input> 
     63    <input type="button" onclick="mapSizeDown()" value="smaller"></input> 
     64  </body> 
     65</html> 

  • examples/mappanel-window.html

    old new  
     1<html> 
     2  <head> 
     3    <link rel="stylesheet" type="text/css" href="../../../ext/2.2.1/resources/css/ext-all.css"></link> 
     4    <script type="text/javascript" src="../../../openlayers/lib/OpenLayers.js"></script> 
     5    <script type="text/javascript" src="../../../ext/2.2.1/adapter/ext/ext-base.js"></script> 
     6    <script type="text/javascript" src="../../../ext/2.2.1/ext-all-debug.js"></script> 
     7    <script type="text/javascript" src="../lib/GeoExt.js"></script> 
     8 
     9    <script type="text/javascript"> 
     10 
     11    // this example shows the Extish way to create a map panel. See 
     12    // mappanel-div.html for the OpenLayerish way to do the same. 
     13    Ext.onReady(function() { 
     14        new Ext.Window({ 
     15            title: "GeoExt MapPanel Window", 
     16            height: 400, 
     17            width: 600, 
     18            layout: "fit", 
     19            items: [{ 
     20                xtype: "gx_mappanel", 
     21                layers: [new OpenLayers.Layer.WMS( 
     22                    "bluemarble", 
     23                    "http://sigma.openplans.org/geoserver/wms?", 
     24                    {layers: 'bluemarble'} 
     25                )], 
     26                extent: "-5,35,15,55" 
     27            }] 
     28        }).show(); 
     29    }); 
     30 
     31    </script> 
     32  </head> 
     33  <body> 
     34  </body> 
     35</html>