How to handle overlapping Polygon borders?

[MobileDev500]

So we have an application where user can select Polygon by clicking on it, and when that happens, all the Polygons will be redrawn on the map but the selected Polygon has different borderStrokeColor. The problem is, when we have multiple Polygons bordering each other, the borders seem to be overlapping on the map, resulting in inconsistent behavior (only some of the borders have desired color, because others are overlapping, see screenshot). What I have tried already:

1. Adding the selected Polygon last to the list of Polygons, so it would be rendered last and therefore on top. Doesn't work, unfortunately.

2. Mathematically "moving" the coordinates of overlapping Polygons. Seems to be very complex.

It seems that Google Maps Flutter package has "Z-index" for this which can be used to specify Polygon that will always be displayed on top, but there isn't similar in this package as far as I know? Any advise would be very appreciated.

[ibrierley]

Something feels wrong if option 1 isn't working, sounds like it's maybe not redrawing it or something.

Potentially I would go with a 3rd option. Create a duplicate separate poly from the selected one and always display that on top.

[MobileDev500]

How would I implement the third option? I mean, there is no Z-index so how can you specify which Polygon will always be on top?

[ibrierley]

Duplicate it, create a separate polygon layer and just have it added in there as the last flutter_map layer.

[MobileDev500]

This is genius, I didn't know you can add multiple layers of same type. I just tested and it works! Thank you!

[ibrierley]

(being the last poly should still do this anyway, but obviously something is amiss either with fm or your code, and bit fiddly to debug that here, so the 3rd option may get around that if nothing else to test).