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

@@ -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');
 

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');
             

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');
             

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 = {

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');
 

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;

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 = "";
 };

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);

tests/manual/clip-features-svg.html

@@ -4,21 +4,27 @@
 href="../../theme/default/style.css"
 rel="stylesheet" type="text/css">
 <style>
-       #map {
+        #map {
-             width: 512px;
+            width: 512px;
-             height: 512px;
+            height: 512px;
-             border: 1px solid #4B3624;
+            border: 1px solid #4B3624;
-             background: White;
+            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
+      // increase reload attempts 
-     OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
+      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
-     OpenLayers.Util.onImageLoadErrorColor = "transparent";
 
       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>
+</html>

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');

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 = {

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 = {

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
  */