How to make the filter and grouping work on Yandex maps?

Question

JavaScript

How to make geoQuery and objectManager work together? Now I have labels from json displayed and grouped.

url: "/local/templates/main/components/bitrix/news.list/map_new/data.php",
      type: "POST",
      dataType: "json",
        }).done(function(response) {
         objectManager.add(response);
           console.log(response)

Added a filter and now I get labels like this

jQuery.getJSON('/local/templates/main/components/bitrix/news.list/map_new/data.php', function (json) {
           window.myObjects = ymaps.geoQuery(json)
               .addToMap(myMap3)
       })

But the problem is that the first method groups everything, but the filter does not work. And the second triggers the filter, but the grouping does not work. Is it possible to combine them at all? I did not find examples on Yandex.

Full code

<div>
    <div>
        <select id="city">
            <option selected="true" disabled="disabled">Город:</option>
            <option value="Москва">Москва</option>
            <option value="Пермь">Пермь</option>
        </select>
    </div>
    <div>
        <select id="location">
            <option selected="true" disabled="disabled">Улица:</option>
            <option value="Гагарина">Гагарина</option>
            <option value="Пушкина">Пушкина</option>
        </select>
    </div>
    <div>
        <select id="quantity">
            <option selected="true" disabled="disabled">Количество домов:</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
        </select>
    </div>
</div>


<div id="map3" style="width: 600px; height: 400px"></div>

<script>

    ymaps.ready(init);

    function init () {
        var myMap3 = new ymaps.Map('map3', {
                center: [55.76, 37.64],
                zoom: 10
            }, {
                searchControlProvider: 'yandex#search'
            }),
            objectManager = new ymaps.ObjectManager({
                clusterize: true,
                gridSize: 32,
                clusterDisableClickZoom: true
            });



        objectManager.objects.options.set('preset', 'islands#greenDotIcon');
        objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
        myMap3.geoObjects.add(objectManager);

        jQuery.getJSON('/local/templates/main/components/bitrix/news.list/map_new/data.php', function (json) {
            window.myObjects = ymaps.geoQuery(json)
                .addToMap(myMap3)
        })



        function checkState () {
            var shownObjects,
                quantity=$('#quantity').val(),
                city=$('#city').val(),
                location=$('#location').val(),
                filter_c=new ymaps.GeoQueryResult(),
                filter_l=new ymaps.GeoQueryResult(),
                filter_q=new ymaps.GeoQueryResult();

            var variant=0;

            if(quantity!=null){
                variant+=1;
            }
            if(city!=null){
                variant+=10;
            }
            if(location!=null){
                variant+=100;
            }

            switch(variant){
                case 1:
                    filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                    shownObjects=filter_q.addToMap(myMap3);
                    break;
                case 10:
                    filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                    shownObjects=filter_c.addToMap(myMap3);
                    break;
                case 100:
                    filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                    shownObjects=filter_l.addToMap(myMap3);
                    break;
                case 11:
                    filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                    filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                    shownObjects=filter_c.intersect(filter_q).addToMap(myMap3);
                    break;
                case 101:
                    filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                    filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                    shownObjects=filter_l.intersect(filter_q).addToMap(myMap3);
                    break;
                case 110:
                    filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                    filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                    shownObjects=filter_c.intersect(filter_l).addToMap(myMap3);
                    break;
                case 111:
                    filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                    filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                    filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                    shownObjects=filter_c.intersect(filter_l).intersect(filter_q).addToMap(myMap3);
                    break;
            }

            myObjects.remove(shownObjects).removeFromMap(myMap3);
        }

        $('#city').change(checkState);
        $('#location').change(checkState);
        $('#quantity').change(checkState);

    }

</script>

Answer 1

1) remove previous from objectManager
2) filter via geoQuery
3) add received to objectManager