z-index issues

[DerDakon]

There are at least 2 z-index issues, which probably need a combined solution, so I report them in one issue:

• together with allow-overlap z-index is actually reversed as the objects are drawn in decreasing z-index order, and if allow-overlap is set the later object is drawn above the previous one (which has a higher z-index). This cannot be fixed using "globalCompositeOperation='source-over'" as this would draw the new object below everything on the canvas, i.e. also those objects with lower z-index (e.g. geometry). An example of the error can be seen on OpenRailwayMap, the z-index of the white signs corresponds to the number shown on it.
• the code to render text and icons does one pass through one text/icon combination before rendering the next (see kothic.js), which means a bare icon with low z-index would be drawn first, and a bare text with high z-index would not be drawn at all if it collides with this icon.

[braandl]

styledFeatures.sort(function (a, b) { return a.zIndex < b.zIndex ? -1 : a.zIndex > b.zIndex ? 1 : 0; });

does fix the z-index problems. I don't understand why it was comparing the fill-color and color keys?

[DerDakon]

This could have been written even simpler as return a.zIndex - b.zIndex. But this does not solve the problem, as the sorting already works. It's the algorithm in which order things are drawn and how it interacts with "allow-overlap: true".