JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="width:500px;height:500px"></div>
JavaScript
ymaps.ready(init);
function init() {
var PointCollection = new ymaps.GeoObjectCollection();
var PolygonObj = new ymaps.GeoObjectCollection();
var ObjMap = new ymaps.Map("map", {
center: [55.43, 37.75],
zoom: 8
}, {
searchControlProvider: 'yandex#search'
});
var placemark = new ymaps.Placemark([55.5, 37.8], {}, {
preset: "islands#greenIcon", HomeId: 1
});
PointCollection.add(placemark);
var placemark = new ymaps.Placemark([55.6, 37.8], {}, {
preset: "islands#greenIcon", HomeId: 2
});
PointCollection.add(placemark);
var placemark = new ymaps.Placemark([55.7, 37.8], {}, {
preset: "islands#greenIcon", HomeId: 3
});
var placemark = new ymaps.Placemark([55.8, 37.8], {}, {
preset: "islands#greenIcon", HomeId: 4
});
PointCollection.add(placemark);
var placemark = new ymaps.Placemark([55.9, 37.8], {}, {
preset: "islands#greenIcon", HomeId: 5
});
PointCollection.add(placemark);
ObjMap.geoObjects.add(PointCollection);
areaAddBtn = new ymaps.control.Button({
data: {content: 'Добавить область'},
options: {maxWidth: 160, float: 'left', selectOnClick: true}
});
areaAddBtn.events.add('select', function () {
newPolygon = new ymaps.Polygon([], {}, {
editorDrawingCursor: "crosshair",
editorMaxPoints: 100,
fillColor: '#00FF0000',
strokeColor: '#FF0000',
draggable : true,
strokeWidth: 3
});
PolygonObj.add(newPolygon);
ObjMap.geoObjects.add(newPolygon);
newPolygon.editor.startDrawing();
newPolygon.editor.events.add("vertexadd", function (event) {
obj = ymaps.geoQuery(PointCollection, newPolygon);
//console.log(newPolygon.geometry.get(0));
var objectsInsideCircle = obj.searchInside(newPolygon);
...