Incorrect rendering of rivers (with pmtiles)

[MightyPork]

I followed the steps on the protomaps website, got my map with pmtiles extract.

The map file looks fine when viewed in an online tool. However, on my page, water rendering is completely bugged out. I removed all external styles and JS to isolate the problem.

maplibre-gl-js version:

<script src="[https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.js](https://unpkg.com/maplibre-gl@%5E4.7.1/dist/maplibre-gl.js)"></script>
<link href="[https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.css](https://unpkg.com/maplibre-gl@%5E4.7.1/dist/maplibre-gl.css)" rel="stylesheet" />
<script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>

browser:

tested in chrome, vivaldi, firefox

Steps to Trigger Behavior

see the demo. The most basic usage.

Link to Demonstration

Here is a live demo:

https://bits.ondrovo.com/osm/

Expected Behavior

water rendering normally

Actual Behavior

Looks as if the SVG paths were closed and filled randomly.

Rivers are increasingly broken the more you zoom in.

Buildings and roads render fine.

zoomed out, rivers look more correct

[MightyPork]

maybe I should instead report this in the pmtiles plugin github?

[HarelM]

I'm not aware of these kind of issues in maplibre. Without a minimal reproduction there's not much I can do. Most likely, the problem is related to how you created the pmtiles... Did you try out pmtiles from protomaps examples first to see that you get good results?