Some lessons learned from other untiled layers:

* Use existing Tile Class
 * Make the area double the current area, so we don't reload on one-pixel
   drag. 


git-svn-id: http://svn.openlayers.org/trunk/openlayers@1557 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Layer/WMS/Untiled.js

@@ -22,8 +22,8 @@ OpenLayers.Layer.WMS.Untiled.prototype =
                       format: "image/jpeg"
                      },
 
-    /** @type DOMElement */
+    /** @type OpenLayers.Tile.Image */
-    imgDiv: null,
+    tile: null,
     
 
     /**
@@ -62,7 +62,8 @@ OpenLayers.Layer.WMS.Untiled.prototype =
      * 
      */
     destroy: function() {
-        this.imgDiv = null;    
+        this.tile.destroy();
+        this.tile = null;    
         OpenLayers.Layer.HTTPRequest.prototype.destroy.apply(this, arguments);
     },
     
@@ -96,7 +97,6 @@ OpenLayers.Layer.WMS.Untiled.prototype =
      */
     setMap: function(map) {
         OpenLayers.Layer.HTTPRequest.prototype.setMap.apply(this, arguments);
-        this.loadImageDiv();
     },
 
     /** When it is not a dragging move (ie when done dragging)
@@ -107,62 +107,67 @@ OpenLayers.Layer.WMS.Untiled.prototype =
      * @param {Boolean} dragging
      */
     moveTo:function(bounds, zoomChanged, dragging) {
+        OpenLayers.Layer.HTTPRequest.prototype.moveTo.apply(this,arguments);
         
-        if (!dragging || zoomChanged) {
+        if (!bounds == null) {
+            bounds = this.map.getExtent();
+        }
 
-            if (bounds == null) {
+        var firstRendering = (this.tile == null);
-                bounds = this.map.getExtent();
+
+        //does the new bounds to which we need to move fall outside of the 
+        // current tile's bounds?
+        var outOfBounds = (!firstRendering &&
+                           !this.tile.bounds.containsBounds(bounds));
+
+        if ( zoomChanged || firstRendering || (!dragging && outOfBounds) ) {
+
+            //clear out the old tile 
+            if (this.tile) {
+                this.tile.clear();
             }
 
-            var size = this.map.getSize().clone();
+            //determine new tile bounds
+            var center = bounds.getCenterLonLat();
+            var tileBounds = 
+                new OpenLayers.Bounds(center.lon - bounds.getWidth(),
+                                      center.lat - bounds.getHeight(),
+                                      center.lon + bounds.getWidth(),
+                                      center.lat + bounds.getHeight());
 
-            // get the url
+            //determine new tile size
-            var url = this.getFullRequestString( {BBOX: bounds.toBBOX(),
+            var tileSize = this.map.getSize();
-                                                  WIDTH: size.w,
+            tileSize.w = tileSize.w * 2;
-                                                  HEIGHT: size.h} );
+            tileSize.h = tileSize.h * 2;
 
+            //formulate request url string
+            var url = this.getURL(tileBounds); 
 
-            // always position at upper left corner of current viewspace
+            //determine new position (upper left corner of new bounds)
-            var tl = new OpenLayers.Pixel(0,0);
+            var ul = new OpenLayers.LonLat(tileBounds.left, tileBounds.top);
-            var pos = this.map.getLayerPxFromViewPortPx(tl);
+            var pos = this.map.getLayerPxFromLonLat(ul);
 
-            // first hide before all modifications            
+            if (!this.tile) {
-            Element.hide(this.imgDiv);
+                this.tile = new OpenLayers.Tile.Image(this, pos, tileBounds, 
-            
+                                                     url, tileSize);
-            // update div
+                this.tile.draw();
-            var img = this.imgDiv;
-            if (this.params.TRANSPARENT == 'true') {
-                OpenLayers.Util.modifyAlphaImageDiv(this.imgDiv, 
-                                                    null, 
-                                                    pos, 
-                                                    size,
-                                                    url);
-                img = this.imgDiv.childNodes[0];
             } else {
-                OpenLayers.Util.modifyDOMElement(this.imgDiv, 
+                this.tile.moveTo(tileBounds, pos);
-                                                 null, 
-                                                 pos, 
-                                                 size);
-                this.imgDiv.src = url;
             } 
     
-            // wait until image is done loading to show again
-            Event.observe(img, 
-                          "load", 
-                          this.showDiv.bindAsEventListener(this));
         }
     },
     
-    /** Helper function that allows us to first hide the imgDiv, then make all 
+    getURL: function(bounds) {
-     *   the changes (position, size, url). Then when the url is done loading,
+        var tileSize = this.map.getSize();
-     *   we call this function to show the imgDiv.
+        tileSize.w = tileSize.w * 2;
-     * 
+        tileSize.h = tileSize.h * 2;
-     * @private
+        return this.getFullRequestString( {'BBOX': bounds.toBBOX(),
-     */
+                                                  'WIDTH': tileSize.w,
-    showDiv: function() {
+                                                  'HEIGHT': tileSize.h} );
-        Element.show(this.imgDiv);
     },
  
+    
     /** Once HTTPRequest has updated the url, reload the image div
      * @param {String} newUrl
      */
@@ -201,48 +206,6 @@ OpenLayers.Layer.WMS.Untiled.prototype =
                                                     this, arguments);
     },
     
-    /** This function first removes the previous image div, then adds a new
-     *   one according to the transparency property.
-     * 
-     * @private
-     */
-    loadImageDiv: function() {
-        
-        var size = this.map.getSize().clone();
-        var bounds = this.map.getExtent();
-
-        var url = "";            
-        if (bounds != null) {
-            url = this.getFullRequestString( {BBOX: bounds.toBBOX(),
-                                              WIDTH: size.w,
-                                              HEIGHT: size.h} );
-        }
-        
-        //clear previous wms image (removes imgDiv)
-        this.div.innerHTML = "";
-        
-        //always position at upper left corner of current viewspace
-        var tl = new OpenLayers.Pixel(0,0);
-        var pos = this.map.getLayerPxFromViewPortPx(tl);
-        
-        //create div
-        if (this.params.TRANSPARENT == 'true') {
-            this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null,
-                                                              pos,
-                                                              size,
-                                                              url,
-                                                              "absolute");
-        } else {
-            this.imgDiv = OpenLayers.Util.createImage(null,
-                                                      pos,
-                                                      size,
-                                                      url,
-                                                      "absolute");
-        }
-        
-        this.div.appendChild(this.imgDiv);
-    },
-        
     /** @final @type String */
     CLASS_NAME: "OpenLayers.Layer.WMS.Untiled"
 });