# 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 mention](broken://pages/8uYmNyVwhN9XeXr5DcWy) 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fleaflet.dev/v3/usage/layers/polygon-layer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.