add icon halos (to refreshed SVG icons)

[nebulon42]

Adds white 1px wide halos with 30% opacity to refreshed SVG icons.
This technique is similar to how Maki icons handle this.
Partly fixes #1189.

This improves the situation on noisy background especially for icons with larger inner holes such as ATM:

before

after

Some general overview (click for full size):
before

after

Since icons are now 2px larger than before this would need systematic text-dy checking.
@mkoniecz Could this be done with your tool and is it a lot of work?

[matkoniecz]

@nebulon42

Could this be done with your tool

Yes.

and is it a lot of work?

Cost of human work (setup) is negligible but it is significant and long work for computer. I will run it, but it may wait day or two for a feasible time (computer not used for anything for a significant part of day - as at least on my hardware it significantly degrades performance of other software).

[matthijsmelissen]

Since icons are now 2px larger than before this would need systematic text-dy checking.

Does it mean that all/most text need to be shifted down 1px? I think the distance between text and icons is already quite large, would be a shame if we'd have to enlarge it even further.

[nebulon42]

I will run it, but it may wait day or two for a feasible time

Great, thanks very much for checking this.

Does it mean that all/most text need to be shifted down 1px?

I don't know but I think not necessarily because the distance is already quite large as you said. But it has to be checked to be sure.

[pnorman]

Yes - adding a 1px buffer will require adding 1px to dy.

Are there any ways to do the halo within mapnik with comp-op or other techniques? I'd much rather not have to do them in all the SVGs.

[gravitystorm]

How does adding halos affect the svg recolouring? One advantage of the SVG icons for downstream users is being able to set marker-fill but would setting this change the colour of the halo too?

[nebulon42]

The halos consist of line strokes that are not affected by marker-fill. With marker-line-color and marker-line-width it is possible to change the colour and width of the halo as can be seen in this example:

Regarding comp-op I'm not sure. I have experimented with stacking icons some time ago and don't remember all the details, but as far as I remember the problems where:

• Mapnik currently seems to be unable to add line strokes with marker-line-width when they were not present before. That would mean that we would require two different files per icon at the moment.
• Stacking of icons seemed to involve the use of marker-allow-overlap: true which has the undesired side effect of also allowing overlap with other markers nearby.

But I might be wrong on both of them, so it might be good to experiment more with it.

[matkoniecz]

Yes - adding a 1px buffer will require adding 1px to dy.

Yes, this propose change would force increasing text-dy - that is anyway really big.

Also, I think that change in example is not improvement. Loss of labels is not really improving readability, and there is loss of information.

icons with larger inner holes such as ATM

The problem is with inner hole, not with nearby labels/icons.

[nebulon42]

First thanks for systematically testing this. Could you please quantify your statement a bit? Like "all text-dy have to be increased" or "30% of text-dy have to be increased". This does not have to be exact, but I'd love to see how many POIs would be affected.

I don't know what you mean with loss of information. I have always said that text-dy would have to be adjusted before this can be merged.

On the other hand, I really think that icons need halos. Text has halos, some even quite unnecessarily big. So why should icons don't have it? The example should not be seen as ideal or as really illustrative for this change. There are certain noisy backgrounds and combinations where halos will be helpful. See again my example in #325 (comment) with spring within forest where a halo would certainly improve visibility.

[HolgerJeromin]

is there an option in mapnik to prevent the collision of text and icon at all? I have no Problem with a high text overlapping the icon halo.

[matkoniecz]

I don't know what you mean with loss of information.

Reducing amount of displayed relevant labels means that some information is removed from displayed map.

Could you please quantify your statement a bit?

Now entire test has finished, with following results:

amenity=biergarten - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=cafe - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=cinema - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=embassy - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=fast_food - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=fire_station - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=food_court - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=fuel - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=hospital - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=police - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=pub - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=restaurant - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
amenity=theatre - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
historic=memorial - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
leisure=golf_course - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
leisure=miniature_golf - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22
tourism=museum - name is missing for name 'ÉÉÉÉÉÉ ÉÉÉÉÉÉ ÉÉÉÉÉÉ' on z22

[nebulon42]

Thanks very much, that means that this affects roughly 37% of the icons in this PR.

[matthijsmelissen]

To me, adding the halo is not a visual improvement. I don't like the halo for the labels either, but there we really need them for readability (although I succeeded in reducing the visual impact of the label halos). I think the icons are readable enough without halo.

I also think the text-dy is already too big, and really wouldn't like to increase it even more.

So in short, I would suggest not to add halos to the icons.

[pnorman]

I also don't think this is worth it.

[daganzdaanda]

Looking back at this - why would we even need more text-dy?
Is it possible that an icon's halo might render on top of the text? Or are the halos for text and icon on the same "layer" in the background?

In the latter case, we could make the halos for text and icon as large as we like, while keeping the current text-dy. But even in the first case, a 1px outline around an icon could only touch the outline of the text. That is not a problem at all, IMHO.

[gravitystorm]

Looking back at this - why would we even need more text-dy?

Adding a halo to an icon makes for a bigger icon. Bigger icon, bigger text-dy.

Is it possible that an icon's halo might render on top of the text?

No. The halo is part of the icon. It just makes the image larger.

Or are the halos for text and icon on the same "layer" in the background?

I'd encourage you to try experimenting with tilemill/kosmtik to get a better feeling for how it works. But in short, the icon is "one thing" and the text(+text-halo) is "one thing" and if they overlap, the text isn't shown.