Problem when adding 10 thousand points to Yandex map api?

Question

Yandex maps

The question of such a plan, there are records that have parameters (latitude longitude) for mapping. The task is this, when you click on the button to show the map, 10 thousand records using ajax try to add to the Yandex map, this is hard. The question is, who tried to add a large number of records to the map? How can you ease the pain?

A script that displays data.markers[i].lat, data.markers[i].lon with Ajax and adds marks to the map.

spoiler

var is_map = 0;
$(function() {
    $('.get_view span').on('click', function() {
        var view = $(this).data('view');
        $('.get_view .blue').removeClass('blue');
        $(this).addClass('blue');
        if (view == 'map') {
            $('#body').height($(window).height() - 180);
            $('#body_content').addClass('hide_catalog');
            $('#map_body').show();
            if (!is_map) {
                init_map();
                is_map = 1;
            }
            if (!$(this).hasClass('readily')) {
                data_ids = $('form[name=objects]').serialize();
                load_marks_map(data_ids);
                $(this).addClass('readily');
            }
        }
        if (view == 'catalog') {
            $('#body').height('auto');
            $('#body_content').removeClass('hide_catalog');
            $('#map_body').hide();
        }
        return false;
    });

});

function load_catalog(url, data) {
    $.ajax({
        url: url,
        type: 'GET',
        data: data,
        success: function(data) {
            $('#body_content').html(data);
            $('.get_view .vm').removeClass('readily');
        },
        complete: function(data) {
            if ($('.get_view .vm').hasClass('blue')) {
                var data_ids = $('form[name=objects]').serialize();
                load_marks_map(data_ids);
            }
        }
    });
}
var myMap, myCollection, MyBalloonContentLayoutClass;

function init_map() {
    myMap = new ymaps.Map("map_body", {
        center: [55.753329, 37.623164],
        zoom: 9.8,
        behaviors: ['default', 'scrollZoom']
    });
   // myMap.controls.add('zoomControl').add('typeSelector').add('mapTools');
    myCollection = new ymaps.GeoObjectCollection();
    MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass('<div style="padding:5px" class="ball"><div class="item_ball"><img src="files/originals/$[properties.image]" alt=""></div><p>$[properties.name]</p></div>');
}

function load_marks_map(ids) {
    if (myCollection) {
        myCollection.removeAll();
    }
    $.ajax({
        url: "ajax/get_products_map.php",
        type: 'GET',
        data: ids,
        success: function(data) {
      console.log(data);
            for (i = 0; i < data.markers.length; i++) {
                var myPlacemark = new ymaps.Placemark([data.markers[i].lat, data.markers[i].lon], {
                    id: data.markers[i].id,
                    name: data.markers[i].name,
                    image: data.markers[i].image,
                    description: data.markers[i].description,
                    hintContent: data.markers[i].name
                }, {
                    balloonContentLayout: MyBalloonContentLayoutClass,
                    preset: data.markers[i].styleplacemark
                });
                myCollection.add(myPlacemark);
            }
            myMap.geoObjects.add(myCollection);
            myMap.setBounds(myCollection.getBounds(), {
                checkZoomRange: true,
                flying: true,
                duration: 500
            });
        }
    });
}

When there are no more than 100 records, it flies perfectly.
but an array of 10 thousand, straight to none.

Answer 1

Because it is necessary to transfer not in a cycle one object at a time, but to collect a json array. Look at this manual https://yandex.ru/dev/maps/jsbox/2.1/object_manager
And here is an example of how to collect such an array in php

$mask = array();
$mask['type'] = 'FeatureCollection';

foreach ( $variable as $key => $value ) {
  $mask['features'][] = array(
    'register-post-types.php' => 'Feature',
    'id' => $key,
    'geometry' => array (
      'type' => 'Point',
      'coordinates' => [(float) $value->lat, (float) $value->long],
    ),
    'properties' => array (
      'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . $value->post_link . '">' . $value->post_title . '</a></strong>',
      'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
      'clusterCaption' => '<strong>' . $value->post_title . '</strong>',
      'hintContent' => '<strong>' . $value->post_title . '</strong>'
    )
  );
}

After, with the help json_encode( $mask )you can pass the array further to the handler

Answer 2

The answer is this.
Never.
No way.
The client should not receive 10000 points or any data at all.
This is an axiom.
You broke it and got in trouble.