Leaflet tries to get negative value images or images that don't exist

[donaldallen]

Here is my Leaflet config:

function init() {
    var mapMinZoom = 2;
    var mapMaxZoom = 5;
    var map = L.map('map', {
        maxZoom: mapMaxZoom,
        minZoom: mapMinZoom,
        crs: L.CRS.Simple
    }).setView([0, 0], mapMaxZoom);

    var mapBounds = new L.LatLngBounds(
        map.unproject([0, 4352], mapMaxZoom),
        map.unproject([2048, 0], mapMaxZoom));

    map.fitBounds(mapBounds);
    L.tileLayer('/assets/themes/sec/img/tiles/{z}/{x}/{y}.png', {
        minZoom: mapMinZoom,
        maxZoom: mapMaxZoom,
        bounds: mapBounds,
        noWrap: true,
        continuousWorld: true
    }).addTo(map);

    var store_marker = L.marker([0, 0]).addTo(map);
}

Everything works, but I get a lot of "resource not found" in my console whenever I zoom or pan:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (0.png, line 0)
http://localhost:3000/assets/themes/sec/img/tiles/2/-1/0.png

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (0.png, line 0)
http://localhost:3000/assets/themes/sec/img/tiles/2/1/0.png

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (1.png, line 0)
http://localhost:3000/assets/themes/sec/img/tiles/2/-1/1.png

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (1.png, line 0)
http://localhost:3000/assets/themes/sec/img/tiles/2/1/1.png

I have no negative numbered tiles. The files referenced here don't exist. Yet everything looks fine on the map. I used MapTiler to build the map. Anything I can do to fix this?

[danzel]

I was going to suggest adding the bounds option on your tilelayer, but you've already got it.
Maybe try removing the map.unproject calls when making your LatLngBounds?

Do you ever get a -2 or just -1 ?

[donaldallen]

I do get -2 sometimes, yes. Again, there's nothing visually wrong with any of this. Just the requests being made get 404'd.

[danzel]

Yeah, it's a bit weird, AFAIK the bounds option on tileLayer is meant to stop that happening (added in #991)

[robkovacs]

Having a similar issue...I took the advice of changing the LatLngBounds to not use map.unproject. That didn't work, but I noticed if I added 1 to all of the coordinates in my mapBounds, everything seems fine. Hopefully that helps track down the root cause.

Online at http://www.robkovacs.com/projects/rock-crusher/about-park/park-map/

My final Leaflet config:

var mapBounds = new L.LatLngBounds([-383, 1], [1, 511]),
    map = L.map('park-map', {
        crs: L.CRS.Simple,
        minZoom: 1,
        maxZoom: 3,
        bounds: mapBounds,
        noWrap: true,
        continuousWorld: true
    }).setView([-384, 0], 1);

L.tileLayer('http://www.robkovacs.com/projects/rock-crusher/elements/park-map-tiles/{z}/map_{x}_{y}.png', {
    minZoom: 1,
    maxZoom: 3,
    attribution: 'Map &copy; 2014 <a href="http://www.southeastpublications.com/" target="_blank">Southeast Publications</a>',
    crs: L.CRS.Simple,
    bounds: mapBounds,
    noWrap: true,
    continuousWorld: true
}).addTo(map);

map.setMaxBounds(mapBounds);

[SundialServices]

I don't know exactly what Rob meant when he said, "add 1 to all the coordinates." Anyhow, there are definitely problems with setBounds, setMaxBounds and fitBounds in the 0.7 release. For my map, which is 1164x700 pixels (tiled from upper-left), I get a slew of (always negative ...) URL requests coming out of the back-end, and maps that, although they do "bounce back," are neither correctly positioned (centered) on the screen, nor of the proper size, if "fitBounds()" is used at all.

[xPaw]

Looks like bounds are simply checked incorrectly, adding 1 pixel to lower bounds, and removing 1 pixel from upper bounds fixes the issue.

[Eschon]

@xPaw can you explain what you mean by lower/upper bounds?

Do you mean changing

var mapBounds = new L.LatLngBounds(
map.unproject([0, 4352], mapMaxZoom),
map.unproject([2048, 0], mapMaxZoom));

to

var mapBounds = new L.LatLngBounds(
map.unproject([1, 4351], mapMaxZoom),
map.unproject([2047, 1], mapMaxZoom));

[xPaw]

@Eschon Yep, that's what I mean.

[IvanSanchez]

I _think_ that the problem resides in the difference between this bit of code in 0.7.x:

        var tileBounds = L.bounds(
                bounds.min.divideBy(tileSize)._floor(),
                bounds.max.divideBy(tileSize)._floor());

And this bit of code in master:

        return new L.Bounds(
            bounds.min.divideBy(this._tileSize).floor(),
            bounds.max.divideBy(this._tileSize).ceil().subtract([1, 1]));

@xPaw Does your problem happen in 0.7.x, master, or both? If using 0.7.x, can you set up a breakpoint in the javascript code I've referred to and see if the values are offset by one?

[xPaw]

It's both 0.7 and master.

[IvanSanchez]

Hm. I think I was wrong in my previous note. See this line here:

    return L.latLngBounds(this.options.bounds).intersects(tileBounds);

A tile will be loaded if its bounds intersect the layer bounds. This is true for overlapping edges.

Maybe it's time to break open the books on spatial operators and see if bounds.contains() will work or not.

[Eschon]

@xPaw's workaround doesn't work for me. I guess I'll stick to my workaround by adding 1x1 transparent dummy tiles until this gets fixed.

[IvanSanchez]

OK, folks, #3508 needs some love (and testing of that branch) to see if it solves the problem gracefully.

[mourner]

@Eschon @xPaw @robkovacs @SundialServices @donaldallen guys, could you try the PR above and see if it works as expected?

[donaldallen]

Works perfectly for me. Thank you so much!

[mikila85]

i downloaded the latest:
Leaflet 1.0.3 and i still see this 404 when i zoom out of map with noWrap because of 0 and negative numbers in the x y z.
anyone knows how to solve this?

[IvanSanchez]

@mikila85 If this bug is still reproducible in 1.0.3, please publish a fiddle/codepen/playground that displays this behaviour.

[mikila85]

it is still reproducible but adding bounds: [[-90, -180], [90, 180]] solved the problem. thx <3

[josephrocca]

@IvanSanchez I'm having the same problem - still reproducible in 1.0.3: http://jsbin.com/tiducorejo/edit?html,output (try moving left and watching console)

[IvanSanchez]

@josephrocca If you specify the noWrap option, and not the bounds option for the tilelayer, then this is behaviour as expected.

[josephrocca]

Ahh thanks - sorry for the trouble!