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/[email protected]/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?

[MightyPork]

Good idea, thanks for the tip.

the issue does not happen with the example file on the protomaps github - https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles

I exactly followed their online guide. So either the pmtiles tool or the builds at https://maps.protomaps.com/builds/ are currently broken... or not compatible with the javascript library 🤔

[adjourn]

This looks like a styling issue, not data. I think I've had the similar issue before, can't remember specifics.

Likely you're using some kind of Maplibre layer type (e.g fill) with source data type (e.g MultiLineString) that produces the unexpected outcome. My guess based on the "glitch" is that you're styling water (or water name) linestrings with fill.

[acalcutt]

somewhat similar to what we saw in maplibre/maplibre-native#1843 , were tilemaker was adding a line around the tiles, causing a weird fill issue in native. In that PR I ended up using vt2geojson to try and pull out some specific tiles having issues, which allowed me to see the issue easier.

Edit: Though in this case, I guess it was bad data

[MightyPork]

The issue was solved by updating the styles, pmtiles was migrating the planet files hosted on their server to a new format and the style shown in examples was outdated. This new format added SVG paths to rivers, which previously only used closed polygons