leaflet no internet detection and notification

Issue

If for example, my wifi goes offline, in leaflet i see new map areas grey but no notification about what really happening.

if i open the console i see:

GET https://a.tiles.mapbox.com/v4/image.png?access_token=correct_token 
net::ERR_INTERNET_DISCONNECTED

anyone knows a way to catch such events and displaying a custom warning?

I already tried catching:

$scope.$watch('tileerror', function (error, tile) {
    alert("No coonection");
});

p.s. using angular-leaflet-directive

Solution

EDIT: as pointed out by Ghybs in the comments there is indeed a tileerror event firing from L.TileLayer, however as far as i can see it's not implemented in Angular Leaflet Directive, please correct me if i'm wrong.

L.TileLayer does have an option for setting a replacement image when the tile cannot be loaded called: errorTileUrl:

URL to the tile image to show in place of the tile that failed to load.

new L.TileLayer(URL, {
    errorTileUrl: 'error.png'
});

http://leafletjs.com/reference.html#tilelayer-errortileurl

If you need to preform some logic when tiles fail to load you could overwrite L.TileLayer's _tileOnError method:

L.TileLayer.include({
    _tileOnError: function (done, tile, e) {

        // Do your stuff
        alert('whooops!');

        // Leaflet stuff
        var errorUrl = this.options.errorTileUrl;
        if (errorUrl) {
            tile.src = errorUrl;
        }
        done(e, tile);
    } 
});

https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js#L96

Answered By - iH8