OpenLayers OpenLayers

Ticket #102: loadingpanel_map.patch

File loadingpanel_map.patch, 10.0 kB (added by bartvde, 1 year ago)

new patch which also implements having a loading indicator for the whole map

  • tests/list-tests.html

    old new  
    5859    <li>Control/test_NavToolbar.html</li> 
    5960    <li>Control/test_MouseToolbar.html</li> 
    6061    <li>Control/test_LayerSwitcher.html</li> 
     62    <li>Control/test_LoadingPanel.html</li> 
    6163    <li>Control/test_Panel.html</li> 
    6264    <li>Control/test_PanZoom.html</li> 
    6365    <li>Control/test_PanZoomBar.html</li> 

  • tests/Control/test_LoadingPanel.html

    old new  
     1<html> 
     2<head> 
     3  <script src="../../lib/OpenLayers.js"></script> 
     4  <script type="text/javascript"><!-- 
     5    var map;  
     6    function test_Control_LoadingPanel_constructor (t) { 
     7        t.plan( 2 ); 
     8        var layer = new OpenLayers.Layer.WMS("a", "http://example.com/"); 
     9        control = new OpenLayers.Control.LoadingPanel(layer); 
     10        t.ok( control instanceof OpenLayers.Control.LoadingPanel, "new OpenLayers.Control returns object" ); 
     11        t.eq( control.displayClass,  "olControlLoadingPanel", "displayClass is correct" ); 
     12    } 
     13     
     14    function test_Control_LoadingPanel_maximize_minimize (t) { 
     15        t.plan( 2 ); 
     16        var layer = new OpenLayers.Layer.WMS("a", "http://example.com/"); 
     17        control = new OpenLayers.Control.LoadingPanel(layer); 
     18        map = new OpenLayers.Map('map'); 
     19        map.addControl(control); 
     20        control.maximizeControl(); 
     21        t.eq(control.div.style.width, "1024px", "Control div has correct width after maximize"); 
     22        control.minimizeControl(); 
     23        t.eq(control.div.style.width, "0px", "Control div has correct width after minimize"); 
     24         
     25    } 
     26  // --> 
     27  </script> 
     28</head> 
     29<body> 
     30    <div id="map" style="width: 1024px; height: 512px;"/> 
     31</body> 
     32</html> 

  • lib/OpenLayers.js

    old new  
    139140            "OpenLayers/Control/DrawFeature.js", 
    140141            "OpenLayers/Control/Panel.js", 
    141142            "OpenLayers/Control/SelectFeature.js", 
     143            "OpenLayers/Control/LoadingPanel.js", 
    142144            "OpenLayers/Geometry.js", 
    143145            "OpenLayers/Geometry/Rectangle.js", 
    144146            "OpenLayers/Geometry/Collection.js", 

  • examples/loadingPanel.html

    old new  
     1<html> 
     2<head> 
     3<script src="../lib/OpenLayers.js"></script> 
     4<title>World Map Query</title> 
     5</head> 
     6<body> 
     7  <div id="map" style="width:100%; height:90%"></div> 
     8  <script defer="defer" type="text/javascript"> 
     9    var map = new OpenLayers.Map('map', {'maxResolution':360/512}); 
     10 
     11    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
     12        "http://labs.metacarta.com/wms-c/Basic.py", {'layers': 'basic'} ); 
     13 
     14    var layer = new OpenLayers.Layer.WMS("Summits", 
     15      "http://demo.mapfish.org/cgi-bin/mapserv-c2corg-v0.2?", 
     16      {layers: ['summits'], format: 'image/png', transparent: true, singleTile: true} ); 
     17 
     18    var lp = new OpenLayers.Control.LoadingPanel(null, {map: map}); 
     19    map.addControl(lp); 
     20 
     21    map.addLayer(wms); 
     22    map.addLayer(layer); 
     23 
     24    map.setCenter(new OpenLayers.LonLat(5,45), 6); 
     25 
     26  </script> 
     27  <style type="text/css"> 
     28    .loading { 
     29      background-image:url(http://trac.openlayers.org/attachment/ticket/102/loading.gif?format=raw); 
     30      background-repeat: no-repeat; 
     31      background-position: center; 
     32    } 
     33  </style> 
     34</body> 
     35</html> 

  • lib/OpenLayers/Control/LoadingPanel.js

    old new  
     1/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license. 
     2 * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt 
     3 * for the full text of the license. */ 
     4 
     5/** 
     6 * @requires OpenLayers/Control.js 
     7 * 
     8 * Class: OpenLayers.Control.LoadingPanel 
     9 * In some applications, it makes sense to alert the user that something is happening 
     10 * while tiles are loading. This control displays a div across the map when this is 
     11 * going on. 
     12 * 
     13 * Inherits from: 
     14 *  - <OpenLayers.Control> 
     15 */ 
     16OpenLayers.Control.LoadingPanel = OpenLayers.Class.create(); 
     17OpenLayers.Control.LoadingPanel.prototype = 
     18  OpenLayers.Class.inherit( OpenLayers.Control, { 
     19 
     20    /** 
     21     * Property: counter 
     22     * {Integer} A counter for the number of layers loading. 
     23     */ 
     24    counter: 0, 
     25 
     26    /** 
     27     * Property: maximized 
     28     * {Boolean} A boolean indicating whether or not the control is maximized 
     29    */ 
     30    maximized: false, 
     31 
     32    /** 
     33     * Property: layer 
     34     * {OpenLayers.Layer} 
     35    */ 
     36    layer: null, 
     37 
     38    /** 
     39     * Constructor: OpenLayers.Control.LoadingPanel 
     40     * Display a panel across the map that says 'loading'. 
     41     * 
     42     * Parameters: 
     43     * layer - {<OpenLayers.Layer.Grid>} Some layer which implements the loadstart and loadend 
     44     *    properties. At the moment, this is only subclasses of the Grid layer. 
     45     * options - {Object} additional options. 
     46     */ 
     47    initialize: function(layer, options) { 
     48         OpenLayers.Control.prototype.initialize.apply(this, [options]); 
     49 
     50         if (!layer) { 
     51             this.map.events.register('addlayer', this, this.addLayer); 
     52             for (var i = 0; i < this.map.layers.length; i++) { 
     53                 var layer = this.map.layers[i]; 
     54                 layer.events.register('loadstart', this, this.increaseCounter); 
     55                 layer.events.register('loadend', this, this.decreaseCounter); 
     56             } 
     57         } else { 
     58             this.layer = layer; 
     59             layer.events.register('loadstart', this, this.maximizeControl); 
     60             layer.events.register('loadend', this, this.minimizeControl); 
     61         } 
     62    }, 
     63 
     64    /** 
     65     * Method: addLayer 
     66     * Attach event handlers when new layer gets added to the map 
     67    */ 
     68    addLayer: function(evt) { 
     69        var layer = this.map.layers[this.map.layers.length-1]; 
     70        layer.events.register('loadstart', this, this.increaseCounter); 
     71        layer.events.register('loadend', this, this.decreaseCounter); 
     72    }, 
     73 
     74    /** 
     75     * Method: increaseCounter 
     76     * Increase the counter and show control 
     77    */ 
     78    increaseCounter: function() { 
     79        this.counter++; 
     80        if (this.counter > 0) { 
     81            if (!this.maximized) { 
     82                this.maximizeControl(); 
     83            } 
     84        } 
     85    }, 
     86 
     87    /** 
     88     * Method: decreaseCounter 
     89     * Decrease the counter and hide the control if finished 
     90    */ 
     91    decreaseCounter: function() { 
     92        if (this.counter > 0) { 
     93            this.counter--; 
     94        } 
     95        if (this.counter == 0) { 
     96            if (this.maximized) { 
     97              this.minimizeControl(); 
     98            } 
     99        } 
     100    }, 
     101 
     102    /** 
     103     * Method: draw 
     104     * Create and return the element to be splashed over the map. 
     105     */ 
     106    draw: function () { 
     107        if (this.div == null) { 
     108            var viewSize = this.map.getSize(); 
     109 
     110            msgW = Math.max(viewSize.w, 300); 
     111            msgH = Math.max(viewSize.h, 200); 
     112 
     113            var centerPx = new OpenLayers.Pixel(viewSize.w/2, viewSize.h/2); 
     114            var size = new OpenLayers.Size(msgW, msgH); 
     115            var centerPx2 = centerPx.add(-msgW/2, -msgH/2); 
     116            this.div = OpenLayers.Util.createDiv('OpenLayers_Control_LoadingPanel' + "_warning", 
     117                                                         centerPx2, 
     118                                                         size, 
     119                                                         null, 
     120                                                         null, 
     121                                                         null, 
     122                                                         "auto", 
     123                                                         .75); 
     124            this.div.className = 'loading'; 
     125        } 
     126 
     127        return this.div; 
     128    }, 
     129 
     130    /** 
     131     * Method: minimizeControl 
     132     * Set the display properties of the control to make it disappear. 
     133     */ 
     134    minimizeControl: function(e) { 
     135        this.div.style.width = "0px"; 
     136        this.div.style.height = "0px"; 
     137        this.maximized = false; 
     138 
     139        if (e != null) { 
     140            OpenLayers.Event.stop(e); 
     141        } 
     142    }, 
     143 
     144    /** 
     145     * Method: maximizeControl 
     146     * Make the control visible. 
     147     */ 
     148    maximizeControl: function(e) { 
     149        var viewSize = this.map.getSize(); 
     150 
     151        msgW = Math.max(viewSize.w, 300); 
     152        msgH = Math.max(viewSize.h, 200); 
     153 
     154        this.div.style.width = msgW + "px"; 
     155        this.div.style.height = msgH + "px"; 
     156        this.maximized = true; 
     157 
     158        if (e != null) { 
     159            OpenLayers.Event.stop(e); 
     160        } 
     161    }, 
     162 
     163    /** 
     164     * Method: destroy 
     165     * Destroy control. 
     166     */ 
     167    destroy: function() { 
     168        if (this.layer) { 
     169            this.layer.events.unregister('loadstart', this, this.maximizeControl); 
     170            this.layer.events.unregister('loadend', this, this.minimizeControl); 
     171        } else { 
     172            if (this.map) { 
     173                this.map.events.unregister('addlayer', this, this.addLayer); 
     174                if (this.map.layers) { 
     175                    for (var i = 0; i < this.map.layers.length; i++) { 
     176                        var layer = this.map.layers[i]; 
     177                        layer.events.unregister('loadstart', this, this.increaseCounter); 
     178                        layer.events.unregister('loadend', this, this.decreaseCounter); 
     179                    } 
     180                } 
     181            } 
     182        } 
     183        OpenLayers.Control.prototype.destroy.apply(this, arguments); 
     184    }, 
     185 
     186    CLASS_NAME: "OpenLayers.Control.LoadingPanel" 
     187 
     188});