CODEWITHSUNDEEP
leaflet
Dine
Dine

Reputation: 7283

leaflet.js is trying to load tiles beyond bounds

I'm initialising leaflet like this:

var map,
    imageWidth  = 6400,
    imageHeight = 8000,
    tileSize    = 200;

L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
                minZoom: 17,
                maxZoom: 20,
                updateWhenIdle: true,
                noWrap: true,
                tileSize: tileSize,
                unloadInvisibleTiles: false,
                reuseTiles: true,
                crs: L.CRS.Simple
              }).addTo(map);

            map.doubleClickZoom.disable();

            var southWest = map.unproject([0, imageHeight], map.getMaxZoom());
            var northEast = map.unproject([imageWidth, 0], map.getMaxZoom());
            map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

I'm getting these console errors:

GET http://localhost:8000/dist/tiles/17/map_83886_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83886_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83886_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_3_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_2_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_1_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_3.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_4.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_2.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_5.png 404 (Not Found)

I don't quite understand why the library is trying to load these tiles since I've set the boundaries, so leaflet shouldn't attempt to load anything beyond them?

Is there anything problems in the way I'm using map.unproject? The bounds seem to work well in terms of how far the user can drap the image on the screen.

Thanks!

Upvotes: 3

Views: 2962

Answers (3)

James
James

Reputation: 1065

Incase anyone is still experiencing this problem, I solved it using @Josh's solution, but had to also decreased my map width and height by 2px each (1px for each side of the boundaries). So my bounds went from something like

var southWest = map.unproject([0, 1200], map.getMaxZoom());
var northEast = map.unproject([800, 0], map.getMaxZoom());

To:

var southWest = map.unproject([1, 1198], map.getMaxZoom());
var northEast = map.unproject([798, 1], map.getMaxZoom());

Upvotes: 1

Josh
Josh

Reputation: 3442

Leaflet 0.7 has a bug where it attempts to load tiles touching the bounds of the map, not just ones that are intersecting the bounds. This should be fixed in Leaflet 1.0 (which is in Beta at the moment). You can see the details at Issue 2981's bug report.

The easy solution is to adjust your mapbounds by a single pixel. I've found that really only the 0's need to be adjusted. So instead of:

var southWest = map.unproject([0, imageHeight], map.getMaxZoom());
var northEast = map.unproject([imageWidth, 0], map.getMaxZoom());

Use:

var southWest = map.unproject([1, imageHeight], map.getMaxZoom());
var northEast = map.unproject([imageWidth, 1], map.getMaxZoom());

Upvotes: 1

duenni
duenni

Reputation: 318

maxBounds is from type LatLngBounds. So you have to put coordinates in and not a pixel size like in your example.

Upvotes: 3

Related Questions