Sharp SDF (Signed Distance Fields)

[jbooth-geoplan]

Is it possible to have high quality map icons, whilst also supporting re-colouring?

I have attempted to do this by loading a PNG image that supports SDF (i.e. a single colour PNG file). If I load this icon without SDF I can get sharp icons on the map, which I cannot recolour. By marking the images as SDF, I can then recolour, but I significantly loose sharpness on the icons. Ideally, I would like to take advantage of being able to re-colour the icons in system so that I can apply multiple colours to a single map layer, without having to load individual icons for each colour.

Is there a way around this so that I can have the best of both? I have tried increasing the size of the original icons (i.e. more pixels) to improve the image quality, but the degradation when applying SDF still makes it worse than a smaller icon without SDF enabled. It could be as simple as I am not creating the original icons correctly, but my icons are fairly basic (e.g. a black circle, square, star or shield).

Any help much appreciated. Thanks,

Jon.

[HarelM]

sdf icons is the best approach to recolor icon, you can increase the size of the sdf icon to get better results.
You can also use styleimagemissing event to generate an icon on the fly.

[jbooth-geoplan]

Thanks for the prompt reply! It's good that it is best way to go, but how close should I be able to expect to get the sharpness of my icons? In the attached example, Example 1 shows a PNG rendered at 16x16 without SDF. Example 2 shows a 128x128 version of the PNG with SDF, which in order to achieve a similar size on the map, has been reduced to an icon size of 0.15. There is a clear difference in quality between the two, despite the 8x uplift. Is there a better way to manage the increase in size than icon-size, or is there always going to be a drop-off in sharpness?

[wipfli]

Loss of sharpness is inherent to the signed-distance field technique. You can read more about this here: https://github.com/Chlumsky/msdfgen

[HarelM]

Try the style image missing event then.