OpenLayers.Tile.Image

Instances of OpenLayers.Tile.Image are used to manage the image tiles used by various layers.  Create a new image tile with the OpenLayers.Tile.Image constructor.

Inherits from

Summary
OpenLayers.Tile.ImageInstances of OpenLayers.Tile.Image are used to manage the image tiles used by various layers.
Properties
events{OpenLayers.Events} An events object that handles all events on the tile.
url{String} The URL of the image being requested.
imgDiv{HTMLImageElement} The image for this tile.
frame{DOMElement} The image element is appended to the frame.
imageReloadAttempts{Integer} Attempts to load the image.
layerAlphaHack{Boolean} True if the png alpha hack needs to be applied on the layer’s div.
asyncRequestId{Integer} ID of an request to see if request is still valid.
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.
canvasContext{CanvasRenderingContext2D} A canvas context associated with the tile image.
crossOriginKeywordThe value of the crossorigin keyword to use when loading images.
Constructor
OpenLayers.Tile.ImageConstructor for a new OpenLayers.Tile.Image instance.
Functions
destroynullify references to prevent circular references and memory leaks
drawCheck that a tile should be drawn, and draw it.
renderTileInternal function to actually initialize the image tile, position it correctly, and set its url.
positionTileUsing the properties currenty set on the layer, position the tile correctly.
clearRemove the tile from the DOM, clear it of any image related data so that it can be reused in a new location.
getImageReturns or creates and returns the tile image.
setImageSets the image element for this tile.
initImageCreates the content for the frame on the tile.
setImgSrcSets the source for the tile image
getTileGet the tile’s markup.
createBackBufferCreate a backbuffer for this tile.
onImageLoadHandler for the image onload event
onImageErrorHandler for the image onerror event
stopLoadingStops a loading sequence so onImageLoad won’t be executed.
getCanvasContextReturns a canvas context associated with the tile image (with the image drawn on it).
Constants
OpenLayers.Tile.Image.IMAGE{HTMLImageElement} The image for a tile.

Properties

events

{OpenLayers.Events} An events object that handles all events on the tile.

Register a listener for a particular event with the following syntax

tile.events.register(type, obj, listener);

Supported event types (in addition to the OpenLayers.Tile events)

beforeloadTriggered before an image is prepared for loading, when the url for the image is known already.  Listeners may call setImage on the tile instance.  If they do so, that image will be used and no new one will be created.

url

{String} The URL of the image being requested.  No default.  Filled in by layer.getURL() function.  May be modified by loadstart listeners.

imgDiv

{HTMLImageElement} The image for this tile.

frame

{DOMElement} The image element is appended to the frame.  Any gutter on the image will be hidden behind the frame.  If no gutter is set, this will be null.

imageReloadAttempts

{Integer} Attempts to load the image.

layerAlphaHack

{Boolean} True if the png alpha hack needs to be applied on the layer’s div.

asyncRequestId

{Integer} ID of an request to see if request is still valid.  This is a number which increments by 1 for each asynchronous request.

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 most Opera versions do not fully support this option.  On all browsers, transition effects are not supported if POST requests are used.

canvasContext

{CanvasRenderingContext2D} A canvas context associated with the tile image.

crossOriginKeyword

The value of the crossorigin keyword to use when loading images.  This is only relevant when using getCanvasContext for tiles from remote origins and should be set to either ‘anonymous’ or ‘use-credentials’ for servers that send Access-Control-Allow-Origin headers with their tiles.

Constructor

OpenLayers.Tile.Image

Constructor for a new OpenLayers.Tile.Image instance.

Parameters

layer{OpenLayers.Layer} layer that the tile will go in.
position{OpenLayers.Pixel}
bounds{OpenLayers.Bounds}
url{String} Deprecated.  Remove me in 3.0.
size{OpenLayers.Size}
options{Object}

Functions

destroy

destroy: function()

nullify references to prevent circular references and memory leaks

draw

draw: function()

Check that a tile should be drawn, and draw it.

Returns

{Boolean} Was a tile drawn?  Or null if a beforedraw listener returned false.

renderTile

renderTile: function()

Internal function to actually initialize the image tile, position it correctly, and set its url.

positionTile

positionTile: function()

Using the properties currenty set on the layer, position the tile correctly.  This method is used both by the async and non-async versions of the Tile.Image code.

clear

clear: function()

Remove the tile from the DOM, clear it of any image related data so that it can be reused in a new location.

getImage

getImage: function()

Returns or creates and returns the tile image.

setImage

setImage: function(img)

Sets the image element for this tile.  This method should only be called from beforeload listeners.

Parameters img - {HTMLImageElement} The image to use for this tile.

initImage

initImage: function()

Creates the content for the frame on the tile.

setImgSrc

setImgSrc: function(url)

Sets the source for the tile image

Parameters

url{String} or undefined to hide the image

getTile

getTile: function()

Get the tile’s markup.

Returns

{DOMElement} The tile’s markup

createBackBuffer

createBackBuffer: function()

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.

onImageLoad

onImageLoad: function()

Handler for the image onload event

onImageError

onImageError: function()

Handler for the image onerror event

stopLoading

stopLoading: function()

Stops a loading sequence so onImageLoad won’t be executed.

getCanvasContext

getCanvasContext: function()

Returns a canvas context associated with the tile image (with the image drawn on it).  Returns undefined if the browser does not support canvas, if the tile has no image or if it’s currently loading.

The function returns a canvas context instance but the underlying canvas is still available in the ‘canvas’ property:

var context = tile.getCanvasContext();
if (context) {
    var data = context.canvas.toDataURL('image/jpeg');
}

Returns

{Boolean}

Constants

OpenLayers.Tile.Image.IMAGE

{HTMLImageElement} The image for a tile.

Constructor for a new OpenLayers.Tile.Image instance.
destroy: function()
nullify references to prevent circular references and memory leaks
draw: function()
Check that a tile should be drawn, and draw it.
renderTile: function()
Internal function to actually initialize the image tile, position it correctly, and set its url.
positionTile: function()
Using the properties currenty set on the layer, position the tile correctly.
clear: function()
Remove the tile from the DOM, clear it of any image related data so that it can be reused in a new location.
getImage: function()
Returns or creates and returns the tile image.
setImage: function(img)
Sets the image element for this tile.
initImage: function()
Creates the content for the frame on the tile.
setImgSrc: function(url)
Sets the source for the tile image
getTile: function()
Get the tile’s markup.
createBackBuffer: function()
Create a backbuffer for this tile.
onImageLoad: function()
Handler for the image onload event
onImageError: function()
Handler for the image onerror event
stopLoading: function()
Stops a loading sequence so onImageLoad won’t be executed.
getCanvasContext: function()
Returns a canvas context associated with the tile image (with the image drawn on it).
This class represents a screen coordinate, in x and y coordinates
Instances of this class represent bounding boxes.
Contains convenience functions for string manipulation.
Instances of this class represent a width/height pair
Close