Skip to content

4 Symbols, Labels and the Bleeding Problem

Oliver Heilig edited this page Jun 20, 2024 · 7 revisions

Next, we render the value of the latitude and longitude as text at the center of the corresponding line.

The result is an image like https://spatialtutorial.azurewebsites.net/04-TilesAndLabelsHandler.ashx?x=67&y=43&z=7

Grid With Symbols

But this raises a problem when rendering objects where the extension of the rendered object exceeds the geometry. Objects which "bleed" into a neighbouring tile must also be rendered for the neighbouring tile. This occurs typically for symbols or labels. It can also be an issue for line strokes with a size > 1 pixel.

To solve this issue, we can increase our query window, to guarantee that also these objects are rendered, that are located outside our tile, but visually "bleed" into the tile. I've added a new optional parameter bleedingPixels at the TileToWgs method.

public static Rect TileToWgs(uint x, uint y, uint z, int bleedingPixels = 0)

A symbol with size s can bleed s/2 pixel into a neighbouring tile

// the size of our symbol in pixel
int symbolSize = 16; 

// calculate geo rect, taking the bleeding into account
var rect = TransformTools.TileToWgs(x, y, z, symbolSize / 2);

Now the symbols are rendered correctly for critical tiles, like

https://spatialtutorial.azurewebsites.net/04-TilesAndLabelsHandler.ashx?x=69&y=44&z=7

Symbols bleeding into tile

and we get a jitter-free overlay layer.

https://spatialtutorial.azurewebsites.net/04-TilesAndLabels.html