Polygon Layer
You can add areas/shapes formed from coordinates to maps using PolygonLayer
and Polygon
s.

Polygon
s including labels, holes, mixed colors & opacities, and dotted bordersPolygonLayer(
polygons: [
Polygon(
points: [LatLng(30, 40), LatLng(20, 50), LatLng(25, 45)],
color: Colors.blue,
),
],
),
Interactivity
PolygonLayer
s and Polygons
s support hit detection and interactivity.
Multi-Worlds
The PolygonLayer
paints its Polygon
s across all visible worlds by default. This can be changed.
Performance Optimizations
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.
Painter Fill Method
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.
The PolygonPainterFillMethod.pathCombine
option uses lesser-used Flutter APIs: the Path.combine
constructor. This allows for more intricate PathOperation
s, such as difference
and union
.
This gives the correct/intended/best visual results on native platforms. It's the default on native (non-web) platforms.
However, on the web, it causes major visual glitches due to a Flutter issue.
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).
Inverted Filling
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.
This is due to multiple limitations/bugs within Flutter. See https://github.com/flutter/flutter/issues/124675 and https://github.com/flutter/flutter/issues/149743 for the problematic bug reports.
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.


Polygon Manipulation
'flutter_map' doesn't provide any public methods to manipulate polygons, as these would be deemed out of scope.
However, some useful methods can be found in libraries such as 'latlong2' and 'poly_bool_dart'. 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).
Last updated
Was this helpful?