Prevent Leaflet from requesting non-existing custom tiles

Question

I have created custom tiles using TileMill. extracted tiles as png images and adding them on base layer. using following code

var venu_map = new L.tileLayer('static/b18/{z}/{x}/{y}.png', {
               maxZoom:22,
              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              }).addTo(map);

It works fine. But for every zoomlevel change leaflet makes a number of(around 20 -30) requests to non existing tiles resulting in "NetworkError: 404 NOT FOUND. Complete error msg is "NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/static/b18/16/47372/30375.png". The particular image does not exist. Even after setting maxbounds this error show up. Any solutions?

Answer 1

Setting bounds for the layer solves the problem. Because leaflet will not try to fetch tiles out of the specified bounds

var southWest = L.latLng(13.02504085518189, 80.23609399795532),
northEast = L.latLng(13.026849183135116, 80.23797690868378),
bounds = L.latLngBounds(southWest, northEast);


L.tileLayer('static/b18/{z}/{x}/{y}.png', {
maxZoom:22,
bounds:bounds,
reuseTiles : true,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Answer 2

I resolved this issue in a different manner (this is an approach for relatively sparse tiles).

The first time I load the tiles, I send an AJAX call back to the server and walk through the tiles directories sending back the existent tiles in a list. This list format matches the way your api request the tiles.

Then, before requesting a given tile, I look into this json file (which has been serialised into an object) to see if the tiles actually exists.

Passing this burden into the client side has improved the performance a lot.

Answer 3

Leaflet works as designed.

It's normal that it tries to download tiles when you zoom in and out.

You have to set minZoom and maxZoom in the map options so that they match the zoom levels in static/b18/ folder

You can also set maxNativeZoom in your TileLayer options (http://leafletjs.com/reference.html#tilelayer) so that leaflet expand existing tiles in case of a 404 answer