0

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

Mike
  • 741
  • 13
  • 40
  • It's because the JS won't be notified at all that an error occurred when the error is due to no visibility on internet or cross domain issue, ... You could implement a ontileerror event based on a setTimeout method. – Stranded Kid Dec 03 '15 at 15:52
  • Probably related to https://stackoverflow.com/questions/33383092/leafletjs-check-for-not-loading-map/ but no out-of-the-box solution unfortunately. – ghybs Dec 03 '15 at 16:02

1 Answers1

1

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

iH8
  • 27,722
  • 4
  • 67
  • 76
  • Thank you!, Do you know how to overwrite tileOnError with angular-leaflet-directive? i want to try it and accept the answer but im using angular and dont have L.TileLayer – Mike Dec 03 '15 at 15:23
  • You have L.Tilelayer, the directive uses it internally. It's in the global scope as soon as leaflet.js is loaded. So include that piece of code after you load leaflet.js (anywhere, just as long as it's before you declare your map and you're good to go. When the directive initializes a L.Tilelayer it will call the modified version. – iH8 Dec 03 '15 at 15:35
  • It is not advertised in Leaflet API, but there **is** a [`tileerror` event fired on Tile Layer](https://github.com/Leaflet/Leaflet/blob/stable/src/layer/tile/TileLayer.js#L581) when it receives a 404 response: http://jsfiddle.net/ve2huzxw/76/ – ghybs Dec 03 '15 at 16:00
  • Nice find, overlooked that one @ghybs. Undocumented go! :) I'll update my answer, thanks. – iH8 Dec 03 '15 at 16:07
  • 404 errors won't trigger any handler on JS side if the error is GET https://a.tiles.mapbox.com/v4/image.png?access_token=correct_token net::ERR_INTERNET_DISCONNECTED, simply because it's not a 404 error. Some AJAX errors does not trigger anyhting os JS side – Stranded Kid Dec 03 '15 at 16:16
  • @StrandedKid, it's still an error and one can (as Leaflet does in L.Tilelayer) add a listener to the `img` element and catch the `error` event. `new Image().addEventListener('error', function() {});` What status doesn't matter. – iH8 Dec 03 '15 at 16:50
  • @iH8 I've not tested but I think that if the error triggered by the browser is GET https://a.tiles.mapbox.com/v4/image.png?access_token=correct_token net::ERR_INTERNET_DISCONNECTED, new Image().addEventListener('error', function() {}); won't trigger. – Stranded Kid Dec 04 '15 at 09:09