[OpenLayers-Users] Openlayers 2.13.1 blank tiles - please help

[Chris Emberson]

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]);
}


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20131110/2150b3dd/attachment.html>