From f0000576593c2119eb0d534daff4d5e85cfd4c92 Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Sat, 24 Oct 2009 05:57:41 +0000
Subject: [PATCH] making pink tiles a css matter. p=rdewit, r=me (closes #2318)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@9758 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 examples/draw-feature.html          |   6 +++++-
 examples/measure.html               |   6 +++++-
 examples/regular-polygons.html      |   6 +++++-
 examples/spherical-mercator.html    |   8 ++++++--
 examples/split-feature.html         |   7 ++++++-
 examples/wmc.html                   |   8 ++++++--
 lib/OpenLayers/Util.js              |  11 ++---------
 tests/Util.html                     |  13 +++++++++++++
 tests/manual/clip-features-svg.html |  26 ++++++++++++++++----------
 tests/manual/google-panning.html    |   8 +++++++-
 tests/manual/tiles-loading.html     |   4 ++--
 tests/manual/ve-opacity.html        |   5 ++---
 theme/default/img/broken.png        | Bin 0 -> 223 bytes
 theme/default/style.css             |   9 ++++++++-
 14 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 theme/default/img/broken.png

diff --git a/examples/draw-feature.html b/examples/draw-feature.html
index 2affeba8b0..24c3cfe9e6 100644
--- a/examples/draw-feature.html
+++ b/examples/draw-feature.html
@@ -11,11 +11,15 @@
             p {
                 width: 512px;
             }
+
+            /* avoid pink tiles */
+            .olImageLoadError {
+                background-color: transparent !important;
+            }
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, drawControls;
-            OpenLayers.Util.onImageLoadErrorColor = "transparent";
             function init(){
                 map = new OpenLayers.Map('map');
 
diff --git a/examples/measure.html b/examples/measure.html
index d5e0f34c5c..fa95b1ec13 100644
--- a/examples/measure.html
+++ b/examples/measure.html
@@ -16,11 +16,15 @@
         #output {
             float: right;
         }
+
+        /* avoid pink tiles */
+        .olImageLoadError {
+            background-color: transparent !important;
+        }
     </style>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, measureControls;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
         function init(){
             map = new OpenLayers.Map('map');
             
diff --git a/examples/regular-polygons.html b/examples/regular-polygons.html
index c40e70a102..d316329578 100644
--- a/examples/regular-polygons.html
+++ b/examples/regular-polygons.html
@@ -28,11 +28,15 @@
             margin-left: 15em;
             position: absolute;
         }
+
+        /* avoid pink tiles */
+        .olImageLoadError {
+            background-color: transparent !important;
+        }
     </style>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, polygonControl;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
         function init(){
             map = new OpenLayers.Map('map');
             
diff --git a/examples/spherical-mercator.html b/examples/spherical-mercator.html
index 502aa0c466..7327b05c4a 100644
--- a/examples/spherical-mercator.html
+++ b/examples/spherical-mercator.html
@@ -8,6 +8,11 @@
         #map {
             height: 512px;
         }
+
+        /* avoid pink tiles */
+        .olImageLoadError {
+            background-color: transparent !important;
+        }
     </style>
 
     <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
@@ -20,9 +25,8 @@
         // make map available for easy debugging
         var map;
 
-        // avoid pink tiles
+        // increase reload attempts 
         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
 
         function init(){
             var options = {
diff --git a/examples/split-feature.html b/examples/split-feature.html
index c235ba46a5..4effe06275 100644
--- a/examples/split-feature.html
+++ b/examples/split-feature.html
@@ -4,10 +4,15 @@
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
+        <style>
+            /* avoid pink tiles */
+            .olImageLoadError {
+                background-color: transparent !important;
+            }
+        </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, vectors, split;
-            OpenLayers.Util.onImageLoadErrorColor = "transparent";
             function init(){
                 map = new OpenLayers.Map('map');
 
diff --git a/examples/wmc.html b/examples/wmc.html
index 5cfffd8463..875cfcdda8 100644
--- a/examples/wmc.html
+++ b/examples/wmc.html
@@ -7,14 +7,18 @@
             width: 90%;
             height: 300px;
         }
+
+        /* avoid pink tiles */
+        .olImageLoadError {
+            background-color: transparent !important;
+        }
     </style>
     <script src="../lib/Firebug/firebug.js"></script>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
 
-        // no pink please
+        // increase reload attempts 
         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
         
         var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
         var doc, context, map;
diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js
index 970926b3e7..7b03fa81f2 100644
--- a/lib/OpenLayers/Util.js
+++ b/lib/OpenLayers/Util.js
@@ -342,18 +342,10 @@ OpenLayers.Util.onImageLoad = function() {
     //
     if (!this.viewRequestID ||
         (this.map && this.viewRequestID == this.map.viewRequestID)) { 
-        this.style.backgroundColor ="transparent";
         this.style.display = "";  
     }
 };
 
-/**
- * Property: onImageLoadErrorColor
- * {String} The color tiles with load errors will turn.
- *          Default is "pink"
- */
-OpenLayers.Util.onImageLoadErrorColor = "pink";
-
 /**
  * Property: IMAGE_RELOAD_ATTEMPTS
  * {Integer} How many times should we try to reload an image before giving up?
@@ -388,7 +380,8 @@ OpenLayers.Util.onImageLoadError = function() {
             this.src = this.src;
         }
     } else {
-        this.style.backgroundColor = OpenLayers.Util.onImageLoadErrorColor;
+        this.src = OpenLayers.Util.getImagesLocation() + "blank.gif";
+        OpenLayers.Element.addClass(this, "olImageLoadError");
     }
     this.style.display = "";
 };
diff --git a/tests/Util.html b/tests/Util.html
index 08e36fa30c..c4d6436e68 100644
--- a/tests/Util.html
+++ b/tests/Util.html
@@ -176,6 +176,19 @@
 
     }
 
+    function test_Util_imageLoadError(t) {
+        t.plan(2);
+
+        var blank_image_url = OpenLayers.Util.getImagesLocation() + "blank.gif";
+        var img = OpenLayers.Util.createImage(null, null, null, null, null, null, 
+                                              null, false);
+
+        img._attempts = OpenLayers.IMAGE_RELOAD_ATTEMPTS + 1;
+        OpenLayers.Util.onImageLoadError.call(img);
+        t.ok(OpenLayers.Util.isEquivalentUrl(blank_image_url, img.src), 'broken image correctly has url for blank image as src');
+        t.ok(OpenLayers.Element.hasClass(img, 'olImageLoadError'), 'broken image has class olImageLoadError');
+    }
+
     function test_Util_applyDefaults(t) {
     
         t.plan(12);
diff --git a/tests/manual/clip-features-svg.html b/tests/manual/clip-features-svg.html
index 0fdad9ebb1..0f300c2cd6 100644
--- a/tests/manual/clip-features-svg.html
+++ b/tests/manual/clip-features-svg.html
@@ -4,21 +4,27 @@
 href="../../theme/default/style.css"
 rel="stylesheet" type="text/css">
 <style>
-       #map {
-             width: 512px;
-             height: 512px;
-             border: 1px solid #4B3624;
-             background: White;
-       }
+        #map {
+            width: 512px;
+            height: 512px;
+            border: 1px solid #4B3624;
+            background: White;
+        }
+
+        /* avoid pink tiles */
+        .olImageLoadError {
+            border: none !important;
+            background: none !important;
+        }
+
        .olControlAttribution { bottom: 0px!important }
 </style>
 <script src="../../lib/OpenLayers.js"
 type="text/javascript"></script>
 <script type="text/javascript">var map;
 
-     // avoid pink tiles
-     OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-     OpenLayers.Util.onImageLoadErrorColor = "transparent";
+      // increase reload attempts 
+      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
 
       var vectorLayer;
       var markerLayer, boxes, newPoint;
@@ -120,4 +126,4 @@ Zoom 6.  No lines.</p>
     <button onClick="zoomToScale(7);">Zoom 7</button>
     <button onClick="zoomToScale(8);">Zoom 8</button>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tests/manual/google-panning.html b/tests/manual/google-panning.html
index 0b2fe3aed0..cbc13e3305 100644
--- a/tests/manual/google-panning.html
+++ b/tests/manual/google-panning.html
@@ -24,6 +24,11 @@
             height: 255px;
         }
 
+        /* avoid pink tiles */
+        .olImageLoadError {
+            border: none !important;
+            background: none !important;
+        }
 
     </style>
 
@@ -33,8 +38,9 @@
     <script type="text/javascript">
  
         var evenmap, oddmap;
+
+        // increase reload attempts 
         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
 
         function init(){
             evenmap = new OpenLayers.Map('evenmap');
diff --git a/tests/manual/tiles-loading.html b/tests/manual/tiles-loading.html
index 52cdaf9db4..cbd0e106e6 100644
--- a/tests/manual/tiles-loading.html
+++ b/tests/manual/tiles-loading.html
@@ -14,6 +14,7 @@
             width: 512px;
             height: 512px;
         }
+
     </style>
 
     <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
@@ -22,9 +23,8 @@
         // make map available for easy debugging
         var map;
 
-        // avoid pink tiles
+        // increase reload attempts 
         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
 
         function init(){
             var options = {
diff --git a/tests/manual/ve-opacity.html b/tests/manual/ve-opacity.html
index 8352941add..22fa43a4f2 100644
--- a/tests/manual/ve-opacity.html
+++ b/tests/manual/ve-opacity.html
@@ -8,7 +8,7 @@
         }
     </style>
 
-    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>
+    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
 
     <script src="../../lib/OpenLayers.js"></script>
     <script type="text/javascript">
@@ -16,9 +16,8 @@
         // make map available for easy debugging
         var map;
 
-        // avoid pink tiles
+        // increase reload attempts 
         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-        OpenLayers.Util.onImageLoadErrorColor = "transparent";
 
         function init(){
             var options = {
diff --git a/theme/default/img/broken.png b/theme/default/img/broken.png
new file mode 100644
index 0000000000000000000000000000000000000000..38e6d1932cc16a3d02536b25c81bf81cdf18dc0d
GIT binary patch
literal 223
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|I14-?iy0WW
zg+Z8+Vb&Z8pdfpRr>`sfO)d!reG8dq45>h&LQfaR5R22v2@3=als2C245$~Hzr>Q!
zQZXlMhDX6$Yc{sF+b`M-Cca4JagOk~&~vr>h*W`e@A|IO+#3!gIdGX2oA|!(DAcOz
zm@VAJ8?<;zhG#LGkaHwQfAPf3;+k#T4>^1koe~rL{AMLAJaRsSk-=yw--;>6?wkZ#
O&fw|l=d#Wzp$P!t*G4q}

literal 0
HcmV?d00001

diff --git a/theme/default/style.css b/theme/default/style.css
index 4c6183f277..110f23cc8f 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -1,5 +1,5 @@
 div.olMap {
-	z-index: 0;
+    z-index: 0;
     padding: 0px!important;
     margin: 0px!important;
     cursor: default;
@@ -322,6 +322,13 @@ div.olControlSaveFeaturesItemInactive {
  -moz-user-select: none;
 }
 
+.olImageLoadError {
+    border: ridge 2px gray;
+    background: pink url("img/broken.png");
+    background-repeat: no-repeat;
+    background-position: 5px 5px;
+}
+
 /**
  * Cursor styles
  */