Polygon Layer
Last updated
Was this helpful?
Last updated
Was this helpful?
You can add areas/shapes to maps by making them out of individual coordinates using PolygonLayer
and Polygon
s.
PolygonLayer
s and Polygons
s support hit detection and interactivity.
The PolygonLayer
paints its Polygon
s across all visible worlds by default. This can be changed.
flutter_map includes many performance optimizations built in, especially as of v7. Some are enabled by default, but may be only 'weakly' applied, and others must be enabled manually. There are also some other actions that can be taken externally to improve performance
The following list is ordered from least 'intrusive'/extreme, to most intrusive. Remember to consider the potential risks of enabling an optimization before doing so.
The example application includes a stress test which loads multiple Polygon
s from an optimized format, with a total of 138,000 points.
The default renderer supports two painter fill methods using different Flutter APIs. These fill methods change the way Flutter decides what is considered within a polygon (and should be filled), and what is outside. This can change the way particularly intersections and overlaps appear visually.
This can be set using the painterFillMethod
property and the PolygonPainterFillMethod
enum.
Many apps will not need to change from the default method. Before changing the method, profile and test for visual glitches thouroughly.
This gives the correct/intended/best visual results on native platforms. It's the default on native (non-web) platforms.
Additionally, it has slightly worse performance (especially at scale) than Even/Odd. The hit to performance is unlikely to be significant or even noticeable in many applications, but applications drawing many polygons may see a slow of about 2ms (as tested in the example app's stress test).
On the web, inverted filling may not work as expected in some cases. It will not match the behaviour seen on native platforms.
Avoid allowing polygons to intersect, and avoid using holes within polygons. See the second image below for a demonstration of the issues.
Inverted filling (invertedFill
) allows a color to be applied to all parts of the map outside a polygon. Transparently filled polygons will reveal the layers beneath without the inverted fill color.
'flutter_map' doesn't provide any public methods to manipulate polygons, as these would be deemed out of scope.
To improve performance, polygon outlines (points
) are 'simplified' before the polygons are culled and painted/rendered. The well-known is used to perform this, and is enabled by default.
Cut each Polygon
into multiple triangles through a process known as . flutter_map uses an earcutting algorithm through (a port of an algorithm initially developed at Mapbox intended for super-large scale triangulation).
Draw each triangle onto the canvas via the lower-level, faster method. Borders are then drawn as normal.
The PolygonPainterFillMethod.pathCombine
option uses lesser-used Flutter APIs: the constructor. This allows for more intricate s, such as difference
and union
.
However, on the web, it causes major visual glitches due to a .
The PolygonPainterFillMethod.evenOdd
option uses more simple Flutter APIs: the .evenOdd
.
This is due to multiple limitations/bugs within Flutter. See and for the problematic bug reports.
However, some useful methods can be found in libraries such as 'latlong2' and . These can be applied to the input of Polygon
's points
argument, and the map will do it's best to try to render them. However, more complex polygons - such as those with holes - may be painted inaccurately, and may therefore require manual adjustment (of holePointsList
, for example).
Polygon
.evenOdd
setting