CODEWITHSUNDEEP
javascriptleafletbounds
RogerHN
RogerHN

Reputation: 604

How to prevent leaflet from loading tiles outside map area?

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.

Upvotes: 0

Views: 1739

Answers (1)

nathansnider
nathansnider

Reputation: 2873

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/

Upvotes: 1

Related Questions