We are using a remote pm tiles service to display a background map in our application. We switched to a new remote service as the old one will be disbanded.
In Chrome/Edge/Brave/Opera everything is working fine, loading the tiles in a series of range reuqests but Firefox is aborting the first request to the tiles file resulting in a missing background map.
We create the map like this:
const protocol = new Protocol();
addProtocol('pmtiles', protocol.tile);
const map = new MapLibreMap({
attributionControl: false,
boxZoom: false,
container: 'map',
doubleClickZoom: false,
dragPan: false,
dragRotate: false,
interactive: false,
keyboard: false,
pitchWithRotate: false,
scrollZoom: false,
touchZoomRotate: false,
style: HOST + '/style.json'
});
During the migration we had to add the tile protocol hook.
The container is defined like this:
<div class="map-container" id="map" #map>
<app-background-layer></app-background-layer>
</div>
This screenshot from the network layer shows how the tiles request is cancelled while all other requests are executing successfully.
The only clues I found so far is that it might be an issue that requests are sent in parallel causing the first one to be aborted, which seems kind of unlikely.
I tried using a different protocol and disabling cancelPendingTileRequestsWhileZooming.
Does anyone have an idea what could cause this/how to fix it or at least what we could do to gather more information?
We finally found the reason by opening another website using the same tiles service. The tiles were also not displayed but this time the firefox console did show an error from maplibre-gl that the server did not send a content-length header.
After this was added by the team developing the service everything works fine.