]> dev.renevier.net Git - syp.git/blob - openlayers/tests/Layer/Grid.html
add some margin around image
[syp.git] / openlayers / tests / Layer / Grid.html
1 <html>
2 <head>
3   <script src="../../lib/OpenLayers.js"></script>
4   <script type="text/javascript">
5     var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
6     var layer; 
7
8     var name = 'Test Layer';
9     var url = "http://octo.metacarta.com/cgi-bin/mapserv";
10     var params = { map: '/mapdata/vmap_wms.map', 
11                    layers: 'basic', 
12                    format: 'image/png'};
13
14     /**
15      *  NOTE TO READER:
16      * 
17      *    Some of the tests on the Grid class actually use the WMS class. 
18      *    This is because WMS is a subclass of Grid and it implements the 
19      *    core functions which are necessary to test the tile-generation 
20      *    mechanism. 
21      * 
22      */
23
24
25     function test_Layer_Grid_constructor (t) {
26         t.plan( 8 );
27                        
28         layer = new OpenLayers.Layer.Grid(name, url, params, null);
29         t.ok( layer instanceof OpenLayers.Layer.Grid, "returns OpenLayers.Layer.Grid object" );
30         t.eq( layer.buffer, 2, "buffer default is 2");
31         t.eq( layer.ratio, 1.5, "ratio default is 1.5");
32         t.eq( layer.numLoadingTiles, 0, "numLoadingTiles starts at 0");
33         t.ok( layer.events.listeners["tileloaded"] != null, "'tileloaded' event added to layer's event types");
34         t.ok( OpenLayers.Util.indexOf(layer.events.eventTypes, 'tileloaded') != -1 ,"'tileloaded' event added to layer's event types");
35
36         //regression testing for #1502
37         t.ok( layer.events.listeners['tileloaded'].length == 0, "no listeners for tileloaded preregister");        
38
39         var obj = {};
40         var func = function() {};
41         layer.events.register('tileloaded', obj, func);        
42
43         t.ok( layer.events.listeners['tileloaded'].length == 1, "one listener for tileloaded after register");        
44     }
45
46
47     function test_Layer_Grid_inittiles (t) {
48         t.plan( 2 );
49         var map = new OpenLayers.Map('map');
50         layer = new OpenLayers.Layer.WMS(name, url, params);
51         map.addLayer(layer);
52         map.setCenter(new OpenLayers.LonLat(0,0),5);
53         t.eq( layer.grid.length, 7, "Grid rows is correct." );
54         t.eq( layer.grid[0].length, 6, "Grid cols is correct." );
55         
56     }
57
58     function test_Layer_Grid_clearTiles (t) {
59         t.plan(3);
60
61         var map = new OpenLayers.Map('map');
62         layer = new OpenLayers.Layer.WMS(name, url, params);
63         map.addLayer(layer);
64
65         map.setCenter(new OpenLayers.LonLat(0,0));
66
67         var numTiles = layer.grid.length * layer.grid[0].length;
68
69         //our count of how many times tile.destroy() is called
70         tilesDeleted = 0;
71         
72         //this will get set to false if we try to destroy a tile that has 
73         // not been unhookedv
74         allTilesUnhooked = true;
75         
76         OpenLayers.Tile.Image.prototype._destroy =
77             OpenLayers.Tile.Image.prototype.destroy;
78
79         OpenLayers.Tile.Image.prototype.destroy = function() {
80             if (!this.unhooked) {
81                 allTilesUnhooked = false;
82             }
83             tilesDeleted++;
84         }
85
86         layer.removeTileMonitoringHooks = function(tile) {
87             tile.unhooked = true;            
88         }
89
90         layer.clearGrid();
91
92         t.ok( layer.grid != null, "layer.grid does not get nullified" );
93         t.eq(tilesDeleted, numTiles, "all tiles destroy()ed properly");
94         t.ok(allTilesUnhooked, "all tiles unhooked before being destroyed");
95
96         OpenLayers.Tile.Image.prototype.destroy =
97             OpenLayers.Tile.Image.prototype._destroy;
98         
99     }
100
101
102     function test_Layer_Grid_getTilesBounds(t) {
103         t.plan( 4 );
104
105         layer = new OpenLayers.Layer.WMS(name, url, params);
106
107
108     //normal grid
109         var bl = { bounds: new OpenLayers.Bounds(1,2,0,0)};
110         var tr = { bounds: new OpenLayers.Bounds(0,0,3,4)};
111         layer.grid = [ [6, tr], 
112                        [bl, 7]];
113
114         var bounds = layer.getTilesBounds();
115         var testBounds = new OpenLayers.Bounds(1,2,3,4);
116         
117         t.ok( bounds.equals(testBounds), "getTilesBounds() returns correct bounds");
118         
119         var bounds = layer.getGridBounds();
120         
121         t.ok( bounds.equals(testBounds), "getGridBounds() wrapper works the same as getTilesBounds.");
122
123     //no tiles
124         layer.grid = [];
125         bounds = layer.getTilesBounds();
126         
127         t.ok(bounds == null, "getTilesBounds() on a tile-less grid returns null");
128         
129
130     //singleTile
131         var singleTile = { bounds: new OpenLayers.Bounds(1,2,3,4)};
132         layer.grid = [ [ singleTile ] ];
133         bounds = layer.getTilesBounds();
134         
135         t.ok( bounds.equals(testBounds), "getTilesBounds() returns correct bounds");
136         
137     }
138
139     function test_Layer_Grid_getResolution(t) {
140         t.plan( 1 );
141
142         var map = new OpenLayers.Map('map');
143         layer = new OpenLayers.Layer.WMS(name, url, params);
144         map.addLayer(layer);
145
146         map.zoom = 5;
147
148         t.eq( layer.getResolution(), 0.0439453125, "getResolution() returns correct value");
149     }
150
151     function test_Layer_Grid_getZoomForExtent(t) {
152         t.plan( 2 );
153         var bounds, zoom;
154
155         var map = new OpenLayers.Map('map');
156         layer = new OpenLayers.Layer.WMS(name, url, params);
157         map.addLayer(layer);
158
159         bounds = new OpenLayers.Bounds(10,10,12,12);
160         zoom = layer.getZoomForExtent(bounds);
161
162         t.eq( zoom, 8, "getZoomForExtent() returns correct value");
163
164         bounds = new OpenLayers.Bounds(10,10,100,100);
165         zoom = layer.getZoomForExtent(bounds);
166
167         t.eq( zoom, 2, "getZoomForExtent() returns correct value");
168     }   
169     
170     function test_Layer_Grid_moveTo(t) {
171
172     t.plan(13);
173
174         var map = new OpenLayers.Map('map');
175         layer = new OpenLayers.Layer.WMS(name, url, params);
176         layer.destroy = function() {}; //we're going to do funky things with the grid
177         map.addLayer(layer);
178
179     //make sure null bounds doesnt cause script error. 
180     // no test necessary, just action
181         map.getExtent = function() { return null; }
182         layer.singleTile = false;
183         layer.moveTo(); //checks to make sure null bounds doesnt break us
184   
185
186
187       //observing globals
188         layer.initSingleTile = function(bounds) {
189             g_WhichFunc = "InitSingle";
190             g_Bounds = bounds;
191         };
192         layer.initGriddedTiles = function(bounds) {
193             g_WhichFunc = "InitGridded";
194             g_Bounds = bounds;
195         };
196         layer.moveGriddedTiles = function(bounds) {
197             g_WhichFunc = "MoveGridded";
198             g_Bounds = bounds;
199         };
200         var clearTestBounds = function() {
201             g_WhichFunc = null;
202             g_Bounds = null;
203         };
204
205       //default map extent (tested every time below)
206         b = new OpenLayers.Bounds(0,0,100,100);        
207         map.getExtent = function() {
208             return b;
209         };
210         var tilesBounds = null;
211         layer.getTilesBounds = function() {
212             return tilesBounds;
213         }
214
215
216 //FORCE
217
218     //empty grid
219         layer.grid = [];
220        //grid
221         clearTestBounds();
222         layer.singleTile = false;
223         layer.moveTo()        
224         t.ok(g_Bounds.equals(b), "if grid is empty, initGridded called");
225         
226        //singletile
227         clearTestBounds();
228         layer.singleTile = true;
229         layer.moveTo()        
230         t.ok(g_Bounds.equals(b), "if grid is empty, initSingleTile called");
231
232     //zoomChanged
233         zoomChanged = true;
234         layer.grid = [ [ {} ] ];
235
236        //grid
237         clearTestBounds();
238         layer.singleTile = false;
239         layer.moveTo(null, zoomChanged);        
240         t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initGridded called");
241         
242        //singletile
243         clearTestBounds();
244         layer.singleTile = true;
245         layer.moveTo(null, zoomChanged);
246         t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called");
247
248
249         layer.getTilesBounds = function() {
250             return tilesBounds;
251         }
252         
253         
254
255 //NO FORCE
256         zoomChanged = false;
257         layer.grid = [ [ {} ] ];
258  
259    //single tile
260         layer.singleTile = true; 
261         
262       //DRAGGING   
263         var dragging = true;
264             
265         //in bounds
266         clearTestBounds();
267         tilesBounds = new OpenLayers.Bounds(-10,-10,110,110);
268         layer.moveTo(null, zoomChanged, dragging);
269         t.ok(g_Bounds == null, "if dragging and tile in bounds, no init()");
270         
271         //out bounds
272         clearTestBounds();
273         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
274         layer.moveTo(null, zoomChanged, dragging);
275         t.ok(g_Bounds == null, "if dragging and tile out of bounds, no init()");
276
277       //NOT DRAGGING
278         dragging = false;
279
280         //in bounds
281         clearTestBounds();
282         tilesBounds = new OpenLayers.Bounds(-10,-10,110,110);
283         layer.moveTo(null, zoomChanged, dragging);
284         t.ok(g_Bounds == null, "if dragging and tile in bounds, no init()");
285         
286         //out bounds
287         clearTestBounds();
288         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
289         layer.moveTo(null, zoomChanged, dragging);
290         t.ok(g_WhichFunc == "InitSingle", "if not dragging and tile out of bounds, we call initSingleTile()");
291         t.ok(g_Bounds.equals(b), "if not dragging and tile out of bounds, we call initSingleTile() with correct bounds");
292
293   
294    //gridded
295         layer.grid = [ [ {} ] ];
296         layer.singleTile = false;
297         
298         // drastic pan
299         clearTestBounds();
300         tilesBounds = new OpenLayers.Bounds(-150,-150,-120,-120);
301         layer.moveTo(null, zoomChanged);
302         t.ok(g_WhichFunc == "InitGridded", "if tiles drastically out of bounds, we call initGriddedTile()");
303         t.ok(g_Bounds.equals(b), "if tiles drastically out of bounds, we call initGriddedTile() with correct bounds");
304        
305         //regular move 
306         clearTestBounds();
307         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
308         layer.moveTo(null, zoomChanged);
309         t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()");
310         t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds");
311     }
312
313     /** THIS WOULD BE WHERE THE TESTS WOULD GO FOR 
314      *     
315      *    -insertColumn
316      *    -insertRow
317      * 
318
319     function 08_Layer_Grid_insertColumn(t) {
320     }
321
322     function 09_Layer_Grid_insertRow(t) {
323     }
324
325      * 
326      */
327
328     function test_Layer_Grid_clone(t) {
329         t.plan(5);
330         
331         var options = {tileSize: new OpenLayers.Size(500,50)};
332         var map = new OpenLayers.Map('map', options);
333         layer = new OpenLayers.Layer.Grid(name, url, params);
334         map.addLayer(layer);
335
336         layer.grid = [ [6, 7], 
337                        [8, 9]];
338
339         var clone = layer.clone();
340
341         t.ok( clone.grid != layer.grid, "clone does not copy grid");
342         t.ok( clone.grid.length == 0, "clone creates a new array instead");
343
344         t.ok( clone.tileSize.equals(layer.tileSize), "tileSize correctly cloned");
345
346         layer.tileSize.w += 40;
347
348         t.eq( clone.tileSize.w, 500, "changing layer.tileSize does not change clone.tileSize -- a fresh copy was made, not just copied reference");
349
350         t.eq( clone.alpha, layer.alpha, "alpha copied correctly");
351
352         layer.grid = null;
353     }
354
355     function test_Layer_Grid_setTileSize(t) {
356         t.plan(1);
357
358         OpenLayers.Layer.HTTPRequest.prototype._setTileSize = 
359             OpenLayers.Layer.HTTPRequest.prototype.setTileSize;
360
361         OpenLayers.Layer.HTTPRequest.prototype.setTileSize = function(size) {
362             g_Size = size;
363         };
364
365
366         layer = new OpenLayers.Layer.Grid(name, url, params, {
367             singleTile: true
368         });
369         mapSize = new OpenLayers.Size(100,1000);
370         layer.map = {
371             getSize: function() { return mapSize; }
372         }
373         
374         g_Size = null;
375         layer.setTileSize();
376         
377         var idealSize = new OpenLayers.Size(150,1500);
378         t.ok( g_Size && g_Size.equals(idealSize), "correctly calculated tile size passed to superclass setTileSize() function");
379  
380         OpenLayers.Layer.HTTPRequest.prototype.setTileSize = 
381             OpenLayers.Layer.HTTPRequest.prototype._setTileSize;
382     }
383     
384     function test_Layer_Grid_initSingleTile(t) {
385       t.plan( 11 );
386       
387         layer = new OpenLayers.Layer.Grid(name, url, params, {
388             singleTile: true,
389             ratio: 2
390         });
391         
392         var bounds = new OpenLayers.Bounds(-10,10,50,100);
393         
394         var desiredTileBounds = new OpenLayers.Bounds(-40,-35,80,145);
395         var desiredUL = new OpenLayers.LonLat(-40,145);
396         
397         translatedPX = {};
398         layer.map = {
399             getLayerPxFromLonLat: function(ul) {
400                 t.ok(ul.equals(desiredUL), "correct ul passed to translation");
401                 return translatedPX;        
402             }
403         }
404
405         var newTile = {
406             draw: function() {
407                 t.ok(true, "newly created tile has been drawn");
408             }
409         };
410         layer.addTile = function(tileBounds, px) {
411             t.ok(tileBounds.equals(desiredTileBounds), "correct tile bounds passed to addTile to create new tile");
412             t.ok(px == translatedPX, "correct tile px passed to addTile to create new tile");
413             return newTile;
414         };
415         layer.addTileMonitoringHooks = function(tile) {
416             t.ok(tile == newTile, "adding monitoring hooks to the newly added tile");
417         };
418         layer.removeExcessTiles = function(x,y) {
419             t.ok(x == 1 && y == 1, "removeExcessTiles called")  
420         };
421
422
423         layer.grid = [];
424         layer.initSingleTile(bounds);       
425       
426         t.ok(layer.grid[0][0] == newTile, "grid's 0,0 is set to the newly created tile");        
427         
428         var tile = { 
429             moveTo: function(tileBounds, px) {
430                 t.ok(tileBounds.equals(desiredTileBounds), "correct tile bounds passed to tile.moveTo()");
431                 t.ok(px == translatedPX, "correct tile px passed to tile.moveTo()");
432             }
433         }; 
434         layer.grid = [[ tile ]];
435         layer.initSingleTile(bounds);       
436       
437     }  
438      
439     function test_Layer_Grid_addTileMonitoringHooks(t) {
440         t.plan(14);
441         
442         layer = new OpenLayers.Layer.Grid();
443         layer.events = {
444             'triggerEvent': function(str) {
445                 g_events.push(str); 
446             }
447         }
448                 
449         var tile = {
450             events: {
451                 register: function(name, obj, func) {
452                     g_registered[name] = [obj, func];
453                 }
454             }
455         }
456
457         g_registered = {};
458         g_events = [];
459         
460         layer.addTileMonitoringHooks(tile);
461         
462     //loadstart
463         t.ok(tile.onLoadStart != null, "onLoadStart function created and added to tile");
464         entry =  g_registered["loadstart"];
465         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadStart, "loadstart correctly registered");
466
467         layer.numLoadingTiles = 0; 
468         g_events = [];
469         tile.onLoadStart.apply(layer);
470
471         t.eq(g_events[0], "loadstart", "loadstart event triggered when numLoadingTiles is 0");
472         t.eq(layer.numLoadingTiles, 1, "numLoadingTiles incremented");
473
474         g_events = [];
475         tile.onLoadStart.apply(layer);
476         t.eq(g_events.length, 0, "loadstart event not triggered when numLoadingTiles is not 0");
477         t.eq(layer.numLoadingTiles, 2, "numLoadingTiles incremented");
478
479
480     //loadend
481         t.ok(tile.onLoadEnd != null, "onLoadEnd function created and added to tile");
482         entry = g_registered["loadend"];
483         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadEnd, "loadend correctly registered");
484         
485         layer.numLoadingTiles = 2; 
486         g_events = [];
487         tile.onLoadEnd.apply(layer);
488         t.eq(g_events[0], "tileloaded", "tileloaded triggered when numLoadingTiles is > 0");
489         t.eq(g_events.length, 1, "loadend event not triggered when numLoadingTiles is > 0");
490         t.eq(layer.numLoadingTiles, 1, "numLoadingTiles decremented");
491
492
493         g_events = [];
494         tile.onLoadEnd.apply(layer);
495         t.eq(g_events[0], "tileloaded", "tileloaded triggered when numLoadingTiles is 0");
496         t.eq(g_events[1], "loadend", "loadend event triggered when numLoadingTiles is 0");
497         t.eq(layer.numLoadingTiles, 0, "numLoadingTiles decremented");
498     }
499     
500     function test_Layer_Grid_removeTileMonitoringHooks(t) {
501         t.plan(2);
502         
503         layer = new OpenLayers.Layer.Grid();
504                 
505         var tile = {
506             onLoadStart: {},
507             onLoadEnd: {},
508             unload: function() {},
509             events: {
510                 unregister: function(name, obj, func) {
511                     g_unregistered[name] = [obj, func];
512                 },
513                 un: OpenLayers.Events.prototype.un
514             }
515         }
516
517         g_unregistered = {};
518         
519         layer.removeTileMonitoringHooks(tile);
520         
521         entry =  g_unregistered["loadstart"];
522         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadStart, "loadstart correctly unregistered");
523
524         entry =  g_unregistered["loadend"];
525         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadEnd, "loadend correctly unregistered");
526     }
527     
528     function test_Layer_Grid_tileSizeIsInteger(t) {
529             t.plan(1);
530             
531         var map = new OpenLayers.Map('map');
532             var layer = new OpenLayers.Layer.Grid(name, url, params, {
533             singleTile: true,
534             ratio: 1.5
535         });
536         map.addLayers([layer]);
537         
538         width = layer.tileSize.w;
539         height = layer.tileSize.h;
540         t.ok(width == parseInt(width) && height == parseInt(height), "calculated tileSize width/height are integer values");
541     }
542     function test_Layer_Grid_getTileBounds(t) {
543         t.plan(2);
544         var map = new OpenLayers.Map("map2");
545         var url = "http://octo.metacarta.com/cgi-bin/mapserv";
546         layer = new OpenLayers.Layer.WMS(name, url, params);
547         
548         var newParams = { layers: 'sooper', 
549                           chickpeas: 'image/png'};
550
551         map.addLayer(layer);
552         map.zoomToMaxExtent();
553         map.zoomIn();
554         var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200));
555         t.eq(bounds.toBBOX(), "-180,-90,0,90", "get tile bounds returns correct bounds"); 
556         map.pan(200,0, {animate:false});
557         var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200));
558         t.eq(bounds.toBBOX(), "0,-90,180,90", "get tile bounds returns correct bounds after pan"); 
559     }
560
561     function test_Layer_Grid_moveTo_buffer_calculation (t) {
562         t.plan(6);
563
564         var map = new OpenLayers.Map( 'map3' ); // odd map size
565         var layer0 = new OpenLayers.Layer.WMS( "0 buffer: OpenLayers WMS", 
566                     "http://labs.metacarta.com/wms/vmap0",
567                     {layers: 'basic'}, {'buffer':0} );
568         map.addLayer(layer0);
569
570         var layer1 = new OpenLayers.Layer.WMS( "1 buffer: OpenLayers WMS", 
571                 "http://labs.metacarta.com/wms/vmap0",
572                 {layers: 'basic'}, {'buffer':1} );
573         map.addLayer(layer1);
574
575         var layer2 = new OpenLayers.Layer.WMS( "2 buffer: OpenLayers WMS", 
576                 "http://labs.metacarta.com/wms/vmap0",
577                 {layers: 'basic'}, {'buffer':2} );
578         map.addLayer(layer2);
579
580         map.setCenter(new OpenLayers.LonLat(0, 0), 4); 
581         t.eq( layer0.grid.length, 3, "Grid rows with buffer:0" );
582         map.setBaseLayer(layer1);
583         t.eq( layer1.grid.length, 4, "Grid rows with buffer:1" );
584         map.setBaseLayer(layer2);
585         t.eq( layer2.grid.length, 6, "Grid rows with buffer:2" );
586
587         // zooming in on Greenland exercises the bug from pre-r4313
588         map.setCenter(new OpenLayers.LonLat(0, 90), 4); 
589         t.eq( layer0.grid.length, 3, "Grid rows with buffer:0" );
590         map.setBaseLayer(layer1);
591         t.eq( layer1.grid.length, 4, "Grid rows with buffer:1" );
592         map.setBaseLayer(layer2);
593         t.eq( layer2.grid.length, 6, "Grid rows with buffer:2" );
594     }
595
596     function test_Layer_Grid_destroy (t) {
597
598         t.plan( 5 );
599
600         var map = new OpenLayers.Map('map');
601         layer = new OpenLayers.Layer.Grid(name, url, params);
602         map.addLayer(layer);
603         layer.destroy();
604         t.eq( layer.grid, null, "layer.grid is null after destroy" );
605         t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" );
606
607
608     //test with tile creation
609         layer = new OpenLayers.Layer.WMS(name, url, params);
610         map.addLayer(layer);
611
612         map.setCenter(new OpenLayers.LonLat(0,0), 10);
613
614          
615         //grab a reference to one of the tiles
616         var tile = layer.grid[1][1];        
617         t.eq( tile.imgDiv.className, "olTileImage", "Tile has an image" ); 
618
619         layer.destroy();
620         t.eq( tile.imgDiv, null, "Tile destroyed" ); 
621         
622         t.ok( layer.grid == null, "tiles appropriately destroyed")
623     }
624     
625
626   </script>
627 </head>
628 <body>
629 <div id="map" style="width:499px;height:549px;display:none"></div>
630 <div id="map2" style="width:500px;height:550px;display:none"></div>
631 <div id="map3" style="width:594px;height:464px;display:none"></div>
632 </body>
633 </html>