ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Tile/UTFGrid.js to remove traces of images.

Browse Source
This commit is contained in:
Matthew Perry
2012-02-06 09:46:57 -08:00
parent 8aaaecc9ee
commit fb791e14fa
1 changed files with 17 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
lib/OpenLayers/Tile/UTFGrid.js
View File

@@ -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
*
* <OpenLayers.Tile.UTFGrid> 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"
});