Some labels appear cutoff in raster tiles

[dwoznicki]

I'm having an issue where some of the labels in raster tiles appear cutoff.

When I look at the actual image being generated, I can see that the labels are clearly being cutoff at the image boundaries.

This looks very much like this issue in MapLibre GL Native that @acalcutt raised. Reading through that thread, I got the impression that the issue should be fixed on master now, but I'm not totally sure if that's the case.

For reference, here's my npm package versions.

danwoz@flan tegola  master [!?] 
13:43:28 ❯ npm ls -g --depth 1
/home/danwoz/.nvm/versions/node/v16.15.0/lib
├─┬ @acalcutt/tileserver-gl@4.0.22
│ ├── @acalcutt/maplibre-gl-native@5.0.25
│ ├── @mapbox/glyph-pbf-composite@0.0.3
│ ├── @mapbox/mbtiles@0.12.1
│ ├── @mapbox/sphericalmercator@1.2.0
│ ├── @mapbox/vector-tile@1.3.1
│ ├── @maplibre/maplibre-gl-style-spec@17.0.1
│ ├── advanced-pool@0.3.3
│ ├── canvas@2.9.3
│ ├── chokidar@3.5.3
│ ├── clone@2.1.2
│ ├── color@4.2.3
│ ├── commander@9.4.0
│ ├── cors@2.8.5
│ ├── express@4.18.1
│ ├── handlebars@4.7.7
│ ├── http-shutdown@1.2.2
│ ├── morgan@1.10.0
│ ├── pbf@3.2.1
│ ├── proj4@2.8.0
│ ├── request@2.88.2
│ ├── sharp@0.30.7
│ └── tileserver-gl-styles@2.0.0

[acalcutt]

This should be fixed in v4.0.21+ . If you go to the main page it should say the version at the bottom. You on at least that version?

The fix for label clipping I added maplibre/maplibre-native#415 should be in
@acalcutt/maplibre-gl-native 5.0.25+
@acalcutt/tileserver-gl v4.0.21+

[acalcutt]

Also, if you aren't using the docker, don't forget to run an npm -i to update you packages...I've forgotten that a few times and was confused.

[dwoznicki]

It looks like my versions are properly updated (as far as I can tell).

Also, when I run npm ls --depth 1, it reports that I have @acalcutt/tileserver-gl@4.0.22 and @acalcutt/maplibre-gl-native@5.0.25.

[dwoznicki]

I'm on NodeJS v16.17.0, so it looks like my process.versions.modules is "93", btw.

EDIT: Just tried with NodeJS v14.20.0, process.versions.modules "83", and tiles still appear to be cutoff. I'm wondering if my mbgl.node binary isn't up to date.

[acalcutt]

node v16.14.2 is what I am using here.

I tried to see if I can replicate it but in my style I don't see most of those clipped labels. Can you share your style?

[dwoznicki]

Yeah, you can find my configuration here: https://github.com/dwoznicki/temp-clipped-tiles-debugging-style

Let me know if you run into any issues getting this to run. I haven't tried running tileserver-gl on a different machine yet.

EDIT: Nevermind the logging question. I just realized that the code I thought was being executed was not being executed. 😶‍🌫️

It looks like the mode is indeed set to "tile".

[dwoznicki]

It's probably worth noting that my setup is a bit unusual. I'm using Tegola as my vector tile server with TileServer GL as my rasterizer. So it's possible that if the vector tile needs to be prepared in a special way (e.g. provide extra details about nearby tiles?), my tile server is not doing so.

[acalcutt]

Did you install this as a node package in global mode? using 'npm install -g @acalcutt/tileserver-gl'. i was having issues getting that to work the other day so really just curious.

Did you make sure to clear your browser cache, possibly an old tile could be cached (I saw that when i first migrated)

I tried to see if I could use your style with my openmaptiles source but it seems to be a lot different of a format, and i wasn't able to use your source.

In raster mode all the rendering takes place in maplibre-gl-native, so It shouldn't matter if your vector source is different i wouldn't think.

[dwoznicki]

Also, not all tiles appear to be cut off. All the labels in the two tiles below are properly joined.

[acalcutt]

If you look at massachusetts, do you see trimming in North Adams like maplibre/maplibre-native#284 , that was right on a tile line

I suppose maybe your vector tile source could be trimming before in gets to tileserver-gl. That vector tile source feeds into Tileserver?

[acalcutt]

And I guess one more question for testing would be, does it work in https://github.com/maptiler/tileserver-gl using mapbox-native?

[dwoznicki]

Did you install this as a node package in global mode? using 'npm install -g @acalcutt/tileserver-gl'. i was having issues getting that to work the other day so really just curious.

I just today changed @acalcutt/tileserver-gl to be project local, but I did have it installed globally for a couple months without any issue. That said, it was only kinda global, since I'm using nvm as my NodeJS version manager, and nvm maintains separate NodeJS binaries for each user.

