Ticket #4: mappanel.8.patch

File mappanel.8.patch, 24.7 kB (added by ahocevar, 1 year ago)

with a clean abstract LayerStore class

  • 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/LayerStore.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(new GeoExt.data.LayerRecord(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/data/LayerRecord.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 test_layerrecord(t) { 
     12            t.plan(3); 
     13             
     14            var layer = new OpenLayers.Layer(); 
     15            var record = new GeoExt.data.LayerRecord(layer); 
     16             
     17            t.eq(record.get("layer").id, layer.id, "Layer stored correctly"); 
     18            t.eq(record.id, layer.id, "ID set correctly"); 
     19             
     20            var record = new GeoExt.data.LayerRecord({layer: layer, data: {"foo": "bar"}}); 
     21            t.eq(record.get("foo"), "bar", "foo data row set correctly"); 
     22        } 
     23    </script> 
     24  <body> 
     25    <div id="mappanel"></div> 
     26  </body> 
     27</html> 

  • tests/list-tests.html

    old new  
    11<ul id="testlist"> 
    22  <li>data/FeatureReader.html</li> 
    33  <li>data/FeatureStoreMediator.html</li> 
     4  <li>data/LayerRecord.html</li> 
     5  <li>data/LayerStore.html</li> 
    46  <li>data/LayerStoreMediator.html</li> 
    57  <li>data/ProtocolProxy.html</li> 
     8  <li>widgets/MapPanel.html</li> 
    69</ul> 

  • lib/GeoExt.js

    old new  
    1 /* 
    2  * Copyright (C) 2008 Eric Lemoine, Camptocamp France SAS 
    3  * 
    4  * This file is part of GeoExt 
    5  * 
    6  * GeoExt is free software: you can redistribute it and/or modify 
    7  * it under the terms of the GNU General Public License as published by 
    8  * the Free Software Foundation, either version 3 of the License, or 
    9  * (at your option) any later version. 
    10  * 
    11  * GeoExt is distributed in the hope that it will be useful, 
    12  * but WITHOUT ANY WARRANTY; without even the implied warranty of 
    13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
    14  * GNU General Public License for more details. 
    15  * 
    16  * You should have received a copy of the GNU General Public License 
    17  * along with GeoExt.  If not, see <http://www.gnu.org/licenses/>. 
    18  */ 
     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 */ 
    197 
    208/* 
    219 * The code in this file is based on code taken from OpenLayers. 
    …… 
    2412 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the 
    2513 * full text of the license. 
    2614 */ 
    27  
    28 /*  
    29  */  
    30  
     15  
    3116(function() { 
    3217 
    3318    /** 
    …… 
    7560        var jsfiles = new Array( 
    7661            "GeoExt/data/FeatureReader.js", 
    7762            "GeoExt/data/FeatureStoreMediator.js", 
     63            "GeoExt/data/LayerStore.js", 
     64            "GeoExt/data/LayerRecord.js", 
    7865            "GeoExt/data/LayerStoreMediator.js", 
    79             "GeoExt/data/ProtocolProxy.js" 
     66            "GeoExt/data/ProtocolProxy.js", 
     67            "GeoExt/widgets/MapPanel.js" 
    8068        ); 
    8169 
    8270        var agent = navigator.userAgent; 
    …… 
    10290            document.write(allScriptTags.join("")); 
    10391        } 
    10492    } 
    105 })(); 
     93})(); 

  • 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     * {GeoExt.data.LayerStore|GeoExt.data.GroupingStore|Array(OpenLayers.Layer)} 
     64     *     A store holding records. If not provided, an empty 
     65     *     {GeoExt.data.LayerStore>} will be created. After instantiation 
     66     *     this property will always be an {Ext.data.Store}, even if an array 
     67     *     of {OpenLayers.Layer} was provided. 
     68     */ 
     69    layers: null, 
     70 
     71    /** 
     72     * APIProperty: center 
     73     * {OpenLayers.LonLat} The lonlat to which the map will 
     74     * be initially centered, to be used in conjunction with 
     75     * the zoom option. 
     76     */ 
     77    center: null, 
     78 
     79    /** 
     80     * APIProperty: zoom 
     81     * {Number} The initial zoom level of the map, to be used 
     82     * in conjunction with the center option. 
     83     */ 
     84    zoom: null, 
     85 
     86    /** 
     87     * APIProperty: extent 
     88     * {OpenLayers.Bounds} The initial extent of the map, use 
     89     * either this option of the center and zoom options. 
     90     */ 
     91    extent: null, 
     92     
     93    /** 
     94     * Method: initComponent 
     95     *     Initializes the map panel. Creates an OpenLayers map if 
     96     *     none was provided in the config options passed to the 
     97     *     constructor. 
     98     */ 
     99    initComponent: function(){ 
     100        if(!(this.map instanceof OpenLayers.Map)) { 
     101            this.map = new OpenLayers.Map(this.map); 
     102        } 
     103        var layers = this.layers; 
     104        if(!layers || layers instanceof Array) { 
     105            this.layers = new (Ext.extend(Ext.data.Store, GeoExt.data.LayerStore))({ 
     106                layers: layers, 
     107                map: this.map 
     108            }); 
     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        GeoExt.MapPanel.superclass.initComponent.call(this);        
     120    }, 
     121     
     122    /** 
     123     * Method: onRender 
     124     *     Private method called after the panel has been 
     125     *     rendered. 
     126     */ 
     127    onRender: function() { 
     128        GeoExt.MapPanel.superclass.onRender.apply(this, arguments); 
     129        this.map.render(this.body.dom); 
     130        if(this.map.layers.length > 0) { 
     131            if(this.center && this.zoom) { 
     132                this.map.setCenter(this.center, this.zoom); 
     133            }  else if(this.extent) { 
     134                this.map.zoomToExtent(this.extent); 
     135            } else { 
     136                this.map.zoomToMaxExtent(); 
     137            } 
     138        } 
     139    }, 
     140 
     141    /** 
     142     * Method: onBodyResize 
     143     *     Private method called after the panel has been 
     144     *     resized. 
     145     */ 
     146    onResize: function() { 
     147        GeoExt.MapPanel.superclass.onResize.apply(this, arguments); 
     148        this.map.updateSize(); 
     149    } 
     150}); 
     151 
     152Ext.reg('gx_mappanel', GeoExt.MapPanel);  

  • lib/GeoExt/data/LayerStore.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 * Abstract Class: LayerStore 
     12 * A store that synchronizes a layers array of an {OpenLayers.Map} with a 
     13 * layer store holding {<GeoExt.data.LayerRecord>} entries. 
     14 *  
     15 * This class can not be instantiated directly. Instead, it is meant to extend 
     16 * {Ext.data.Store} or a subclass of it: 
     17 * (start code) 
     18 * var store = new (Ext.extend(Ext.data.Store, GeoExt.data.LayerStore))({ 
     19 *     map: myMap, 
     20 *     layers: myLayers 
     21 * }); 
     22 * (end) 
     23 */ 
     24GeoExt.data.LayerStore = { 
     25    /** 
     26     * APIProperty: map 
     27     * {OpenLayers.Map} Map that this store will be in sync with. 
     28     */ 
     29    map: null, 
     30 
     31    /** 
     32     * Constructor: GeoExt.LayerStore 
     33     *  
     34     * Parameters: 
     35     * config - {Object} 
     36     *  
     37     * Valid config options: 
     38     * map    - {OpenLayers.Map|<GeoExt.MapPanel>} map to sync the layer store 
     39     *     with. 
     40     * layers - {Array(OpenLayers.Layer)} Layers that will be added to the 
     41     *     layer store (and the map, because we are already syncing). 
     42     */ 
     43    constructor: function(config) { 
     44        arguments.callee.superclass.constructor.apply(this, arguments); 
     45        config = config || {}; 
     46        var map = config.map instanceof GeoExt.MapPanel ? 
     47            config.map.map : config.map; 
     48        if(map) { 
     49            // create a snapshop of the map's layers 
     50            var layers = map.layers; 
     51            var layer; 
     52            // walk through the layers snapshot and add layers to the store 
     53            for(var i=0; i<layers.length; ++i) { 
     54                layer = layers[i]; 
     55                this.add(new GeoExt.data.LayerRecord(layer)); 
     56            } 
     57 
     58            this.setMap(map); 
     59            config.layers && map.addLayers(config.layers); 
     60        } 
     61    }, 
     62     
     63    /** 
     64     * APIMethod: setMap 
     65     *  
     66     * Parameters: 
     67     * map - {OpenLayers.Map} 
     68     */ 
     69    setMap: function(map) { 
     70        this.map = map; 
     71        map.events.on({ 
     72            "addlayer": this.onAddLayer, 
     73            "removelayer": this.onRemoveLayer, 
     74            scope: this 
     75        }); 
     76        this.on({ 
     77            "add": this.onAdd, 
     78            "remove": this.onRemove, 
     79            scope: this 
     80        }); 
     81    }, 
     82     
     83    /** 
     84     * Method: onAddLayer 
     85     * Handler for a map's addlayer event 
     86     *  
     87     * Parameters: 
     88     * evt - {Object} 
     89     */ 
     90    onAddLayer: function(evt) { 
     91        var layer = evt.layer; 
     92        this._adding = true; 
     93        this.add(new GeoExt.data.LayerRecord(layer)); 
     94        delete this._adding; 
     95    }, 
     96     
     97    /** 
     98     * Method: onRemoveLayer 
     99     * Handler for a map's removelayer event 
     100     *  
     101     * Parameters: 
     102     * evt - {Object} 
     103     */ 
     104    onRemoveLayer: function(evt){ 
     105        var layer = evt.layer; 
     106        this._removing = true; 
     107        this.remove(this.getById(layer.id)); 
     108        delete this._removing; 
     109    }, 
     110     
     111    /** 
     112     * Method: onAdd 
     113     * Handler for a store's add event 
     114     *  
     115     * Parameters: 
     116     * store - {<GeoExt.data.LayerStore>} 
     117     * records - {Array(<GeoExt.data.LayerRecord>)} 
     118     * index - {Number} 
     119     */ 
     120    onAdd: function(store, records, index) { 
     121        if(!this._adding) { 
     122            for(var i=0; i<records.length; ++i) { 
     123                this.map.addLayer(records[i].get("layer")); 
     124            } 
     125        } 
     126    }, 
     127     
     128    /** 
     129     * Method: onRemove 
     130     * Handler for a store's remove event 
     131     *  
     132     * Parameters: 
     133     * store - {<GeoExt.data.LayerStore>} 
     134     * records - {Array(<GeoExt.data.LayerRecord>)} 
     135     * index - {Number} 
     136     */ 
     137    onRemove: function(store, record, index){ 
     138        if(!this._removing) { 
     139            this.map.removeLayer(record.get("layer")); 
     140        } 
     141    } 
     142} 

  • lib/GeoExt/data/LayerRecord.js

    old new  
     1/** 
     2 * @author andreas 
     3 */ 
     4 
     5Ext.namespace("GeoExt.data"); 
     6 
     7/** 
     8 * Class: GeoExt.data.LayerRecord 
     9 * A simple helper class with a smart constructor for creating records 
     10 * referencing {OpenLayers.Layer} objects. 
     11 */ 
     12GeoExt.data.LayerRecord = Ext.extend(Ext.data.Record, { 
     13     
     14    /** 
     15     * Constructor: GeoExt.data.LayerRecord 
     16     * Creates a record with an {OpenLayers.Layer}, to be used in a layer store. 
     17     * Records will have the layer's id as id, so layers can be easily located 
     18     * inside the store, e.g. 
     19     * (start code) 
     20     * store.remove(store.getById(layer.id)); 
     21     * (end) 
     22     *  
     23     * Parameters: 
     24     * config - {Object|OpenLayers.Layer} 
     25     *  
     26     * Valid config options: 
     27     * layer - {OpenLayers.Layer} layer that the record will wrap. 
     28     * data  - {Object} Optional. Additional record data. 
     29     */ 
     30    constructor: function(config) { 
     31        config = config || {}; 
     32        if(config instanceof OpenLayers.Layer) { 
     33            config = { 
     34                layer: config 
     35            } 
     36        } 
     37        var layer = config.layer; 
     38        var recordData = Ext.applyIf({}, config.data); 
     39        Ext.applyIf(recordData, { 
     40            layer: layer, 
     41            title: layer.name 
     42        }); 
     43        this.data = recordData; 
     44        this.id = layer.id; 
     45    } 
     46}); 

  • 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>