How to prevent leaflet from loading tiles outside map area?

Question

I have a map that is 8576x8576, and I keep getting console errors:

Failed to load resource: net::ERR_FILE_NOT_FOUND

Because leaflet are trying to load tiles that doesn't exists. I have my bounds set and MaxBounds to prevent panning outside map area (to keep map on the center of the screen).

var map = L.map('map', {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    zoomControl: false,
    crs: L.CRS.MySimple
}).setView([0, 0], 3);

L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom,
    tileSize: 268,
    noWrap: true,
    reuseTiles: true,
    tms: false,
    bounds: mybounds,
    errorTileUrl: "assets/map/404.jpg",
    continuousWorld: true
}).addTo(map);

new L.Control.Zoom({position: 'topright'}).addTo(map);

var sidebar = L.control.sidebar('sidebar').addTo(map);

var mybounds = [[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]];

map.setMaxBounds([[-5600, -5600], [5600, 5600]]);

What I am doing wrong? Why leaflet keeps trying to load those tiles?

I tried to set MaxBounds like this:

map.setMaxBounds([[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]]);

And still get those errors.

Answer 1

You need to define mybounds before creating your tilelayer . If your bounds lie exactly on the edges of your tiles, you may also need to bring the bounds in by a tiny amount to keep the map from trying to load adjoining tiles. Here is an example with OSM tiles:

http://fiddle.jshell.net/nathansnider/2g4h5eu5/