Javascript – Broken Protomaps (pmtiles) rivers rendering, both leaflet and maplibregl

I’m trying to set up OpenStreetMap with a self-hosted Protomaps file served by Apache.

The same error occurs with Leaflet and MaplibreGL. maplibreGL is what I want to use in the app.

I tried removing all stylesheets from the page (except some sizing for the map container) to make sure our styles is not causing the problem, but the result is the same.

versions from package.json:

"maplibre-gl": "^4.7.1",
    "pmtiles": "^3.2.0",

The map shows, is navigable, but rivers and water bodies are rendered incorrectly, as if some parts of the SVG path was closed by a straight line.

I have the same bug with firefox and chrome. The way the rivers are broken changes with zoom level, but it is never correct.

The file /osm/my_area.pmtiles was downloaded using the pmtiles tool. The sample code is composed of various examples. It is 1.4GB so I can’t upload it here. pmtiles verify shows no errors.

DATE='20240922'
AREA=11.958618,48.520243,18.918457,51.120765
pmtiles extract https://build.protomaps.com/$DATE.pmtiles my_area.pmtiles --bbox=$AREA

How I render the map:

import { Protocol } from "pmtiles";
import maplibregl from "maplibre-gl";

function initMaps() {

        let protocol = new Protocol();
        maplibregl.addProtocol("pmtiles", protocol.tile);

        const mapOpts = {
            style: {
                version: 8,
                sources: {
                    selfhosted: {
                        type: "vector",
                        // url: "pmtiles://https://example.com/example.pmtiles",
                        url: "pmtiles:///osm/my_area.pmtiles", // http://fb.local
                    }
                },

                layers: [
                    {
                        id: "water",
                        source: "selfhosted",
                        "source-layer": "water",
                        type: "fill",
                        paint: {
                            "fill-color": "#80b1d3",
                        },
                    },
                    {
                        id: "buildings",
                        source: "selfhosted",
                        "source-layer": "buildings",
                        type: "fill",
                        paint: {
                            "fill-color": "#d9d9d9",
                        },
                    },
                    {
                        id: "roads",
                        source: "selfhosted",
                        "source-layer": "roads",
                        type: "line",
                        paint: {
                            "line-color": "#fc8d62",
                        },
                    },
                    {
                        id: "pois",
                        source: "selfhosted",
                        "source-layer": "pois",
                        type: "circle",
                        paint: {
                            "circle-color": "#ffffb3",
                        },
                    },
                ],
            },
            container: document.getElementsByClassName('Map')[0],
            center: [this.data.lng, this.data.lat], // starting position [lng, lat]
            zoom: this.data.zoom, // starting zoom
        };

        console.log(mapOpts);

        let map = new maplibregl.Map(mapOpts);

        map.showTileBoundaries = true;
}