# Polygon Layer

You can add polygons to maps to display shapes made out of points to users using `PolygonLayer()`.

```dart
FlutterMap(
    options: MapOptions(),
    children: [
        PolygonLayer(
            polygonCulling: false,
            polygons: [
                Polygon(
                  points: [LatLng(30, 40), LatLng(20, 50), LatLng(25, 45),],
                  color: Colors.blue,
                ),
            ],
        ),
    ],
),
```

{% hint style="warning" %}
Due to the nature of the Earth being a sphere, drawing lines perfectly requires large amounts of difficult maths that may not behave correctly when given certain edge-cases.

Avoid creating large polygons, or polygons that cross the edges of the map, as this may create undesired results.
{% endhint %}

{% hint style="warning" %}
Excessive use of polygons or use of complex polygons will create performance issues and lag/'jank' as the user interacts with the map. See [Broken link](https://docs.fleaflet.dev/v3/usage/layers/broken-reference "mention") for more information.

To improve performance, try enabling `polygonCulling`. This will prevent the calculation and rendering of polygons outside of the current viewport, however this may not work as expected in all situations.
{% endhint %}

## Polygons (`polygons`)

As you can see `PolygonLayerOptions()` accepts list of `Polygon`s. Each determines the shape of a polygon by defining the `LatLng` of each corner. 'flutter\_map' will then draw a line between each coordinate, and fill it.

<table><thead><tr><th width="241">Property</th><th width="249">Type</th><th width="247">Defaults</th><th>Description</th></tr></thead><tbody><tr><td><code>points</code></td><td><code>List&#x3C;LatLng></code></td><td>required</td><td>The coordinates of each vertex</td></tr><tr><td><code>holePointsList</code></td><td><code>List&#x3C;List&#x3C;LatLng>>?</code></td><td></td><td>The coordinates of each vertex to 'cut-out' from the shape</td></tr><tr><td><code>color</code></td><td><code>Color</code></td><td><code>Color(0xFF00FF00)</code></td><td>Fill color</td></tr><tr><td><code>borderStrokeWidth</code></td><td><code>double</code></td><td><code>0.0</code></td><td>Width of the border</td></tr><tr><td><code>borderColor</code></td><td><code>Color</code></td><td><code>Color(0xFFFFFF00)</code></td><td>Color of the border</td></tr><tr><td><code>disableHolesBorder</code></td><td><code>bool</code></td><td><code>false</code></td><td>Whether to apply the border at the edge of 'cut-outs'</td></tr><tr><td><code>isDotted</code></td><td><code>bool</code></td><td><code>false</code></td><td>Whether to make the border dotted/dashed instead of solid</td></tr><tr><td><code>label</code></td><td><code>String?</code></td><td></td><td>Text to display as label in center of polygon</td></tr><tr><td><code>labelStyle</code></td><td><code>TextStyle</code></td><td><code>TextStyle()</code></td><td>Custom styling to apply to the label</td></tr><tr><td><code>labelPlacement</code></td><td><code>PolygonLabelPlacement</code></td><td><code>PolygonLabelPlacement.polylabel</code></td><td>Where to place the label in the polygon</td></tr></tbody></table>

### More Polygon Operations

'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'](https://github.com/mohammedX6/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).