diff --git a/lib/OpenLayers/Tile/UTFGrid.js b/lib/OpenLayers/Tile/UTFGrid.js index 564ca8ea56..4db55b94df 100644 --- a/lib/OpenLayers/Tile/UTFGrid.js +++ b/lib/OpenLayers/Tile/UTFGrid.js @@ -10,8 +10,11 @@ /** * Class: OpenLayers.Tile.UTFGrid - * Instances of OpenLayers.Tile.UTFGrid are used to manage the image tiles - * MP TODO + * Instances of OpenLayers.Tile.UTFGrid are used to manage + * UTFGrids. This is an unusual tile type in that it doesn't have a + * rendered image; only a 'hit grid' that can be used to + * look up feature attributes. + * * IMPORTANT - remove all traces of IMAGES * * constructor. @@ -30,7 +33,7 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { /** * Property: json - * TODO + * Stores the parsed JSON tile data structure. * {Object} The image for this tile. */ json: null, @@ -71,7 +74,6 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { /** * APIMethod: destroy * nullify references to prevent circular references and memory leaks - * MP TODO what do we need to clear for the utfgrid implementation? */ destroy: function() { if (this.imgDiv) { @@ -87,13 +89,14 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { /** * Method: draw * Check that a tile should be drawn, and draw it. + * In the case of UTFGrids, "drawing" it means fetching and + * parsing the json. * * Returns: * {Boolean} Was a tile drawn? */ draw: function() { var drawn = OpenLayers.Tile.prototype.draw.apply(this, arguments); - console.log(drawn); if (drawn) { if (this.isLoading) { //if we're already loading, send 'reload' instead of 'loadstart'. @@ -126,6 +129,7 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { var res = ols.read(); console.log(res.priv); */ + this.positionTile(); } else { this.unload(); @@ -163,23 +167,14 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { /** * Method: clear - * MP TODO remove the json from the DOM! * Remove the tile from the DOM, clear it of any image related data so that * it can be reused in a new location. */ clear: function() { - var img = this.imgDiv; - if (img) { - OpenLayers.Event.stopObservingElement(img); - var tile = this.getTile(); - if (tile.parentNode === this.layer.div) { - this.layer.div.removeChild(tile); - } - this.setImgSrc(); - if (this.layerAlphaHack === true) { - img.style.filter = ""; - } - OpenLayers.Element.removeClass(img, "olImageLoadError"); + this.json = null; + var tile = this.getTile(); + if (tile.parentNode === this.layer.div) { + this.layer.div.removeChild(tile); } }, @@ -189,38 +184,15 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { */ getImage: function() { if (!this.imgDiv) { + // MP TODO do we NEED to create an image here? this.imgDiv = document.createElement("img"); - this.imgDiv.className = "olTileImage"; - // avoid image gallery menu in IE6 - this.imgDiv.galleryImg = "no"; - var style = this.imgDiv.style; - if (this.layer.gutter) { - var left = this.layer.gutter / this.layer.tileSize.w * 100; - var top = this.layer.gutter / this.layer.tileSize.h * 100; - style.left = -left + "%"; - style.top = -top + "%"; - style.width = (2 * left + 100) + "%"; - style.height = (2 * top + 100) + "%"; - } else { - style.width = "100%"; - style.height = "100%"; - } + style.width = "100%"; + style.height = "100%"; style.visibility = "hidden"; style.opacity = 0; - if (this.layer.opacity < 1) { - style.filter = 'alpha(opacity=' + - (this.layer.opacity * 100) + - ')'; - } style.position = "absolute"; - if (this.layerAlphaHack) { - // move the image out of sight - style.paddingTop = style.height; - style.height = "0"; - style.width = "100%"; - } if (this.frame) { this.frame.appendChild(this.imgDiv); } @@ -229,60 +201,6 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { return this.imgDiv; }, - /** - * Method: initImage - * Creates the content for the frame on the tile. - */ - initImage: function() { - var img = this.getImage(); - if (this.url && img.getAttribute("src") == this.url) { - this.onImageLoad(); - } else { - // We need to start with a blank image, to make sure that no - // loading image placeholder and no old image is displayed when we - // set the display style to "" in onImageLoad, which is called - // after the image is loaded, but before it is rendered. So we set - // a blank image with a data scheme URI, and register for the load - // event (for browsers that support data scheme) and the error - // event (for browsers that don't). In the event handler, we set - // the final src. - var load = OpenLayers.Function.bind(function() { - OpenLayers.Event.stopObservingElement(img); - OpenLayers.Event.observe(img, "load", - OpenLayers.Function.bind(this.onImageLoad, this) - ); - OpenLayers.Event.observe(img, "error", - OpenLayers.Function.bind(this.onImageError, this) - ); - this.imageReloadAttempts = 0; - this.setImgSrc(this.url); - }, this); - if (img.getAttribute("src") == this.blankImageUrl) { - load(); - } else { - OpenLayers.Event.observe(img, "load", load); - OpenLayers.Event.observe(img, "error", load); - img.src = this.blankImageUrl; - } - } - }, - - /** - * Method: setImgSrc - * Sets the source for the tile image - * - * Parameters: - * url - {String} or undefined to hide the image - */ - setImgSrc: function(url) { - var img = this.imgDiv; - img.style.visibility = 'hidden'; - img.style.opacity = 0; - if (url) { - img.src = url; - } - }, - /** * Method: getTile * Get the tile's markup. @@ -294,83 +212,6 @@ OpenLayers.Tile.UTFGrid = OpenLayers.Class(OpenLayers.Tile, { return this.frame ? this.frame : this.getImage(); }, - /** - * Method: createBackBuffer - * Create a backbuffer for this tile. A backbuffer isn't exactly a clone - * of the tile's markup, because we want to avoid the reloading of the - * image. So we clone the frame, and steal the image from the tile. - * - * Returns: - * {DOMElement} The markup, or undefined if the tile has no image - * or if it's currently loading. - */ - createBackBuffer: function() { - if (!this.imgDiv || this.isLoading) { - return; - } - var backBuffer; - if (this.frame) { - backBuffer = this.frame.cloneNode(false); - backBuffer.appendChild(this.imgDiv); - } else { - backBuffer = this.imgDiv; - } - this.imgDiv = null; - return backBuffer; - }, - - /** - * Method: onImageLoad - * Handler for the image onload event - */ - onImageLoad: function() { - var img = this.imgDiv; - OpenLayers.Event.stopObservingElement(img); - - img.style.visibility = 'inherit'; - img.style.opacity = this.layer.opacity; - - this.isLoading = false; - this.events.triggerEvent("loadend"); - - // IE<7 needs a reflow when the tiles are loaded because of the - // percentage based positioning. Otherwise nothing is shown - // until the user interacts with the map in some way. - if (parseFloat(navigator.appVersion.split("MSIE")[1]) < 7 && - this.layer && this.layer.div) { - var span = document.createElement("span"); - span.style.display = "none"; - var layerDiv = this.layer.div; - layerDiv.appendChild(span); - window.setTimeout(function() { - span.parentNode === layerDiv && span.parentNode.removeChild(span); - }, 0); - } - - if (this.layerAlphaHack === true) { - img.style.filter = - "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + - img.src + "', sizingMethod='scale')"; - } - }, - - /** - * Method: onImageError - * Handler for the image onerror event - */ - onImageError: function() { - var img = this.imgDiv; - if (img.src != null) { - this.imageReloadAttempts++; - if (this.imageReloadAttempts <= OpenLayers.IMAGE_RELOAD_ATTEMPTS) { - this.setImgSrc(this.layer.getURL(this.bounds)); - } else { - OpenLayers.Element.addClass(img, "olImageLoadError"); - this.onImageLoad(); - } - } - }, - - CLASS_NAME: "OpenLayers.Tile.Image" + CLASS_NAME: "OpenLayers.Tile.UTFGrid" });