From ce90aebfd03b1707391f51063627f70743f862a5 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Thu, 16 Sep 2010 21:54:22 +0000 Subject: [PATCH] Made Tile.Image.IFrame an addin which will be used only if a layer is configured with the maxGetUrlLength option. This deprecates Layer.WMS.Post. r=tschaub (closes #2824) git-svn-id: http://svn.openlayers.org/trunk/openlayers@10755 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/WMSPost.html | 4 +- examples/wms-long-url.html | 41 +++++++ examples/wms-long-url.js | 19 ++++ lib/OpenLayers/Layer/Grid.js | 6 + lib/OpenLayers/Layer/WMS.js | 2 +- lib/OpenLayers/Layer/WMS/Post.js | 28 +++-- lib/OpenLayers/Tile.js | 5 +- lib/OpenLayers/Tile/Image.js | 113 +++++++++++------- lib/OpenLayers/Tile/Image/IFrame.js | 170 +++++++++++++--------------- tests/Layer/WMS/Post.html | 21 ++-- tests/Tile/Image/IFrame.html | 115 ++++++++----------- 11 files changed, 300 insertions(+), 224 deletions(-) create mode 100644 examples/wms-long-url.html create mode 100644 examples/wms-long-url.js diff --git a/examples/WMSPost.html b/examples/WMSPost.html index 93b67c24cc..f8f710d11d 100644 --- a/examples/WMSPost.html +++ b/examples/WMSPost.html @@ -161,6 +161,8 @@
+

Deprecated. See wms-long-url.html + for the recommended way to avoid long URLs.

This example uses a large SLD created on the client side to style a WMS layer. This example uses a WMS.Post layer which transfers data via the HTTP-POST protocol.
@@ -171,7 +173,7 @@ instead. The default setting (["mozilla", "firefox", "opera"]) excludes problematic browsers without removing the ability to use long request parameters, because all these browsers support long urls via - GET. + GET.

diff --git a/examples/wms-long-url.html b/examples/wms-long-url.html new file mode 100644 index 0000000000..474b8d87ca --- /dev/null +++ b/examples/wms-long-url.html @@ -0,0 +1,41 @@ + + + + WMS with POST Requests to Avoid Long URLs + + + + +

WMS with POST Requests to Avoid Long URLs

+ +
+ sld, sld_body, post, iframe, advanced +
+ +
Render tiles in IMG or IFRAME elements, depending on + the complexity of the GetMap request
+ +
+ +
+

The maxGetUrlLength property of the layer's + tileOptions option causes tiles to be requested using + HTTP POST when the length of the GET url would exceed the specified + length (2048 characters is recommended). In real life applications, + this happens often when using the SLD_BODY request parameter for + inline styling. +

+ + Long URL - POST requests +
+ + Short URL - GET requests +

+ View the wms-long-url.js + source to see how this is done. +

+
+ + + + diff --git a/examples/wms-long-url.js b/examples/wms-long-url.js new file mode 100644 index 0000000000..21bbac0be3 --- /dev/null +++ b/examples/wms-long-url.js @@ -0,0 +1,19 @@ +// a long text that we set as dummy param (makeTheUrlLong) to make the url long +var longText = new Array(205).join("1234567890"); + +var map = new OpenLayers.Map( 'map' ); +var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic', makeTheUrlLong: longText}, + {tileOptions: {maxGetUrlLength: 2048}} +); +map.addLayer(layer); +map.zoomToMaxExtent(); + +// add behavior to dom elements +document.getElementById("longurl").onclick = function() { + layer.mergeNewParams({makeTheUrlLong: longText}) +} +document.getElementById("shorturl").onclick = function() { + layer.mergeNewParams({makeTheUrlLong: null}) +} diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 1eca36002d..0461771390 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -25,6 +25,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ tileSize: null, + /** APIProperty: tileOptions + * {Object} optional configuration options for instances + * created by this Layer, if supported by the tile class. + */ + tileOptions: null, + /** * Property: grid * {Array(Array())} This is an array of rows, each row is diff --git a/lib/OpenLayers/Layer/WMS.js b/lib/OpenLayers/Layer/WMS.js index c35bd17bfe..9d9f993cac 100644 --- a/lib/OpenLayers/Layer/WMS.js +++ b/lib/OpenLayers/Layer/WMS.js @@ -215,7 +215,7 @@ OpenLayers.Layer.WMS = OpenLayers.Class(OpenLayers.Layer.Grid, { */ addTile:function(bounds,position) { return new OpenLayers.Tile.Image(this, position, bounds, - null, this.tileSize); + null, this.tileSize, this.tileOptions); }, /** diff --git a/lib/OpenLayers/Layer/WMS/Post.js b/lib/OpenLayers/Layer/WMS/Post.js index 07580429bf..4f7961aa49 100644 --- a/lib/OpenLayers/Layer/WMS/Post.js +++ b/lib/OpenLayers/Layer/WMS/Post.js @@ -15,17 +15,15 @@ * Web Mapping Services via HTTP-POST (application/x-www-form-urlencoded). * Create a new WMS layer with the constructor. * + * *Deprecated*. Instead of this layer, use with + * configured in the layer's + * . + * * Inherits from: * - */ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, { - /** - * Property: tileClass - * {Object} Class, used to create tiles. - */ - tileClass: null, - /** * APIProperty: unsupportedBrowsers * {Array} Array with browsers, which should use the HTTP-GET protocol @@ -46,6 +44,12 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, { * possible to modify the initialized tiles (iframes) */ SUPPORTED_TRANSITIONS: [], + + /** + * Property: usePost + * {Boolean} + */ + usePost: null, /** * Constructor: OpenLayers.Layer.WMS.Post @@ -72,10 +76,8 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, { newArguments.push(name, url, params, options); OpenLayers.Layer.WMS.prototype.initialize.apply(this, newArguments); - this.tileClass = OpenLayers.Util.indexOf( - this.unsupportedBrowsers, OpenLayers.Util.getBrowserName()) != -1 - ? OpenLayers.Tile.Image - : OpenLayers.Tile.Image.IFrame; + this.usePost = OpenLayers.Util.indexOf( + this.unsupportedBrowsers, OpenLayers.Util.getBrowserName()) == -1; }, /** @@ -91,8 +93,10 @@ OpenLayers.Layer.WMS.Post = OpenLayers.Class(OpenLayers.Layer.WMS, { * {} The added OpenLayers.Tile.Image.IFrame */ addTile: function(bounds,position) { - return new this.tileClass( - this, position, bounds, null, this.tileSize); + return new OpenLayers.Tile.Image( + this, position, bounds, null, this.tileSize, { + maxGetUrlLength: this.usePost ? 0 : null + }); }, CLASS_NAME: 'OpenLayers.Layer.WMS.Post' diff --git a/lib/OpenLayers/Tile.js b/lib/OpenLayers/Tile.js index 982a42a0af..9ca020e71e 100644 --- a/lib/OpenLayers/Tile.js +++ b/lib/OpenLayers/Tile.js @@ -94,8 +94,9 @@ OpenLayers.Tile = OpenLayers.Class({ * bounds - {} * url - {} * size - {} + * options - {Object} */ - initialize: function(layer, position, bounds, url, size) { + initialize: function(layer, position, bounds, url, size, options) { this.layer = layer; this.position = position.clone(); this.bounds = bounds.clone(); @@ -106,6 +107,8 @@ OpenLayers.Tile = OpenLayers.Class({ this.id = OpenLayers.Util.createUniqueID("Tile_"); this.events = new OpenLayers.Events(this, null, this.EVENT_TYPES); + + OpenLayers.Util.extend(this, options); }, /** diff --git a/lib/OpenLayers/Tile/Image.js b/lib/OpenLayers/Tile/Image.js index 0524069b15..1d96d6a099 100644 --- a/lib/OpenLayers/Tile/Image.js +++ b/lib/OpenLayers/Tile/Image.js @@ -76,7 +76,24 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { * effects when the tile is moved or changes resolution. */ backBufferTile: null, - + + /** + * APIProperty: maxGetUrlLength + * {Number} If set, requests that would result in GET urls with more + * characters than the number provided will be made using form-encoded + * HTTP POST. It is good practice to avoid urls that are longer than 2048 + * characters. + * + * Caution: + * Older versions of Gecko based browsers (e.g. Firefox < 3.5) and + * Opera < 10.0 do not fully support this option. + * + * Note: + * Do not use this option for layers that have a transitionEffect + * configured - IFrame tiles from POST requests can not be resized. + */ + maxGetUrlLength: null, + /** TBD 3.0 - reorder the parameters to the init function to remove * URL. the getUrl() function on the layer gets called on * each draw(), so no need to specify it here. @@ -90,9 +107,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { * bounds - {} * url - {} Deprecated. Remove me in 3.0. * size - {} + * options - {Object} */ - initialize: function(layer, position, bounds, url, size) { - OpenLayers.Tile.prototype.initialize.apply(this, arguments); + initialize: function(layer, position, bounds, url, size, options) { + options = options || {}; + if (options.maxGetUrlLength !== null) { + OpenLayers.Util.applyDefaults(options, OpenLayers.Tile.Image.IFrame); + } + OpenLayers.Tile.prototype.initialize.apply(this, [layer, position, bounds, url, size, options]); this.url = url; //deprecated remove me @@ -100,7 +122,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { this.frame.style.overflow = 'hidden'; this.frame.style.position = 'absolute'; - this.layerAlphaHack = this.layer.alpha && OpenLayers.Util.alphaHack(); + this.layerAlphaHack = this.layer.alpha && OpenLayers.Util.alphaHack(); }, /** @@ -109,22 +131,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { */ destroy: function() { if (this.imgDiv != null) { - if (this.layerAlphaHack) { - // unregister the "load" handler - OpenLayers.Event.stopObservingElement(this.imgDiv.childNodes[0]); - } - - // unregister the "load" and "error" handlers. Only the "error" handler if - // this.layerAlphaHack is true. - OpenLayers.Event.stopObservingElement(this.imgDiv); - - if (this.imgDiv.parentNode == this.frame) { - this.frame.removeChild(this.imgDiv); - this.imgDiv.map = null; - } - this.imgDiv.urls = null; - // abort any currently loading image - this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif"; + this.removeImgDiv(); } this.imgDiv = null; if ((this.frame != null) && (this.frame.parentNode == this.layer.div)) { @@ -142,7 +149,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { OpenLayers.Tile.prototype.destroy.apply(this, arguments); }, - + /** * Method: clone * @@ -281,13 +288,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { * position it correctly, and set its url. */ renderTile: function() { - if (this.imgDiv == null) { - this.initImgDiv(); - } - - this.imgDiv.viewRequestID = this.layer.map.viewRequestID; - if (this.layer.async) { + this.initImgDiv(); // Asyncronous image requests call the asynchronous getURL method // on the layer to fetch an image that covers 'this.bounds', in the scope of // 'this', setting the 'url' property of the layer itself, and running @@ -297,12 +299,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { // syncronous image requests get the url and position the frame immediately, // and don't wait for an image request to come back. - // needed for changing to a different server for onload error - if (this.layer.url instanceof Array) { - this.imgDiv.urls = this.layer.url.slice(); - } - this.url = this.layer.getURL(this.bounds); + + this.initImgDiv(); // position the frame immediately this.positionImage(); @@ -356,10 +355,12 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { * Creates the imgDiv property on the tile. */ initImgDiv: function() { - + if (this.imgDiv) { + return; + } var offset = this.layer.imageOffset; var size = this.layer.getImageSize(this.bounds); - + if (this.layerAlphaHack) { this.imgDiv = OpenLayers.Util.createAlphaImageDiv(null, offset, @@ -380,7 +381,12 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { null, true); } - + + // needed for changing to a different server for onload error + if (this.layer.url instanceof Array) { + this.imgDiv.urls = this.layer.url.slice(); + } + this.imgDiv.className = 'olTileImage'; /* checkImgURL used to be used to called as a work around, but it @@ -396,7 +402,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { this.layer.div.appendChild(this.frame); if(this.layer.opacity != null) { - + OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, null, null, null, null, this.layer.opacity); @@ -408,7 +414,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { //bind a listener to the onload of the image div so that we // can register when a tile has finished loading. var onload = function() { - + //normally isLoading should always be true here but there are some // right funky conditions where loading and then reloading a tile // with the same url *really*fast*. this check prevents sending @@ -419,7 +425,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { this.events.triggerEvent("loadend"); } }; - + if (this.layerAlphaHack) { OpenLayers.Event.observe(this.imgDiv.childNodes[0], 'load', OpenLayers.Function.bind(onload, this)); @@ -427,7 +433,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { OpenLayers.Event.observe(this.imgDiv, 'load', OpenLayers.Function.bind(onload, this)); } - + // Bind a listener to the onerror of the image div so that we // can registere when a tile has finished loading with errors. @@ -444,6 +450,35 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, { }; OpenLayers.Event.observe(this.imgDiv, "error", OpenLayers.Function.bind(onerror, this)); + + this.imgDiv.viewRequestID = this.layer.map.viewRequestID; + }, + + /** + * Method: removeImgDiv + * Removes the imgDiv from the DOM and stops listening to events on it. + */ + removeImgDiv: function() { + // unregister the "load" and "error" handlers. Only the "error" handler if + // this.layerAlphaHack is true. + OpenLayers.Event.stopObservingElement(this.imgDiv); + + if (this.imgDiv.parentNode == this.frame) { + this.frame.removeChild(this.imgDiv); + this.imgDiv.map = null; + } + this.imgDiv.urls = null; + + var child = this.imgDiv.firstChild; + //check for children (alphaHack img or IFrame) + if (child) { + OpenLayers.Event.stopObservingElement(child); + this.imgDiv.removeChild(child); + delete child; + } else { + // abort any currently loading image + this.imgDiv.src = OpenLayers.Util.getImagesLocation() + "blank.gif"; + } }, /** diff --git a/lib/OpenLayers/Tile/Image/IFrame.js b/lib/OpenLayers/Tile/Image/IFrame.js index 46921270da..e81b6bd884 100644 --- a/lib/OpenLayers/Tile/Image/IFrame.js +++ b/lib/OpenLayers/Tile/Image/IFrame.js @@ -9,87 +9,49 @@ */ /** - * Class: OpenLayers.Tile.Image.IFrame - * Instances of OpenLayers.Tile.Image.IFrame are used to manage the image tiles - * used by Layer.WMS.Post loaded via HTTP-POST-protocol. Create a new image - * tile with the constructor. + * Constant: OpenLayers.Tile.Image.IFrame + * Mixin for tiles that use form-encoded POST requests to get images from + * remote services. Images will be loaded using HTTP-POST into an IFrame. + * + * This mixin will be applied to instances + * configured with or + * set to true. * * Inherits from: * - */ -OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { +OpenLayers.Tile.Image.IFrame = { /** - * Property: layerAlphaHack - * {Boolean} Always false for an instance. - */ - - /** - * Constructor: OpenLayers.Tile.Image.IFrame - * Constructor for a new instance. - * - * Parameters: - * layer - {} layer that the tile will go in. - * position - {} - * bounds - {} - * size - {} - */ - initialize: function(layer, position, bounds, url, size) { - OpenLayers.Tile.Image.prototype.initialize.apply(this, arguments); - this.layerAlphaHack = false; - }, - - /** - * Method: destroy - * nullify references to prevent circular references and memory leaks - */ - destroy: function() { - if(this.imgDiv != null) { - // unregister the "load" handler - OpenLayers.Event.stopObservingElement(this.imgDiv.firstChild); - } - OpenLayers.Tile.Image.prototype.destroy.apply(this, arguments); - }, + * Property: useIFrame + * {Boolean} true if we are currently using an IFrame to render POST + * responses, false if we are using an img element to render GET responses. + */ + useIFrame: null, /** * Method: clear * Removes the iframe from DOM (avoids back-button problems). */ clear: function() { - if(this.imgDiv) { - var iFrame = this.imgDiv.firstChild; - OpenLayers.Event.stopObservingElement(iFrame); - this.imgDiv.removeChild(iFrame); + if (this.useIFrame) { + if (this.imgDiv) { + var iFrame = this.imgDiv.firstChild; + OpenLayers.Event.stopObservingElement(iFrame); + this.imgDiv.removeChild(iFrame); + delete iFrame; + } + } else { + OpenLayers.Tile.Image.prototype.clear.apply(this, arguments) } }, - /** - * Method: clone - * - * Parameters: - * obj - {} The tile to be cloned - * - * Returns: - * {} An exact clone of this - * - */ - clone: function (obj) { - if (obj == null) { - obj = new OpenLayers.Tile.Image.IFrame( - this.layer, this.position, this.bounds, this.url, this.size); - } - - //pick up properties from superclass - obj = OpenLayers.Tile.Image.prototype.clone.apply(this, [obj]); - - return obj; - }, - /** * Method: renderTile */ renderTile: function() { - if(OpenLayers.Tile.Image.prototype.renderTile.apply(this, arguments)) { + if (OpenLayers.Tile.Image.prototype.renderTile.apply(this, arguments) && + this.useIFrame) { // create a html form and add it temporary to the layer div var form = this.createRequestForm(); this.imgDiv.appendChild(form); @@ -97,7 +59,9 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { // submit the form (means fetching the image) form.submit(); this.imgDiv.removeChild(form); + delete form; } + return true; }, /** @@ -105,24 +69,57 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { * Creates the imgDiv property on the tile. */ initImgDiv: function() { - this.imgDiv = this.createImgDiv(); - - OpenLayers.Util.modifyDOMElement(this.imgDiv, this.id, null, - this.layer.getImageSize(), "relative"); - this.imgDiv.className = 'olTileImage'; - - this.frame.appendChild(this.imgDiv); - this.layer.div.appendChild(this.frame); - - if(this.layer.opacity != null) { - - OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, null, - null, null, null, - this.layer.opacity); + this.useIFrame = this.maxGetUrlLength !== null && !this.layer.async && + this.url.length > this.maxGetUrlLength; + if (this.imgDiv != null) { + var nodeName = this.imgDiv.nodeName.toLowerCase(); + if ((this.useIFrame && nodeName == "img") || + (!this.useIFrame && nodeName == "div")) { + // switch between get and post + this.removeImgDiv(); + delete this.imgDiv; + } else { + return; + } } + if (this.useIFrame) { + var eventPane = document.createElement("div"); - // we need this reference to check back the viewRequestID - this.imgDiv.map = this.layer.map; + if(OpenLayers.Util.getBrowserName() == "msie") { + // IE cannot handle events on elements without backgroundcolor. So we + // use this little hack to make elements transparent + eventPane.style.backgroundColor = '#FFFFFF'; + eventPane.style.filter = 'chroma(color=#FFFFFF)'; + } + + OpenLayers.Util.modifyDOMElement(eventPane, null, + new OpenLayers.Pixel(0,0), this.layer.getImageSize(), "absolute"); + + this.imgDiv = document.createElement("div"); + this.imgDiv.appendChild(eventPane); + + OpenLayers.Util.modifyDOMElement(this.imgDiv, this.id, null, + this.layer.getImageSize(), "relative"); + this.imgDiv.className = 'olTileImage'; + + this.frame.appendChild(this.imgDiv); + this.layer.div.appendChild(this.frame); + + if(this.layer.opacity != null) { + + OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, null, + null, null, null, + this.layer.opacity); + } + + // we need this reference to check back the viewRequestID + this.imgDiv.map = this.layer.map; + + this.imgDiv.viewRequestID = this.layer.map.viewRequestID; + + } else { + OpenLayers.Tile.Image.prototype.initImgDiv.apply(this, arguments); + } }, /** @@ -238,13 +235,9 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { // adding all parameters in layer params as hidden fields to the html // form element var imageSize = this.layer.getImageSize(); - var params = OpenLayers.Util.extend( - { - "BBOX": this.encodeBBOX ? this.bounds.toBBOX() : - this.bounds.toArray(), - "WIDTH": imageSize.w, - "HEIGHT": imageSize.h - }, this.layer.params); + var params = OpenLayers.Util.getParameters( + this.url.substr(this.layer.url.length) + ); for(var par in params) { var field = document.createElement('input'); @@ -255,8 +248,5 @@ OpenLayers.Tile.Image.IFrame = OpenLayers.Class(OpenLayers.Tile.Image, { } return form; - }, - - CLASS_NAME: "OpenLayers.Tile.Image.IFrame" - } -); + } +} diff --git a/tests/Layer/WMS/Post.html b/tests/Layer/WMS/Post.html index 649cc23495..f3b04540ad 100644 --- a/tests/Layer/WMS/Post.html +++ b/tests/Layer/WMS/Post.html @@ -16,19 +16,20 @@ t.plan( 2 ); var url = "http://octo.metacarta.com/cgi-bin/mapserv"; + var options = { unsupportedBrowsers: []}; layer = new OpenLayers.Layer.WMS.Post(name, url, params); - t.ok( - layer.tileClass == OpenLayers.Tile.Image.IFrame, - "instantiate OpenLayers.Tile.Image.IFrame tiles."); + t.eq( + layer.usePost, true, + "Supported browsers use IFrame tiles."); layer.destroy(); var options = { unsupportedBrowsers: [OpenLayers.Util.getBrowserName()]}; layer = new OpenLayers.Layer.WMS.Post(name, url, params, options); - t.ok( - layer.tileClass == OpenLayers.Tile.Image, - "unsupported browser instantiate Image tiles."); + t.eq( + layer.usePost, false, + "unsupported browsers use Image tiles."); layer.destroy(); } @@ -49,8 +50,8 @@ } else { t.ok( - tile instanceof OpenLayers.Tile.Image.IFrame, - "tile is an instance of OpenLayers.Tile.Image.IFrame"); + tile.useIFrame !== undefined, + "tile is created with the OpenLayers.Tile.Image.IFrame mixin"); } map.destroy(); @@ -73,8 +74,8 @@ map.addLayer(layer); var tile2 = layer.addTile(bounds, pixel); t.ok( - tile2 instanceof OpenLayers.Tile.Image.IFrame, - "supported browser: tile is an instance of Tile.Image.IFrame"); + tile2.createIFrame, + "supported browser: tile is created with the Tile.Image.IFrame mixin"); map.destroy(); } diff --git a/tests/Tile/Image/IFrame.html b/tests/Tile/Image/IFrame.html index 5a3da99354..9650b01f54 100644 --- a/tests/Tile/Image/IFrame.html +++ b/tests/Tile/Image/IFrame.html @@ -14,66 +14,48 @@ var name = "OpenaLayers WMS"; var wmsUrl = "http://labs.metacarta.com/wms/vmap0?"; - function test_Tile_Image_IFrame_constructor (t) { - t.plan( 2 ); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); - var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); - - t.ok( tile instanceof OpenLayers.Tile.Image.IFrame, "new OpenLayers.Tile.Image.IFrame returns Tile object" ); - t.eq( tile.layerAlphaHack, false, "layerAlphaHack is set to false."); - - layer.destroy(); - } - - function test_Tile_Image_IFrame_destroy (t) { - t.plan( 2 ); + function test_Tile_Image_IFrame_create (t) { + t.plan( 3 ); map = new OpenLayers.Map('map'); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); + var bar = new Array(205).join("1234567890"); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic', foo: bar}, {tileOptions: {maxGetUrlLength: 2048}}); map.addLayer(layer); - var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, null, size); + var tile = layer.addTile(bounds, position); tile.renderTile(); tile.positionImage(); + t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used for long URL"); + + layer.mergeNewParams({foo: null}); + tile.renderTile(); + tile.positionImage(); + t.eq(tile.imgDiv.nodeName.toLowerCase(), "img", "IMG used for short URL"); + + tile.maxGetUrlLength = 0; + tile.renderTile(); + tile.positionImage(); + t.eq(tile.imgDiv.firstChild.nodeName.toLowerCase(), "iframe", "IFrame used when maxGetUrlLength is 0"); tile.destroy(); - t.eq( tile.imgDiv, null, "IFrame successfully removed from DOM"); - t.eq( tile.frame, null, "Event div successfully removed from DOM"); - + layer.destroy(); map.destroy(); } - function test_Tile_Image_IFrame_clone (t) { - t.plan( 9 ); - - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); - tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); - tile.iFrame = {}; - var clone = tile.clone(); - - t.ok( clone instanceof OpenLayers.Tile.Image.IFrame, "clone is a Tile.Image.IFrame object" ); - t.ok( clone.layer == layer, "clone.layer is set correctly"); - t.ok( clone.position.equals(position), "clone.position is set correctly"); - t.ok( clone.bounds.equals(bounds), "clone.bounds is set correctly"); - t.eq( clone.url, url, "clone.url is set correctly"); - t.ok( clone.size.equals(size), "clone.size is set correctly"); - t.ok( clone.frame, "clone has a frame"); - t.ok( clone.frame != tile.frame, "clone's frame is a new one"); - t.ok( clone.imgDiv == null, "clone's imgDiv was not copied"); - } - function test_Tile_Image_IFrame_clear (t) { t.plan( 1 ); map = new OpenLayers.Map('map'); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); map.addLayer(layer); - tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); + tile = layer.addTile(bounds, position); tile.draw(); tile.clear(); - t.ok( - tile.imgDiv.firstChild.nodeName != "IFRAME", + t.eq( + tile.imgDiv.firstChild.nodeName.toLowerCase(), "div", "IFrame successfully removed from DOM"); + tile.destroy(); + layer.destroy(); map.destroy(); } @@ -81,9 +63,10 @@ t.plan( 4 ); map = new OpenLayers.Map('map'); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); map.addLayer(layer); - tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); + tile = layer.addTile(bounds, position); + tile.url = layer.getURL(bounds); tile.initImgDiv(); if(isMozilla) { @@ -103,9 +86,9 @@ t.plan( 3 ); map = new OpenLayers.Map('map'); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); map.addLayer(layer); - var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); + var tile = layer.addTile(bounds, position); tile.renderTile(); var imgDiv = tile.imgDiv; var iFrame = imgDiv.firstChild; @@ -128,9 +111,9 @@ t.plan( 8 ); map = new OpenLayers.Map('map'); - layer = new OpenLayers.Layer.WMS.Post(name, wmsUrl, {layers: 'basic'}); + layer = new OpenLayers.Layer.WMS(name, wmsUrl, {layers: 'basic'}, {tileOptions: {maxGetUrlLength: 0}}); map.addLayer(layer); - var tile = new OpenLayers.Tile.Image.IFrame(layer, position, bounds, url, size); + var tile = layer.addTile(bounds, position); var iFrame = tile.createIFrame(); var id = tile.id+'_iFrame'; @@ -161,15 +144,17 @@ SRS: "EPSG:4326", BBOX: [1,2,3,4], WIDTH: String(size.w), HEIGHT: String(size.h) }; - var newLayer = new OpenLayers.Layer.WMS.Post("Name", - "http://labs.metacarta.com/TESTURL", - tParams, - {tileSize: size}); + var newLayer = new OpenLayers.Layer.WMS("Name", + "http://labs.metacarta.com/TESTURL", + tParams, + {tileSize: size, tileOptions: {maxGetUrlLength: 0}}); map = new OpenLayers.Map('map'); map.addLayer(newLayer); - tile = new OpenLayers.Tile.Image.IFrame(newLayer, position, bounds, url, size); + tile = newLayer.addTile(bounds, position); + tile.url = newLayer.getURL(bounds); tile.initImgDiv(); + tile.url = newLayer.getURL(bounds); var form = tile.createRequestForm(); if(isMozilla) { t.ok( form instanceof HTMLElement, "created html form successfully."); @@ -187,25 +172,13 @@ t.eq( form.target, tile.id+'_iFrame', "form target correctly set."); t.eq( form.action, url, "form action correctly set."); - var contain = true; + var formParams = {}; var children = form.childNodes; - for(var par in newLayer.params) { - var test = false; - - for(var i=0; i