<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content=text/html;charset=iso-8859-1 http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.18702"></HEAD>
<BODY style="PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 15px"
id=MailContainerBody leftMargin=0 topMargin=0 CanvasTabStop="true"
name="Compose message area">
<DIV><FONT face=Calibri>Dear Users,</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>I am running into a problem with my application that
uses 2.13.1 where occasionally tiles fail to render correctly. Instead of
the tile being rendered, a blank square with a cross in the top LH corner
appears (as if the tile did not exist). I have checked and these tiles
definitely do exist. </FONT><FONT face=Calibri>The application has a total of 9
pre-rendered tile image layers, a UTF Grid layer and a vector layer. The UTF
grid layer is on permanently. The tiles are all requested from the same
server url.</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>The problem happens across all browsers, and the faster
the internet connection, the quicker the problem happens. For slower connections
it is easier to replicate the issue if all layers are turned on. Panning around
and zooming vigorously (</FONT><FONT face=Calibri>in an attempt to break it)
seems to also encourage it to happen. I'm guessing that it relates to the
number of tile requests that the browser can handle, and by adding more layers
and quickly panning or zooming this 'bottleneck' is reached sooner maybe? I have
created a buffer of 1 for each of the tile layers. Whilst this
obviously causes more tile requests, the map window sits in a
jquery re-sizeable frame, and without this buffer the map fails to fill a
maximized frame correctly.</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>I've tried playing with the Tile Manager settings
(zoomDelay and moveDelay), to see if this influences the problem, but
no luck - I cannot seem to make the problem better or worse. Also the
OpenLayers.IMAGE_RELOAD_ATTEMPTS does not appear to help either.</FONT></DIV>
<DIV><FONT face=Calibri>I have pasted the code below - </FONT><FONT
face=Calibri>any help or suggestions are really appreciated as this is causing
havoc with the end user,</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>Thanks in advance</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>eluxon74</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>var map;<BR>var lat = 12.5; // latitude of centre of map
when loading<BR>var lon = 3.5; // longitude of centre of map when loading<BR>var
zoom = 3;<BR>var fromProjection = new
OpenLayers.Projection("EPSG:4326"); // transform from WGS
1984<BR>var toProjection = new OpenLayers.Projection("EPSG:900913"); // to
spherical mercator projection<BR>var position = new OpenLayers.LonLat(lon,
lat).transform( fromProjection, toProjection);<BR>var extent = new
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);<BR>//
toolbar<BR>var nav = new OpenLayers.Control.NavigationHistory({title:'Return to
previous extent'});<BR>var pan = new OpenLayers.Control.DragPan({title:'Pan
around the map'});<BR>var zb = new OpenLayers.Control.ZoomBox({title:"Click and
drag a box to zoom"});<BR>var max = new
OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});<BR>var toolbar
= new OpenLayers.Control.Panel({displayClass: 'olControlPanel'});</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>var callback = function(infoLookup, loc, pixel)
{<BR> var msg = "";<BR> if (infoLookup)
{<BR> var
info;<BR> for (var idx in infoLookup)
{<BR> info =
infoLookup[idx];<BR>
if (info && info.data)
{<BR>
output.innerHTML =
info.data.CONCAT;<BR>
} else
{<BR>
output.innerHTML =
" ";<BR>
}<BR> }<BR>
}<BR>}</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>var callback2 = function(infoLookup, loc, pixel)
{<BR> var msg = "";<BR> if (infoLookup)
{<BR> var
info;<BR> for (var idx in infoLookup)
{<BR> info =
infoLookup[idx];<BR>
if (info && info.data)
{<BR>
output2.innerHTML =
info.data.CONCAT;<BR>
} else
{<BR>
output2.innerHTML =
" ";<BR>
}<BR> }<BR>
}<BR>}</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>function displayResolution() {<BR>
document.getElementById("resolution").innerHTML =
map.resolution.toFixed();<BR> }<BR>function displayZoom()
{<BR> document.getElementById("zoomlevel").innerHTML =
map.zoom.toFixed();<BR> }</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>// initialize the map<BR>function init() {<BR>// define
the layers<BR>var layer1 = new OpenLayers.Layer.XYZ("Layer
1","path/to/layer1/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':true,"opacity":1.0,
'visibility':true, 'buffer':1, 'removeBackBufferDelay': 1, transitionEffect:
'null'});<BR>var layer2 = new OpenLayers.Layer.XYZ("Layer
2","path/to/layer2/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":0.6,'visibility':false,
'buffer':1, 'removeBackBufferDelay': 1, transitionEffect: 'null'});<BR>var
layer3 = new OpenLayers.Layer.XYZ("Layer 3",
"path/to/layer3/tiles/${z}/${x}/${y}", {'type':'png', 'isBaseLayer':false,
"opacity":1.0, 'visibility':true, 'buffer':1, 'removeBackBufferDelay': 1,
transitionEffect: 'null'});<BR>var layer4 = new OpenLayers.Layer.XYZ("Layer
4","path/to/layer4/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":1.0,'visibility':false,
'buffer':1, 'removeBackBufferDelay': 1, transitionEffect: 'null'});<BR>var
utfgridLayer = new OpenLayers.Layer.UTFGrid({name:"Utf Grid layer",
displayInLayerSwitcher:false, url: "path/to/utf_grid/${z}/${x}/${y}.json",
utfgridResolution: 2, 'removeBackBufferDelay': 1});<BR>var layer5 = new
OpenLayers.Layer.XYZ("Layer
5","path/to/layer5/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":0.6,'visibility':false,
'buffer':1, 'removeBackBufferDelay': 1, transitionEffect: 'null'});<BR>var
layer6 = new OpenLayers.Layer.XYZ("Layer
6","path/to/layer6/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":0.6,'visibility':false,
'buffer':1, 'removeBackBufferDelay': 1, transitionEffect: 'null'});<BR>var
layer7 = new OpenLayers.Layer.XYZ("Layer
7","path/to/layer7/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":1.0,
'visibility':false, 'buffer':1, 'removeBackBufferDelay': 1, transitionEffect:
'null'});<BR>var layer8 = new OpenLayers.Layer.XYZ("Layer
8","path/to/layer8/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':false,"opacity":1.0,
'visibility':false, 'buffer':1, 'removeBackBufferDelay': 1, transitionEffect:
'null'});<BR>var layer9 = new OpenLayers.Layer.XYZ("Layer
9","path/to/layer9/tiles/${z}/${x}/${y}",{'type':'png','isBaseLayer':true,"opacity":1.0,
'visibility':false, 'buffer':1, 'removeBackBufferDelay': 1, transitionEffect:
'null'});<BR>var linelayer = new OpenLayers.Layer.Vector("My Line Sketch",
{displayInLayerSwitcher:false});</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>var output = document.getElementById("output");<BR>var
output2 = document.getElementById("output2");</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>var layerswitchControl = new
OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')});
<BR>var attribution = new OpenLayers.Control.Attribution();<BR>var
zoompanelControl = new OpenLayers.Control.ZoomPanel();<BR>var scalebarControl =
new OpenLayers.Control.ScaleBar();<BR>var utf_control = new
OpenLayers.Control.UTFGrid({callback: callback, handlerMode: "hover" });<BR>var
utf_control2 = new OpenLayers.Control.UTFGrid({callback: callback2, handlerMode:
"hover" });<BR>var navigation = new
OpenLayers.Control.Navigation({zoomWheelEnabled: false, dragPanOptions:
{enableKinetic: false}});</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>//custom user-drawn lines<BR>var drw = new
OpenLayers.Control.DrawFeature(linelayer, OpenLayers.Handler.Path);<BR>var
lineSketch = OpenLayers.Util.applyDefaults(lineSketch,
OpenLayers.Feature.Vector.style['default']);<BR>lineSketch.strokeColor =
"#000000";<BR>lineSketch.strokeWidth = 2;<BR>linelayer.style =
lineSketch;</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>//tile manager<BR>var tileMgr = new
OpenLayers.TileManager({zoomDelay: 100, moveDelay: 50});</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri>this.map = new OpenLayers.Map({div: "map", theme: null,
projection: "EPSG:900913", zoomMethod: null, tileManager:
tileMgr,<BR> layers:
[layer1, layer2, layer3, layer4, layer5, layer6, layer7, layer8, layer9,
utfgridLayer,
linelayer],<BR> controls:
[layerswitchControl, attribution, zoompanelControl, scalebarControl,
utf_control, utf_control2,
navigation],<BR>
maxExtent: extent,<BR>
restrictedExtent: extent<BR>});<BR>OpenLayers.IMAGE_RELOAD_ATTEMPTS =
3;<BR>OpenLayers.Util.onImageLoadErrorColor =
"transparent";<BR>toolbar.addControls([pan, zb, max, drw, nav.previous,
nav.next]);<BR>map.addControls([nav, toolbar])<BR>map.setCenter(position,
zoom);<BR>map.getNumZoomLevels = function(){return
10;};<BR>map.events.register("moveend", null,
displayResolution);<BR>map.events.register("moveend", null, displayZoom);<BR>var
mouse_pos = new OpenLayers.Control.MousePosition({div:
document.getElementById('mousepos'), displayProjection: new
OpenLayers.Projection('EPSG:4326'), emptyString:'Mouse is not on the
map'});<BR>var mouse_pos2 = new OpenLayers.Control.MousePosition({div:
document.getElementById('mousepos2'), emptyString:'Mouse is not on the
map'});<BR>map.addControls([mouse_pos, mouse_pos2]);</FONT></DIV>
<DIV><FONT face=Calibri>}</FONT></DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri></FONT> </DIV>
<DIV><FONT face=Calibri></FONT> </DIV></BODY></HTML>