Leaflet OpenStreetMap – Prevent Requesting Non-Existing Custom Tiles

leafletmbtilesopenstreetmaptiles

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?

Best Answer

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);
Related Question