Improved dateline handling for Grid layers. r=bartvde (closes #3521)

lib/OpenLayers/Layer.js

@@ -293,7 +293,10 @@ OpenLayers.Layer = OpenLayers.Class({
 
     /**
      * APIProperty: wrapDateLine
-     * {Boolean} #487 for more info.   
+     * {Boolean} Wraps the world at the international dateline, so the map can
+     * be panned infinitely in longitudinal direction. Only use this on the
+     * base layer, and only if the layer's maxExtent equals the world bounds.
+     * #487 for more info.   
      */
     wrapDateLine: false,
     

lib/OpenLayers/Layer/Grid.js

@@ -403,6 +403,18 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * tileoffsetlat, tileoffsetx, tileoffsety
      */
     calculateGridLayout: function(bounds, origin, resolution) {
+        bounds = bounds.clone();
+        if (this.map.baseLayer.wrapDateLine) {
+            var maxExtent = this.map.getMaxExtent(),
+                width = maxExtent.getWidth();
+            // move the bounds one world width to the right until the origin is
+            // within the world extent
+            while (bounds.left < maxExtent.left) {
+                bounds.left += width;
+                bounds.right += width;
+            } 
+        }
+        
         var tilelon = resolution * this.tileSize.w;
         var tilelat = resolution * this.tileSize.h;
         

lib/OpenLayers/Tile.js

@@ -103,7 +103,7 @@ OpenLayers.Tile = OpenLayers.Class({
     initialize: function(layer, position, bounds, url, size, options) {
         this.layer = layer;
         this.position = position.clone();
-        this.bounds = bounds.clone();
+        this.setBounds(bounds);
         this.url = url;
         if (size) {
             this.size = size.clone();
@@ -172,13 +172,54 @@ OpenLayers.Tile = OpenLayers.Class({
      * {Boolean} Whether or not the tile should actually be drawn.
      */
     shouldDraw: function() {        
-        var maxExtent = this.layer.maxExtent;
+        var withinMaxExtent = false,
-        var withinMaxExtent = (maxExtent &&
+            maxExtent = this.layer.maxExtent;
-                               this.bounds.intersectsBounds(maxExtent, false));
+        if (maxExtent) {
+            // prepare up to 3 versions of the layer's maxExtent, to make sure
+            // that the intersectsBounds check below catches all cases of
+            // extents that cross the dateline:
+            // (1) left bound positive, right bound negative (wrapped)
+            // (2) left bound positive, right bound positive (exceeding world)
+            // (3) left bound negative (exceeding world), right bound positive
+            var maxExtents = [maxExtent];
+            if (this.layer.map.baseLayer.wrapDateLine) {
+                if (maxExtent.left > maxExtent.right) {
+                    var worldWidth = this.layer.map.getMaxExtent().getWidth();
+                    maxExtent = this.layer.maxExtent.clone();
+                    maxExtent.left -= worldWidth;
+                    maxExtents.push(maxExtent);
+                    maxExtent = this.layer.maxExtent.clone();
+                    maxExtent.right += worldWidth;
+                    maxExtents.push(maxExtent);
+                }
+            }
+            for (var i=maxExtents.length-1; i>=0; --i) {
+                if (this.bounds.intersectsBounds(maxExtents[i], false)) {
+                    withinMaxExtent = true;
+                    break;
+                }
+            }
+        }
         
         return withinMaxExtent || this.layer.displayOutsideMaxExtent;
     },
     
+    /**
+     * Method: setBounds
+     * Sets the bounds on this instance
+     *
+     * Parameters:
+     * bounds {<OpenLayers.Bounds>}
+     */
+    setBounds: function(bounds) {
+        bounds = bounds.clone();
+        if (this.layer.map.baseLayer.wrapDateLine) {
+            var worldExtent = this.layer.map.getMaxExtent();
+            bounds = bounds.wrapDateLine(worldExtent);
+        }
+        this.bounds = bounds;
+    },
+    
     /** 
      * Method: moveTo
      * Reposition the tile.
@@ -194,7 +235,7 @@ OpenLayers.Tile = OpenLayers.Class({
             redraw = true;
         }
 
-        this.bounds = bounds.clone();
+        this.setBounds(bounds);
         this.position = position.clone();
         if (redraw) {
             this.draw();

tests/manual/dateline-smallextent.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>OpenLayers: Sketch handlers crossing the dateline</title>
+    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="../../examples/style.css" type="text/css">
+    <style type="text/css">
+        #map {
+            height: 512px;
+        }
+    </style>
+
+    <script src="../../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+
+// make map available for easy debugging
+var map;
+
+function init(){
+    map = new OpenLayers.Map('map');
+
+    var osm = new OpenLayers.Layer.OSM(
+        "OSM", null,
+        {wrapDateLine: true}
+    );
+    var extent = new OpenLayers.Bounds(15849982.183008, -11368938.517442, -14206280.326992, -1350184.3474419);
+    var wms = new OpenLayers.Layer.WMS( "world",
+        "http://demo.opengeo.org/geoserver/wms",
+        {layers: 'world', transparent: true},
+        {maxExtent: extent}
+    );
+
+    map.addLayers([osm, wms]);
+
+    map.zoomToExtent(extent);
+}
+
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">OpenLayers overlays crossing the dateline test</h1>
+
+    <p id="shortdesc">
+        The overlay has an extent smaller than the world extent. The base layer
+        is configured with wrapDateLine set to true. New Zealand and a part of
+        Australia should always be visible on the map.
+    </p>
+    <div id="map" class="smallmap"></div>
+  </body>
+</html>