---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polygon.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/polygon.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Polygon
Open in CodeSandbox
A polygon is a closed shape consisting of a set of sequentially connected vertices. A polygon can have internal contours.
A polygon can be created in two ways: using the GeoObject class
with the "Polygon" geometry type,
or using the Polygon auxiliary class.
When creating a polygon, you must specify the coordinates of its vertices. You can also set the properties (for example the contents of a balloon or hint) and options (such as fill color or contour style) of the polygon.
A visual editor is available for polygons. A link to the editor is in the editor field of the polygon object.
Polygons, like other geo objects, can be combined in collections.
{% list tabs %}
- index.html
```html
Examples. Polygon
```
- polygon.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [55.73, 37.75],
zoom: 10,
},
{
searchControlProvider: "yandex#search",
}
);
// Creating a polygon using the GeoObject class.
var myGeoObject = new ymaps.GeoObject(
{
// Describing the geometry of the geo object.
geometry: {
// The "Polygon" geometry type.
type: "Polygon",
// Specifying the coordinates of the vertices of the polygon.
coordinates: [
// The coordinates of the vertices of the external contour.
[
[55.75, 37.8],
[55.8, 37.9],
[55.75, 38.0],
[55.7, 38.0],
[55.7, 37.8],
],
// The coordinates of the vertices of the inner contour.
[
[55.75, 37.82],
[55.75, 37.98],
[55.65, 37.9],
],
],
// Setting the fill rule for internal contours using the "nonZero" algorithm.
fillRule: "nonZero",
},
// Defining properties of the geo object.
properties: {
// The contents of the balloon.
balloonContent: "Polygon",
},
},
{
/**
* Describing the geo object options.
* Fill color.
*/
fillColor: "#00FF00",
// Stroke color.
strokeColor: "#0000FF",
// The overall transparency (for both fill and stroke).
opacity: 0.5,
// The stroke width.
strokeWidth: 5,
// The stroke style.
strokeStyle: "shortdash",
}
);
// Adding the polygon to the map.
myMap.geoObjects.add(myGeoObject);
// Creating a polygon using the Polygon auxiliary class.
var myPolygon = new ymaps.Polygon(
[
/**
* Specifying the coordinates of the vertices of the polygon.
* The coordinates of the vertices of the external contour.
*/
[
[55.75, 37.5],
[55.8, 37.6],
[55.75, 37.7],
[55.7, 37.7],
[55.7, 37.5],
],
// The coordinates of the vertices of the inner contour.
[
[55.75, 37.52],
[55.75, 37.68],
[55.65, 37.6],
],
],
{
/**
* Describing the properties of the geo object.
* The contents of the balloon.
*/
hintContent: "Polygon",
},
{
/**
* Setting geo object options.
* Fill color.
*/
fillColor: "#00FF0088",
// The stroke width.
strokeWidth: 5,
}
);
// Adding the polygon to the map.
myMap.geoObjects.add(myPolygon);
}
```
{% endlist %}