Points falling within a circle

Open in CodeSandbox

You can use the GeoQueryResult class to create a set of placemarks on the map from JSON descriptions of their geometries.

This example shows how to check whether objects fall within a circular area and change their options via GeoQueryResult.

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Objects falling within a circle.</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script
            src="placemarks_in_circle.js"
            type="text/javascript"
        ></script>
        <style>
            body,
            html {
                font-family: Arial;
                font-size: 11pt;
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            p {
                padding: 10px;
            }
            #map {
                width: 100%;
                height: 80%;
            }
        </style>
    </head>
    <body>
        <p>Drag the circle and watch the placemark's color</p>
        <div id="map"></div>
    </body>
</html>
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.43, 37.75],
                zoom: 8,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        objects = ymaps
            .geoQuery([
                {
                    type: "Point",
                    coordinates: [55.73, 37.75],
                },
                {
                    type: "Point",
                    coordinates: [55.1, 37.45],
                },
                {
                    type: "Point",
                    coordinates: [55.25, 37.35],
                },
            ])
            .addToMap(myMap),
        circle = new ymaps.Circle([[55.43, 37.7], 10000], null, {
            draggable: true,
        });

    circle.events.add("drag", function () {
        // Objects that fall in the circle will turn red.
        var objectsInsideCircle = objects.searchInside(circle);
        objectsInsideCircle.setOptions("preset", "islands#redIcon");
        // The remaining objects are blue.
        objects
            .remove(objectsInsideCircle)
            .setOptions("preset", "islands#blueIcon");
    });
    myMap.geoObjects.add(circle);
}