[BUG] Overlapping `Polygon`s with same colors cause cutting

[Mike Sheldon]

What is the bug?

If you have a polygon with one or more holes and another polygon of the same colour is placed inside it, then the second polygon will get rendered as a hole instead of as a filled polygon.

If the polygons have labels, then they are rendered correctly when the labels are rendered. But rendered incorrectly when the labels are not displayed (e.g. when zoomed out)

If the useAltRendering property is set then the polygons will be rendered correctly.

Expected output:

Actual output:

How can we reproduce it?

The following code can be used to reproduce the issue:

          FlutterMap(
            options: const MapOptions(
              initialCenter: LatLng(61.858, 0.943),
              initialZoom: 13,
            ),
            children: [
              PolygonLayer(
                polygons: [
                  Polygon(
                      points: const [
                        LatLng(61.861042, 0.946502),
                        LatLng(61.861458, 0.949468),
                        LatLng(61.861427, 0.949626),
                        LatLng(61.859015, 0.951513),
                        LatLng(61.858129, 0.952652)
                      ],
                      holePointsList: [],
                      color: Colors.lightGreen.withOpacity(0.5),
                      borderColor: Colors.lightGreen,
                      borderStrokeWidth: 1),
                  Polygon(
                      points: const [
                        LatLng(61.861042, 0.946502),
                        LatLng(61.861458, 0.949468),
                        LatLng(61.861427, 0.949626),
                        LatLng(61.859015, 0.951513),
                        LatLng(61.858129, 0.952652),
                        LatLng(61.857633, 0.953214),
                        LatLng(61.855842, 0.954683),
                        LatLng(61.855769, 0.954692),
                        LatLng(61.855679, 0.954565),
                        LatLng(61.855417, 0.953926),
                        LatLng(61.855268, 0.953431),
                        LatLng(61.855173, 0.952443),
                        LatLng(61.855161, 0.951147),
                        LatLng(61.855222, 0.950822),
                        LatLng(61.855928, 0.948422),
                        LatLng(61.856365, 0.946638),
                        LatLng(61.856456, 0.946586),
                        LatLng(61.856787, 0.946656),
                        LatLng(61.857578, 0.946675),
                        LatLng(61.859338, 0.946453),
                        LatLng(61.861042, 0.946502)
                      ],
                      holePointsList: const [
                        [
                          LatLng(61.858881, 0.947234),
                          LatLng(61.858728, 0.947126),
                          LatLng(61.858562, 0.947132),
                          LatLng(61.858458, 0.947192),
                          LatLng(61.85844, 0.947716),
                          LatLng(61.858488, 0.947819),
                          LatLng(61.858766, 0.947818),
                          LatLng(61.858893, 0.947779),
                          LatLng(61.858975, 0.947542),
                          LatLng(61.858881, 0.947234)
                        ]
                      ],
                      color: Colors.lightGreen.withOpacity(0.5),
                      borderColor: Colors.lightGreen,
                      borderStrokeWidth: 1),
                ],
              ),
            ],
          ),

Do you have a potential solution?

I don't have a fix unfortunately, but it can be temporarily worked around using the alternative renderer, or by ensuring that polygons do not have the same colour (a slightly different opacity setting is enough)

Platforms

Android 14, Windows 11, iOS 17

Severity

Obtrusive: Prevents normal functioning but causes no errors in the console

[Luka S]

This sounds potentially like the batching mechanism is not working correctly, as the behaviour with the labels possibly shows (labels disables batching somewhat). Or, the batching is working correctly, but we've got an issue with the BlendMode or something similar. We'll investigate!

[Luka S]

This is fixed by #1901. Note that using translucency could now be relatively expensive, as documented in the PR code. This is because the canvas must be drawn to (and our internal batching process flushed) every time a translucent polygon is encountered in the painting loop, in order to properly mix these potentially overlapping colors. Previously (with the fix for cutting applied), it would've just shown as one half transparent tone consistently, now it mixes properly.

[Mike Sheldon]

Brilliant, thanks for all your hard work!