Strange bug with OpenLayers + CloudMade

Question

Hi,

I am trying something fairly simple, you can see a demo here: http://www.jsfiddle.net/VVe8x/19/

This bug only appears in Firefox, so to see it press either one of the links once (it will take you to either NY or Israel) then press the other link. The bug is that it will not show me the tiles in that location, instead it will show me the background of the div.

P.S In Chrome this works flawlessly.

I dont know if this is a clue or it might confuse you, if in between pressing either NY or Israel links you press the "view the world" link it will allow you then to see the other location..

Many thanks in advance! Roman

Answer 1

The myMap_OpenLayers_Container has the following CSS when the tiles are invisible:

position: absolute; z-index: 749; left: -2.02815e+7px; top: -2007340px;

If you change these around you can see that the correct tiles were loaded, so its likely to be jsFiddle messing them up. The tiles CSS when they don't show also have strange values.

Update:

Testing locally also produces the issue, so that rules out jsFiddle.

A fix would be to set this value after the zoom by calling a function such as:

        updateCSS = function(){
            OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
        }

This looks like a bug, although if it is in OpenLayers or the CloudMade layer properties is hard to tell - I'd imagine the latter, or it would be a widely reported bug. The relevant code in OpenLayers.js appears to be:

centerLayerContainer: function(lonlat){
    var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
    var newPx = this.getViewPortPxFromLonLat(lonlat);
    if ((originPx != null) && (newPx != null)) {
        this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
        this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
    }