JSFiddle - React, Tailwind, and code Playground

by kirrrusha

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="https://cdn.rawgit.com/yandex/mapsapi-area/651748be/build/util.calculateArea.min.js"></script>
<script src="https://github.com/yandex/mapsapi-polylabeler/releases/download/v1.0.0/polylabel.min.js"></script>
<div id="map">

</div>

CSS

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial;
}

#map {
  width: 100%;
  height: 100%;
}

JavaScript

ymaps.ready(['polylabel.create']).then(function () {
    const map = new ymaps.Map('map', {
        center: [65, 81],
        zoom: 5
    });
    const objectManager = new ymaps.ObjectManager();

    objectManager.add({
	type: 'Feature',
        id: 1,
        geometry: {
            type: 'Polygon',
            coordinates: [[
    	        [66 , 74],
                [68, 92],
                [59, 88],
                [62, 80],
                [66, 74]
            ]]
	},
        properties: {
  	    name: 'nameOfMyPolygon'
        },
        options: {
            labelDefaults: 'light',
            labelLayout: '{{properties.name}}'
        }
    });
    map.geoObjects.add(objectManager);
    var polylabel = new ymaps.polylabel.create(map, objectManager);
});