Leaflet does not load alternative image for some HTTP error

Francesco Urdih 0
Viewed 27

I'm using Leaflet and sometimes I run into some issues while trying to load tiles.

So I tend to use an option offered from Leaflet so that I load a default image whenever an error happens.

But I don't know why it is not working for 400 HTTP response (and perhaps even others)? Instead Leaflet displays a huge '400' which clearly I don't desire.

How can I solve it? I'd prefer if Leaflet loaded the alternative image for any error response.

Here's an example of code where the default image (a simple black one) is loaded for 404 HTTP response while not for 400 HTTP response.

var map1 = L.map('map1').setView([50,0], 5);

//tile that generates 400 error
L.tileLayer("https://tile.gbif.org/3575/omt/0/-1/0@4x.png?style=gbif-light", 
{
    tileSize: 512,
    maxZoom: 16,
    attribution: '© OpenStreetMap',
    errorTileUrl: "https://th.bing.com/th/id/R.cae2b472a6f1cdaa99d25136227d32e1?rik=30v5m3kfjICf8w&riu=http%3a%2f%2fwww.drodd.com%2fimages16%2fblack-picture10.jpg&ehk=J5mSS4MRPrrwCcMS%2bD9rP0sKuJxWfRxopWEGC7KPgg0%3d&risl=&pid=ImgRaw&r=0"
}).addTo(map1);

//tile that generates 404 error
var map2 = L.map('map2').setView([50,0], 5);
L.tileLayer("https://tile.gbif.org/3575/omt/2/0/4@4x.png?style=gbif-light", 
{
    tileSize: 512,
    maxZoom: 16,
    attribution: '© OpenStreetMap',
    errorTileUrl: "https://th.bing.com/th/id/R.cae2b472a6f1cdaa99d25136227d32e1?rik=30v5m3kfjICf8w&riu=http%3a%2f%2fwww.drodd.com%2fimages16%2fblack-picture10.jpg&ehk=J5mSS4MRPrrwCcMS%2bD9rP0sKuJxWfRxopWEGC7KPgg0%3d&risl=&pid=ImgRaw&r=0"
}).addTo(map2);
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
        <title>Test on map</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js" defer></script>
        <style>
        #map1, #map2 {
            width: 600px;
            height: 600px;
        }
        </style>
    </head>
    <body>
        <div id="map1"></div>
        <div id="map2"></div>
    </body>
</html>

leaflet javascript
1 Answers

It looks like your Tile Server still sends an image as payload to the https://tile.gbif.org/3575/omt/0/-1/0@4x.png?style=gbif-light tile request, while also sending a 400 error code in the response header:

https://tile.gbif.org/3575/omt/0/-1/0@4x.png?style=gbif-light

Image actually still returned by server

So the big "400" image actually comes from the Tile Server, it is not generated by Leaflet itself.

Unfortunately, when such an inconsistent response is received, only the "load" event on the <img> Element is fired, whereas the "error" event remains silent:

const img = document.createElement('img')
img.onerror = () => console.log('error')
img.onload = () => console.log('load')
img.src = 'https://tile.gbif.org/3575/omt/0/-1/0@4x.png?style=gbif-light'

Therefore, Leaflet has no way to know that the server also sent the error code, it sees only the image payload, and displays it as a legit tile image.

ghybs0
Related