Searching for the nearest object.

Open in CodeSandbox

Use the GeoQueryResult object to create objects on the map from their JSON descriptions.

This example explains how to find objects in the selection that are nearest to an arbitrary object on the map (such as the metro). It also shows how to find the objects that are closest to the click. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Searching for the nearest object.</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="find_closest_object.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>
            When the map is clicked, the balloon opens for the placemark
            nearest to the click
        </p>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.73, 37.75],
                zoom: 12,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        cafe,
        metro;

    function findClosestObjects() {
        /**
         * Searching the selection for the cafe nearest to the found metro station, and opening its balloon.
         *
         */
        cafe.getClosestTo(metro.get(0)).balloon.open();

        // Opening the balloon of the cafe that is closest to the click.
        myMap.events.add("click", function (event) {
            cafe.getClosestTo(event.get("coords")).balloon.open();
        });
    }

    /**
     * Cafe descriptions can be stored in JSON format, in order to then generate
     * geo objects from the descriptions using ymaps.geoQuery.
     */
    cafe = ymaps
        .geoQuery({
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    properties: {
                        balloonContent:
                            "Darth Vader coffee shop - we have cookies!",
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.724166, 37.545849],
                    },
                },
                {
                    type: "Feature",
                    properties: {
                        balloonContent: "Gollum cafe - lovely cakes.",
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.717495, 37.567886],
                    },
                },
                {
                    type: "Feature",
                    properties: {
                        balloonContent:
                            "Brick cafe: strong coffee for strong guys.",
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [55.721018, 37.631057],
                    },
                },
            ],
            // Adding points to the map immediately.
        })
        .addToMap(myMap);

    // Using reverse geocoding to find the metro station "Kropotkinskaya".
    metro = ymaps
        .geoQuery(ymaps.geocode([55.744828, 37.603423], { kind: "metro" }))
        // Waiting for the response from the server and then processing the received results.
        .then(findClosestObjects);
}