Dear Users,
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. 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.
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 (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.
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.
I have pasted the code below - any help or suggestions are really appreciated
as this is causing havoc with the end user,
Thanks in advance
eluxon74
var map;
var lat = 12.5; // latitude of centre of map when loading
var lon = 3.5; // longitude of centre of map when loading
var zoom = 3;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform
from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to spherical
mercator projection
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection,
toProjection);
var extent = new
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
// toolbar
var nav = new OpenLayers.Control.NavigationHistory({title:'Return to previous
extent'});
var pan = new OpenLayers.Control.DragPan({title:'Pan around the map'});
var zb = new OpenLayers.Control.ZoomBox({title:"Click and drag a box to zoom"});
var max = new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});
var toolbar = new OpenLayers.Control.Panel({displayClass: 'olControlPanel'});
var callback = function(infoLookup, loc, pixel) {
var msg = "";
if (infoLookup) {
var info;
for (var idx in infoLookup) {
info = infoLookup[idx];
if (info && info.data) {
output.innerHTML = info.data.CONCAT;
} else {
output.innerHTML = " ";
}
}
}
}
var callback2 = function(infoLookup, loc, pixel) {
var msg = "";
if (infoLookup) {
var info;
for (var idx in infoLookup) {
info = infoLookup[idx];
if (info && info.data) {
output2.innerHTML = info.data.CONCAT;
} else {
output2.innerHTML = " ";
}
}
}
}
function displayResolution() {
document.getElementById("resolution").innerHTML = map.resolution.toFixed();
}
function displayZoom() {
document.getElementById("zoomlevel").innerHTML = map.zoom.toFixed();
}
// initialize the map
function init() {
// define the layers
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'});
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'});
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'});
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'});
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});
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'});
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'});
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'});
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'});
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'});
var linelayer = new OpenLayers.Layer.Vector("My Line Sketch",
{displayInLayerSwitcher:false});
var output = document.getElementById("output");
var output2 = document.getElementById("output2");
var layerswitchControl = new
OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')});
var attribution = new OpenLayers.Control.Attribution();
var zoompanelControl = new OpenLayers.Control.ZoomPanel();
var scalebarControl = new OpenLayers.Control.ScaleBar();
var utf_control = new OpenLayers.Control.UTFGrid({callback: callback,
handlerMode: "hover" });
var utf_control2 = new OpenLayers.Control.UTFGrid({callback: callback2,
handlerMode: "hover" });
var navigation = new OpenLayers.Control.Navigation({zoomWheelEnabled: false,
dragPanOptions: {enableKinetic: false}});
//custom user-drawn lines
var drw = new OpenLayers.Control.DrawFeature(linelayer,
OpenLayers.Handler.Path);
var lineSketch = OpenLayers.Util.applyDefaults(lineSketch,
OpenLayers.Feature.Vector.style['default']);
lineSketch.strokeColor = "#000000";
lineSketch.strokeWidth = 2;
linelayer.style = lineSketch;
//tile manager
var tileMgr = new OpenLayers.TileManager({zoomDelay: 100, moveDelay: 50});
this.map = new OpenLayers.Map({div: "map", theme: null, projection:
"EPSG:900913", zoomMethod: null, tileManager: tileMgr,
layers: [layer1, layer2, layer3, layer4, layer5, layer6, layer7,
layer8, layer9, utfgridLayer, linelayer],
controls: [layerswitchControl, attribution, zoompanelControl,
scalebarControl, utf_control, utf_control2, navigation],
maxExtent: extent,
restrictedExtent: extent
});
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
toolbar.addControls([pan, zb, max, drw, nav.previous, nav.next]);
map.addControls([nav, toolbar])
map.setCenter(position, zoom);
map.getNumZoomLevels = function(){return 10;};
map.events.register("moveend", null, displayResolution);
map.events.register("moveend", null, displayZoom);
var mouse_pos = new OpenLayers.Control.MousePosition({div:
document.getElementById('mousepos'), displayProjection: new
OpenLayers.Projection('EPSG:4326'), emptyString:'Mouse is not on the map'});
var mouse_pos2 = new OpenLayers.Control.MousePosition({div:
document.getElementById('mousepos2'), emptyString:'Mouse is not on the map'});
map.addControls([mouse_pos, mouse_pos2]);
}
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
