openlayers/tests/Tile/Image.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 tile;
   7
   8     function test_Tile_Image_constructor (t) {
   9         t.plan( 6 );
  10
  11         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  12             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  13
  14         var position = new OpenLayers.Pixel(20,30);
  15         var bounds = new OpenLayers.Bounds(1,2,3,4);
  16         var url = "http://www.openlayers.org/dev/tests/tileimage";
  17         var size = new OpenLayers.Size(5,6);
  18         tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size);
  19
  20         t.ok( tile instanceof OpenLayers.Tile.Image, "new OpenLayers.Tile returns Tile object" );
  21         t.ok( tile.layer == layer, "tile.layer is set correctly");
  22         t.ok( tile.position.equals(position), "tile.position is set correctly");
  23         t.ok( tile.bounds.equals(bounds), "tile.bounds is set correctly");
  24         t.eq( tile.url, url, "tile.url is set correctly");
  25         t.ok( tile.size.equals(size), "tile.size is set correctly");
  26     }
  27
  28     function test_destroy_observers(t) {
  29         t.plan(2);
  30
  31         var map = new OpenLayers.Map('map');
  32         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  33             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  34         map.addLayer(layer);
  35
  36         var position = new OpenLayers.Pixel(20,30);
  37         var bounds = new OpenLayers.Bounds(1,2,3,4);
  38         var size = new OpenLayers.Size(5,6);
  39
  40         // with alpha hack
  41         var withAlpha = new OpenLayers.Tile.Image(layer, position, bounds, null, size);
  42         withAlpha.layerAlphaHack = true;
  43
  44         withAlpha.draw();
  45         var cacheID = withAlpha.imgDiv._eventCacheID;
  46         withAlpha.destroy();
  47
  48         t.eq(OpenLayers.Event.observers[cacheID], undefined,
  49              "With alpha hack: imgDiv observers are cleared in destroy");
  50
  51         // without alpha hack
  52         var withoutAlpha = new OpenLayers.Tile.Image(layer, position, bounds, null, size);
  53         withoutAlpha.layerAlphaHack = false;
  54
  55         withoutAlpha.draw();
  56         var cacheID = withoutAlpha.imgDiv._eventCacheID;
  57         withoutAlpha.destroy();
  58
  59         t.eq(OpenLayers.Event.observers[cacheID], undefined,
  60              "Without alpha hack: imgDiv observers are cleared in destroy");
  61
  62         map.destroy();
  63     }
  64
  65     function test_Tile_Image_clone (t) {
  66         t.plan( 9 );
  67
  68         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  69             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  70
  71         var position = new OpenLayers.Pixel(20,30);
  72         var bounds = new OpenLayers.Bounds(1,2,3,4);
  73         var url = "http://www.openlayers.org/dev/tests/tileimage";
  74         var size = new OpenLayers.Size(5,6);
  75         tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size);
  76         tile.imgDiv = {};
  77         var clone = tile.clone();
  78
  79         t.ok( clone instanceof OpenLayers.Tile.Image, "OpenLayers.Tile.clone returns Tile.Image object" );
  80         t.ok( clone.layer == layer, "clone.layer is set correctly");
  81         t.ok( clone.position.equals(position), "clone.position is set correctly");
  82         t.ok( clone.bounds.equals(bounds), "clone.bounds is set correctly");
  83         t.eq( clone.url, url, "clone.url is set correctly");
  84         t.ok( clone.size.equals(size), "clone.size is set correctly");
  85         t.ok( clone.frame, "clone has a frame");
  86         t.ok( clone.frame != tile.frame, "clone's frame is a new one");
  87         t.ok( clone.imgDiv == null, "clone's imgDiv was not copied");
  88     }
  89
  90     function test_Tile_Image_draw (t) {
  91         t.plan( 7 );
  92
  93         var map = new OpenLayers.Map('map');
  94
  95         var size = new OpenLayers.Size(5,6);
  96         layer = new OpenLayers.Layer.WMS("Name",
  97                                          "http://labs.metacarta.com/TESTURL",
  98                                          null,
  99                                          {tileSize: size});
 100         map.addLayer(layer);
 101         var position = new OpenLayers.Pixel(20,30);
 102         var bounds = new OpenLayers.Bounds(1,2,3,4);
 103         var url = "http://www.openlayers.org/dev/tests/tileimage";
 104         tile = new OpenLayers.Tile.Image(layer, position, bounds, url, size);
 105
 106         tile.events.register("loadstart", this, function() {
 107             t.ok(true, "loadstart triggered");
 108         });
 109         tile.events.register("reload", this, function() {
 110             t.ok(true, "reload triggered");
 111         });
 112
 113         //this should trigger a "loadstart" event
 114         tile.draw();
 115
 116         var img = tile.imgDiv;
 117
 118         if (!isMozilla)
 119             t.ok( true, "skipping element test outside of Mozilla");
 120         else
 121             t.ok( tile.imgDiv instanceof HTMLElement, "tile.draw creates an image");
 122         if (!isMozilla)
 123             t.ok( true, "skipping element test outside of Mozilla");
 124         else
 125             t.ok( img instanceof HTMLImageElement, "tile.draw creates an image");
 126         var tParams = {
 127             SERVICE: "WMS", VERSION: "1.1.1",
 128             REQUEST: "GetMap", STYLES: "",
 129             EXCEPTIONS: "application/vnd.ogc.se_inimage", FORMAT: "image/jpeg",
 130             SRS: "EPSG:4326", BBOX: [1,2,3,4],
 131             WIDTH: String(size.w), HEIGHT: String(size.h)
 132         };
 133         t.eq( img.src,
 134              "http://labs.metacarta.com/TESTURL?" + OpenLayers.Util.getParameterString(tParams),
 135              "tile.draw creates an image");
 136         t.eq( tile.imgDiv.style.width, "5px", "Image width is correct" );
 137         t.eq( tile.imgDiv.style.height, "6px", "Image height is correct" );
 138
 139         // this should trigger a "reload" event (since the image never actually
 140         // loads in tests)
 141         tile.draw();
 142
 143     }
 144     function test_Tile_Image_OutsideMaxExtent(t) {
 145         t.plan( 11 );
 146         var position = new OpenLayers.Pixel(20,30);
 147         var bounds = new OpenLayers.Bounds(1,2,3,4);
 148         var url = "http://www.openlayers.org/dev/tests/tileimage";
 149         var size = new OpenLayers.Size(5,6);
 150         var map = new OpenLayers.Map('map');
 151         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 152             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {reproject:false, encodeBBOX: true});
 153         map.addLayer(layer);
 154         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-90,-180,90), url, size);
 155         tile.draw()
 156         t.eq(tile.imgDiv, null, "Images against side of maxextent don't load");
 157         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-91,180,90), url, size);
 158         tile.draw()
 159         var tParams = {
 160             LAYERS: "basic", SERVICE: "WMS", VERSION: "1.1.1",
 161             REQUEST: "GetMap", STYLES: "",
 162             EXCEPTIONS: "application/vnd.ogc.se_inimage", FORMAT: "image/jpeg",
 163             SRS: "EPSG:4326", BBOX: "-181,-91,180,90",
 164             WIDTH: "256", HEIGHT: "256"
 165         };
 166         t.eq(tile.imgDiv.src,
 167              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 168              "Images over edges of maxextent do load");
 169         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-90,180,90), url, size);
 170         tile.draw()
 171         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-181,-90,180,90"});
 172         t.eq(tile.imgDiv.src,
 173              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 174              "Images over edges of maxextent do load");
 175         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-180,-90,180,90), url, size);
 176         tile.draw()
 177         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-180,-90,180,90"});
 178         t.eq(tile.imgDiv.src,
 179              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 180              "Image covering all of extent loads");
 181         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-80,-45,80,45), url, size);
 182         tile.draw()
 183         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-80,-45,80,45"});
 184         t.eq(tile.imgDiv.src,
 185              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 186              "Image covering small part of extent loads");
 187         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-95,185,95), url, size);
 188         tile.draw()
 189         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-95,185,95"});
 190         t.eq(tile.imgDiv.src,
 191              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 192              "Image covering more than all of extent loads");
 193
 194         layer.displayOutsideMaxExtent=1;
 195         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-90,-180,90), url, size);
 196         tile.draw()
 197         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-90,-180,90"});
 198         t.eq(tile.imgDiv.src,
 199              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 200              "Images against side of maxextent do load with displayOutsideMaxExtent");
 201         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-181,-90,180,90), url, size);
 202         tile.draw()
 203         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-181,-90,180,90"});
 204         t.eq(tile.imgDiv.src,
 205              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 206              "Images over edges of maxextent do load with displayOutsideMaxExtent set");
 207         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-180,-90,180,90), url, size);
 208         tile.draw()
 209         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-180,-90,180,90"});
 210         t.eq(tile.imgDiv.src,
 211              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 212              "Image covering all of extent loads with display outside max extent");
 213         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-80,-45,80,45), url, size);
 214         tile.draw()
 215         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-80,-45,80,45"});
 216         t.eq(tile.imgDiv.src,
 217              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 218              "Image covering small part of extent loads with display outside max extent");
 219         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-185,-95,185,95), url, size);
 220         tile.draw()
 221         tParams = OpenLayers.Util.extend(tParams, {BBOX: "-185,-95,185,95"});
 222         t.eq(tile.imgDiv.src,
 223              "http://labs.metacarta.com/wms/vmap0?" + OpenLayers.Util.getParameterString(tParams),
 224              "Image covering more than all of extent loads");
 225     }
 226     function test_Tile_Image_Display_After_Move(t) {
 227         t.plan(2);
 228         var position = new OpenLayers.Pixel(20,30);
 229         var bounds = new OpenLayers.Bounds(1,2,3,4);
 230         var url = "http://www.openlayers.org/dev/tests/tileimage";
 231         var size = new OpenLayers.Size(5,6);
 232         var map = new OpenLayers.Map('map');
 233         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 234             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'reproject': true});
 235         map.addLayer(layer);
 236         map.zoomToMaxExtent();
 237         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
 238         tile.draw();
 239         tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true);
 240         t.delay_call( 1, function() { t.eq(tile.imgDiv, null, "Tile imgDiv is null.") } );
 241         var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 242             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'reproject': true, 'alpha':true});
 243         map.addLayer(layer);
 244         tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
 245         tile.draw();
 246         tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true)
 247         t.delay_call( 1, function() { t.eq(tile.imgDiv, null, "Alpha tile imgDiv is null.") } );
 248
 249     }
 250
 251     function test_Tile_Image_gutters(t) {
 252         t.plan(5);
 253
 254         var gutter = 0;
 255         var name = 'Test Layer';
 256         var url = "http://octo.metacarta.com/cgi-bin/mapserv";
 257         var params = { map: '/mapdata/vmap_wms.map',
 258                        layers: 'basic',
 259                        format: 'image/png'};
 260
 261
 262         var map = new OpenLayers.Map('map');
 263         var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter});
 264         map.addLayer(layer);
 265         map.setCenter(new OpenLayers.LonLat(0,0), 5);
 266
 267         var tile = layer.grid[0][0];
 268         t.ok(tile.layer.imageSize == null,
 269              "zero size gutter doesn't set image size");
 270
 271         t.ok(tile.layer.imageOffset == null,
 272              "zero size gutter doesn't set image offset");
 273
 274         var zero_gutter_bounds = tile.bounds;
 275
 276         map.destroy();
 277
 278         var gutter = 15;
 279         var map = new OpenLayers.Map('map');
 280         var layer = new OpenLayers.Layer.WMS(name, url, params, {gutter: gutter});
 281         map.addLayer(layer);
 282         map.setCenter(new OpenLayers.LonLat(0,0), 5);
 283         var tile = layer.grid[0][0];
 284         t.ok(tile.layer.imageSize.equals(new OpenLayers.Size(tile.size.w + (2 * gutter),
 285                                                              tile.size.h + (2 * gutter))),
 286              "gutter properly changes image size");
 287
 288         t.ok(tile.layer.imageOffset.equals(new OpenLayers.Pixel(-gutter, -gutter)),
 289              "gutter properly sets image offset");
 290         t.ok(tile.bounds.equals(zero_gutter_bounds),
 291              "gutter doesn't affect tile bounds");
 292
 293         map.destroy();
 294     }
 295
 296   </script>
 297 </head>
 298 <body>
 299 <div id="map" style="height:550px;width:500px"></div>
 300 </body>
 301 </html>
 302