[💰] Add option for `PolygonLayer` to have fill color around `Polygon`s

[JaffaKetchup]

What is the bug?

When attempting to display a Polygon that is large, it fails to display incorrectly with the new support for unbounded horizontal scrolling. When the polygon has a hole defined, the hole may be shown inverted in some cases, or not at all (culled incorrectly?) in others.

The issue lies in the new projectList method in the CRS.

flutter_map/lib/src/geo/crs.dart

Lines 420 to 443 in e9272e2

	List<Offset> projectList(List<LatLng> points, {LatLng? referencePoint}) {
	late double previousX;
	final worldWidth = getWorldWidth();
	return List<Offset>.generate(
	points.length,
	(j) {
	if (j == 0 && referencePoint != null) {
	(previousX, _) = projectXY(referencePoint);
	}
	var (x, y) = projectXY(points[j]);
	if (j > 0 || referencePoint != null) {
	if (x - previousX > worldWidth / 2) {
	x -= worldWidth;
	} else if (x - previousX < -worldWidth / 2) {
	x += worldWidth;
	}
	}
	previousX = x;
	return Offset(x, y);
	},
	growable: false,
	);
	}
	}

(Originally reported in the Discord server: https://discord.com/channels/951867686378409984/1339879842610675794)

How can we reproduce it?

Use a polygon with a defined set of points creating a large area that spans nearly to the edge of the world, with a fill color.

If the Polygon's points are as such, then no polygon appears at all.

points: const [
  LatLng(-90, -180),
  LatLng(90, -180),
  LatLng(90, 180),
  LatLng(-90, 180),
],

If the points are as such, then the issue can be more clearly seen. The fill is applied to the areas between the worlds, outside of the polygon itself.

points: const [
  LatLng(-90, -180),
  LatLng(90, -180),
  LatLng(90, 180),
  LatLng(-90, 180),
],

On adding a hole, for example as so, then it may be shown correctly in some cases, or completely removed in others.

holePointsList: [
  [
    LatLng(51.5, -0.09),
    LatLng(51.5, -1.09),
    LatLng(52.5, -1.09),
    LatLng(52.5, -0.09),
  ]
],

Do you have a potential solution?

No response

---

Bounty

This issue is eligible for a bounty!

This continues from #1582, and also includes a whole load of other work done since then to improve unbounded horizontal scrolling support.

Bounty Criteria

To be eligible to receive the bounty (as outlined in the meta information below), the solution must:

• implement a parameter on the PolygonLayer to fill the space outside of any polygon with any color
• provide the expected result (to be discussed in further detail during implementation) in a wide variety of cases, tested on the example application

The bounty is also awarded via this bounty for a number of other issue resolutions related to unbounded horizontal scrolling support.

Due to circumstances outside of the control of any contributor (bugs within Flutter), the solution does not need to work fully on the web platform.

The decision to award the bounty is entirely at the discretion of the maintainer team.

[JaffaKetchup]

@monsieurtanuki Will you be able to take a look at this?

[monsieurtanuki]

To me it looks normal, as -180 and 180 are the same longitude.

In the "new" polygons, we build the list of pixels as "as close as possible". That's how Tokyo and Los Angeles are not almost a world apart, but just an ocean apart.
That said, how can we make users let us understand that they want to force "-180 < 180" longitudes?

I'm not sure I see the use case of -90 and 90 latitudes, and whole world polygons, except if you want to hide the whole world EXCEPT some holes. If that's the only use case, we may code that specific case differently.

For the record if longitudes are -180, -10, 10, 180, you'll see a whole world polygon. Probably replicated.

[monsieurtanuki]

Typical "That's not a bug, that's a feature" ;)

[JaffaKetchup]

Ah, of course 😂. Now that we support multi worlds that's just the same way to define a polygon across the anti-meridian - should have seen that myself.

However, you are right that this was originally needed to cover the whole world, except for some holes. We need to provide some way to get this behaviour. I guess some sort of property that forces the polygon not to cross the anti-meridian?

[monsieurtanuki]

I'd rather say something like a flag considering only the holes, with the whole canvas as the initial polygon. We don't want to cover replicated worlds, but the whole canvas (and once).

[JaffaKetchup]

Ok, but then how would you define a polygon that doesn't cover the whole canvas, just most of each world (as in the 2nd reproduction coordinates? ie. You don't want the shortest path. I guess the same question also applies to Polylines?

[monsieurtanuki]

We probably need extra flags.

I think of another specific case: if I want to draw a voyage around the world, I probably don't want it to be replicated in different worlds.

[monsieurtanuki]

Working on the "let's consider only holes, with the full map as the initial polygon" feature

[enricostrijks]

Your a hero @monsieurtanuki looking forward to the feature!

[monsieurtanuki]

Thank you @enricostrijks!
Btw the same could be done for a circle: the whole world partially opaque, and a transparent circle for a specific area.

[enricostrijks]

Yeah I am looking specifically for the polygon option since our app has that functionaility since flutter_map v5/6(?) so I need to bring that back :) but thanks for letting me know!

[monsieurtanuki]

Oh you can somehow already do that, if you start with a broad rectangle as the main polygon, and the interesting areas as holes.
There would be side-effects though, depending on the size of the areas, as users may pan the map beyond the broad rectangle.