Skip to content
This repository

New events: loaderror for Tile, tileerror for Layer.Grid. #283

Merged
merged 1 commit into from about 2 years ago

2 participants

Andreas Hocevar Bart van den Eijnden
Andreas Hocevar
Owner

With this event, users that previously used OpenLayers.Util.onImageLoadError now have an API way to handle tile loading errors with more than just a static background image.

The new events will also be useful for offline storage of tiles, to fall back from an online image to one from local storage.

Bart van den Eijnden
Owner

This looks good, no remarks, please merge if you can confirm that relevant tests still pass in IE8, IE9, Chrome, Safari and Firefox. TIA.

Andreas Hocevar ahocevar merged commit d6ffd60 into from
Andreas Hocevar ahocevar closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Mar 05, 2012
Andreas Hocevar New events: loaderror for Tile, tileerror for Layer.Grid. fe63d0a
This page is out of date. Refresh to see the latest.
20  lib/OpenLayers/Layer/Grid.js
@@ -202,6 +202,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
202 202
      *     track of the loading progress. Listeners are called with an object
203 203
      *     with a tile property as first argument, making the loded tile
204 204
      *     available to the listener.
  205
+     * tileerror - Triggered before the tileloaded event (i.e. when the tile is
  206
+     *     still hidden) if a tile failed to load. Listeners receive an object
  207
+     *     as first argument, which has a tile property that references the
  208
+     *     tile that could not be loaded.
205 209
      */
206 210
 
207 211
     /**
@@ -969,7 +973,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
969 973
             }
970 974
             this.numLoadingTiles++;
971 975
         };
972  
-        tile.events.register("loadstart", this, tile.onLoadStart);
973 976
       
974 977
         tile.onLoadEnd = function() {
975 978
             this.numLoadingTiles--;
@@ -987,8 +990,18 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
987 990
                 }
988 991
             }
989 992
         };
990  
-        tile.events.register("loadend", this, tile.onLoadEnd);
991  
-        tile.events.register("unload", this, tile.onLoadEnd);
  993
+        
  994
+        tile.onLoadError = function() {
  995
+            this.events.triggerEvent("tileerror", {tile: tile});
  996
+        };
  997
+        
  998
+        tile.events.on({
  999
+            "loadstart": tile.onLoadStart,
  1000
+            "loadend": tile.onLoadEnd,
  1001
+            "unload": tile.onLoadEnd,
  1002
+            "loaderror": tile.onLoadError,
  1003
+            scope: this
  1004
+        });
992 1005
     },
993 1006
 
994 1007
     /** 
@@ -1005,6 +1018,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
1005 1018
             "loadstart": tile.onLoadStart,
1006 1019
             "loadend": tile.onLoadEnd,
1007 1020
             "unload": tile.onLoadEnd,
  1021
+            "loaderror": tile.onLoadError,
1008 1022
             scope: this
1009 1023
         });
1010 1024
     },
2  lib/OpenLayers/Tile.js
@@ -40,6 +40,8 @@ OpenLayers.Tile = OpenLayers.Class({
40 40
      *     to call <draw>(true) to actually draw the tile.
41 41
      * loadstart - Triggered when tile loading starts.
42 42
      * loadend - Triggered when tile loading ends.
  43
+     * loaderror - Triggered before the loadend event (i.e. when the tile is
  44
+     *     still hidden) if the tile could not be loaded.
43 45
      * reload - Triggered when an already loading tile is reloaded.
44 46
      * unload - Triggered before a tile is unloaded.
45 47
      */
1  lib/OpenLayers/Tile/Image.js
@@ -425,6 +425,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
425 425
                 this.setImgSrc(this.layer.getURL(this.bounds));
426 426
             } else {
427 427
                 OpenLayers.Element.addClass(img, "olImageLoadError");
  428
+                this.events.triggerEvent("loaderror");
428 429
                 this.onImageLoad();
429 430
             }
430 431
         }
6  notes/2.12.md
Source Rendered
@@ -133,6 +133,12 @@ The internal `OpenLayers.Layer.getURLasync` function now take a bound, a callbac
133 133
 
