Adding objects to the visible area of the map

Open in CodeSandbox

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

This example explains how to add only objects that fall in the visible area to the map. 

<!DOCTYPE html>

<html>
    <head>
        <title>
            Examples. Displaying objects in the visible area of the map.
        </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="show_visible_objects.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>
            Only placemarks that fall in the visible area are added to the
            map
        </p>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

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

    // Creating objects based on JSON descriptions of geometries.
    var objects = ymaps.geoQuery([
        {
            type: "Point",
            coordinates: [55.73, 37.75],
        },
        {
            type: "Point",
            coordinates: [55.1, 37.45],
        },
        {
            type: "Point",
            coordinates: [55.25, 37.35],
        },
        {
            type: "Point",
            coordinates: [55.25, 67.35],
        },
    ]);

    // Finding objects in the visible area of the map.
    objects
        .searchInside(myMap)
        // And then adding the found objects to the map.
        .addToMap(myMap);

    myMap.events.add("boundschange", function () {
        // After each shift of the map we will see what objects are in the visible area.
        var visibleObjects = objects.searchInside(myMap).addToMap(myMap);
        // Then we'll delete the other objects from the map.
        objects.remove(visibleObjects).removeFromMap(myMap);
    });
}