Did you make sure to clear your browser cache, possibly an old tile could be cached (I saw that when i first migrated)

I've tried hard refreshing (CTRL + SHIFT + r) and keeping the "Disable cache" option in Chrome checked while reloading. No luck with either.

I tried to see if I could use your style with my openmaptiles source but it seems to be a lot different of a format, and i wasn't able to use your source.

Yeah, I ended up creating a custom data format for my vector tiles, so I don't expect it to work with other tile sources.

If you look at massachusetts, do you see trimming in North Adams like maplibre/maplibre-native#284 , that was right on a tile line

It's a little tough to say because my styling is so different. I guess the answer is that I see some clipping, but not the same clipping.

EDIT: Though upon closer inspection, I actually think "North Adams" specifically is clipped in almost the exact same way in my example as it is in your example.

And I guess one more question for testing would be, does it work in https://github.com/maptiler/tileserver-gl using mapbox-native?

That's a really good idea. I'll check and get back to you (probably tomorrow).

[acalcutt]

I did some search on tegola label clipping and ran into this thread. somewhat similar

go-spatial/tegola#562

[acalcutt]

Using some HAProxy magic I was able to get around the cross site blocking issue I was having testing your style.

I definitely confirm clipping all over the place when using that source
https://tiles.wifidb.net/styles/ntk/?raster#8/37.784/-121.124

[acalcutt]

Same thing in Maptiler TileServer-GL 3.1.1

[dwoznicki]

Same thing in Maptiler TileServer-GL 3.1.1

Mmm, yeah sure enough. I also tried adding the dont_clip attribute to my label layers from the Tegola issue you found, but that didn't do the trick, sadly. I suppose I'm not surprised though, since really what my tile server is sending is a single point with the label as an attribute, and I don't imagine the point is being clipped.

Actually, do you know how mbgl::MapMode::Tile works? It looks like the labels are (sometimes) not being rendered on tiles which don't contain the label point, which makes sense if each tile is rendered in isolation, but I imagine that can't be the case for tile mode because MapLibre is somehow figuring out that labels sometimes spill into adjacent tiles.

[dwoznicki]

Okay, found out something else interesting.

It looks like the places in the map with properly joined labels across multiple tiles are working because the PNG images are being rasterized from the same underlying PBF file. Using my example from above, tile 8/40/98.png

and 8/41/98.png

have properly joined labels for "San Francisco" and "Berkeley".

When I modified my Tegola server to log which files were being requested, I noticed that the same PBF file was being requested for both.

2022-09-14 15:19:58 [DEBUG] middleware_tile_cache.go:81: cached tile /maps/osm/7/20/49.pbf
2022-09-14 15:20:02 [DEBUG] middleware_tile_cache.go:81: cached tile /maps/osm/7/20/49.pbf

However, when I check tiles where the label is cut off, such as 8/41/98.png

and 8/42/98.png

(result on the map)

I noticed that two different PBF files were being requested from my server.

2022-09-14 15:23:01 [DEBUG] middleware_tile_cache.go:81: cached tile /maps/osm/7/21/49.pbf
2022-09-14 15:23:41 [DEBUG] middleware_tile_cache.go:81: cached tile /maps/osm/7/20/49.pbf

I wonder if I need to somehow get TileServer GL/MapLibre GL Native to load adjacent PBF tiles.

[dwoznicki]

So I just found a much easier way to confirm my suspicion. In file maplibre-gl-native/platform/node/src/node_map.cpp, if I change line

mbgl::MapDebugOptions debugOptions = mbgl::MapDebugOptions::NoDebug;

to

mbgl::MapDebugOptions debugOptions = mbgl::MapDebugOptions::TileBorders;

and recompile + restart TileServer GL with the updated mbgl.node binary, I see that the labels are cut off exactly at the tile boundaries.

I believe this is what you were checking with maplibre/maplibre-native#284 (comment), but I just want to double check that if you turn on mbgl::MapDebugOptions::TileBorders; for your map style, the labels are rendered correctly across tile boundaries.

[dwoznicki]

@acalcutt I got it! I needed to add symbol-avoid-edges to my style.json to void rendering labels that are too close to the edge of a tile.

Do you have something similar in your style by chance?

[acalcutt]

This is my style https://github.com/acalcutt/wifidb-tileserver-gl/blob/master/tileserver-gl/styles/WDB_OSM/style.json . doesn't looks like I have 'symbol-avoid-edges'

Also, i know this is closed, but just for informational purposes, My understanding of Tile Mode is that if you request something like a 512x512 image, it actually renders a little bit over that, adding a padding of 1024 to each side. This bit of overdraw allows it to know about labels that might have started in the next tile.

[dwoznicki]

doesn't looks like I have 'symbol-avoid-edges'

Interesting. So if you turn on mbgl::MapDebugOptions::TileBorders, do your labels render properly across red lines?