134 134
 Vector editing across the date line works reliably now. To make this work, OpenLayers won't zoom out to resolutions where more than one world is visible any more. For maps that have base layers with wrapDateLine set to false, no zoom restrictions apply.
135 135
 
  136
+## OpenLayers.Util.onImageLoadError no longer exists
  137
+
  138
+To replace a tile that couldn't be loaded with a static image, create a css selector for the `.olImageLoadError` class (e.g. a `background-image`).
  139
+
  140
+For more complex tile loading error handling, register a listener to the layer's `tileerror` event.
  141
+
136 142
 ## Deprecated Components
137 143
 
138 144
 A number of properties, methods, and constructors have been marked as deprecated for multiple releases in the 2.x series.  For the 2.12 release this deprecated functionality has been moved to a separate deprecated.js file.  If you use any of the constructors or methods below, you will have to explicitly include the deprecated.js file in your build (or add it in a separate `<script>` tag after OpenLayers.js).
14  tests/Layer/Grid.html
@@ -506,7 +506,7 @@
506 506
     }  
507 507
      
508 508
     function test_Layer_Grid_addTileMonitoringHooks(t) {
509  
-        t.plan(15);
  509
+        t.plan(17);
510 510
         
511 511
         layer = new OpenLayers.Layer.Grid();
512 512
         layer.events = {
@@ -519,6 +519,13 @@
519 519
             events: {
520 520
                 register: function(name, obj, func) {
521 521
                     g_registered[name] = [obj, func];
  522
+                },
  523
+                on: function(obj) {
  524
+                    for (var o in obj) {
  525
+                        if (obj.hasOwnProperty(o)) {
  526
+                            tile.events.register(o, obj.scope, obj[o]);
  527
+                        }
  528
+                    }
522 529
                 }
523 530
             }
524 531
         }
@@ -551,6 +558,11 @@
551 558
         entry = g_registered["loadend"];
552 559
         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadEnd, "loadend correctly registered");
553 560
         
  561
+        g_events = [];
  562
+        tile.onLoadError.apply(layer);
  563
+        t.eq(g_events[0][0], "tileerror", "tileerror triggered");
  564
+        t.ok(g_events[0][1].tile === tile, "tile passed as tile property to event object");
  565
+        
554 566
         layer.numLoadingTiles = 2; 
555 567
         g_events = [];
556 568
         tile.onLoadEnd.apply(layer);
19  tests/Tile/Image.html
@@ -375,7 +375,7 @@
375 375
     // test for https://github.com/openlayers/openlayers/pull/36
376 376
     // (more an integration test than a unit test)
377 377
     function test_olImageLoadError(t) {
378  
-        t.plan(2);
  378
+        t.plan(6);
379 379
 
380 380
         var map = new OpenLayers.Map('map');
381 381
         var layer = new OpenLayers.Layer.WMS("invalid",  "", {layers: 'basic'});
@@ -386,10 +386,25 @@
386 386
         var bounds = new OpenLayers.Bounds(1, 2, 3, 4);
387 387
 
388 388
         var tile = new OpenLayers.Tile.Image(layer, position, bounds, null, size);
  389
+        var log = [];
  390
+        tile.events.register("loaderror", this, function(e) {
  391
+            log.push([
  392
+                e.object.imgDiv.style.visibility,
  393
+                OpenLayers.Element.hasClass(e.object.imgDiv, 'olImageLoadError')
  394
+            ]);
  395
+        });
  396
+        tile.events.register("loadend", this, function(e) {
  397
+            log.push(e);
  398
+        })
389 399
         tile.draw();
390 400
 
391 401
         t.delay_call(0.1, function() {
392  
-
  402
+            
  403
+            t.eq(log.length, 2, "loaderror and loadend events triggered");
  404
+            t.eq(log[0][0], "hidden", "tile still hidden when loaderror is triggered");
  405
+            t.eq(log[0][1], true, "tile has olImageLoadError class already when loaderror is triggered");
  406
+            t.ok(log[1].object === tile, "loadend event triggered after loaderror");
  407
+            
393 408
             // check initial state
394 409
             t.ok(OpenLayers.Element.hasClass(tile.imgDiv, 'olImageLoadError'),
395 410
                  'tile image has the olImageLoadError class (init state)');
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.