LeafletJS check for not loading map

Question

How can I detect whether a map is loading properly or not? What happened was that in my ionic app the map url stopped to work, and the map did not throw an error. It only displayed gray.

Is there a way to check for this event properly and fall back to an alternative map?

Answer 1

I may be late in answering to this but, here are the layer events which you can make use of. This event is triggered on the layer and not on the map. In this case, if the bingLayer fails to load, tileerror will get triggered.

this.bingLayer.on("tileerror", function (error, tile) {
 //do something when the tile fails to load
});

this.bingLayer.on("tileload", function(e){
  //do something when the tile loads successfully
})

Answer 2

Experienced same of recent. Found the reason here Tile Usage Policy.

OpenStreetMap data is free for everyone to use. Our tile servers are not.

Below are the minimum requirements that users of tile.openstreetmap.org must >adhere to. These may change in future, depending on available resources. >Should any users or patterns of usage nevertheless cause problems to the >service, access may still be blocked without prior notice. We will try to >contact relevant parties if possible, but cannot guarantee this.

But because OpenStreetMap data is free, many other organisations provide map >tiles made from OSM data. If your project doesn’t meet these requirements, >you can get OSM-derived map tiles elsewhere. Requirements

Heavy use (e.g. distributing an app that uses tiles from >openstreetmap.org) is forbidden without prior permission from the System >Administrators. See below for alternatives. Clearly display license attribution. Do not actively or passively encourage copyright infringement. Calls to /cgi-bin/export may only be triggered by direct end-user action. >(For example: “click here to export”.) The export call is an expensive >(CPU+RAM) function to run and will frequently reject when server is under >high load. Highly Recommended: Do not hardcode any URL at tile.openstreetmap.org >into an app. Recommended: add a link to https://www.openstreetmap.org/fixthemap to >allow your users to report and fix problems in our data.

Use other tile layers that uses osm to render map. Had to use this for map images to show on mobile

{tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
    zoomControl: false,
    tileLayerOptions: {
        opacity: 0.9,
        detectRetina: true,
        reuseTiles: true
    },
    scrollWheelZoom: false,
    attributionControl: false
}

In a nutshell osm blocked the map tiles.

Answer 3

A usual but simplistic workaround is to specify a single fallback tile, using the errorTileUrl option of your tileLayer. Typically it shows a light red cross to let the user know the map server does not have any image to provide for that area and that zoom.

Now if you want to be smarter and fallback to a different map (i.e. redirect to a different URL), I am not aware of any out-of-the box solution, but it is very well do-able. The idea is to override the _tileOnError method of the L.TileLayer class, which normally replaces the tile by the one from errorTileUrl when it receives a 404 error (i.e. no tile available on the server). In the given link, it automatically replaces the URL by a new one for a different location (could be a different server), as it expects only a few tiles to be missing.

Now if you assume the whole server would stop responding and you want to switch over to a different tileLayer (so that it stops pinging the faulty server), you could implement for example a simple counter that is incremented by the _tileOnError method, and once a given threshold is reached, switch the layers.