Яндекс-карты. Как сделать фильтр по объектам недвижимости?

Question

[kiberlain]

Есть форма где делается выборка недвижимости по набору параметров: тип, район, цена, площадь и т.д. При изменении формы соответственно заново рисуется карта с уже обновлённым набором меток на ней. Есть примеры реализации подобных фильтров? Про фильтрацию объектов я уже читал, интересует как сделать фильтр по произвольному набору характеристик.

Comments

[Alams Stoyne]

1) Делаешь на JS объект всех меток (со всеми характеристиками),
2) Фильтруешь на основании данных формы в отдельный объект,
3) Выводишь метки из объекта полученного после фильтрации .

Средствами Yandex тут не обойтись, готового решения не встречал (по факту оно не сложно создаётся)

[Антон Р.]

по произвольному набору характеристик

А где эти характеристики хранятся?

[kiberlain]

Антон Р., в data.json

[Антон Р.]

kiberlain, ну так и в чем проблема? закидываешь туда свои характеристики а дальше переписываешь вот этот код, благо там всё прокомментировано:

// Создадим 5 пунктов выпадающего списка.
    var listBoxItems = ['Школа', 'Аптека', 'Магазин', 'Больница', 'Бар']
            .map(function (title) {
                return new ymaps.control.ListBoxItem({
                    data: {
                        content: title
                    },
                    state: {
                        selected: true
                    }
                })
            }),
        reducer = function (filters, filter) {
            filters[filter.data.get('content')] = filter.isSelected();
            return filters;
        },
        // Теперь создадим список, содержащий 5 пунктов.
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems.reduce(reducer, {})
            }
        });
    myMap.controls.add(listBoxControl);

// Добавим отслеживание изменения признака, выбран ли пункт списка.
    listBoxControl.events.add(['select', 'deselect'], function (e) {
        var listBoxItem = e.get('target');
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        listBoxControl.state.set('filters', filters);
    });

    var filterMonitor = new ymaps.Monitor(listBoxControl.state);
    filterMonitor.add('filters', function (filters) {
        // Применим фильтр.
        objectManager.setFilter(getFilterFunction(filters));
    });

    function getFilterFunction(categories) {
        return function (obj) {
            var content = obj.properties.balloonContent;
            return categories[content]
        }
    }

[kiberlain]

Антон Р., мне все характеристики в этот кусок jsona вставить?

{
        "type": "Feature",
        "id": 2,
        "geometry":
        {
            "type": "Point",
            "coordinates": [59.933694, 30.323230]
        },
        "properties":
        {
            "balloonContent": "Бар",
            "clusterCaption": "Бар",
            "hintContent": "Бар",
            "iconCaption": "Бар",
            "param1": "param-1",
            "param2": "param-2",
            "param3": "param-3"
            ...

        },
        "options":
        {
            "preset": "islands#violetCircleDotIconWithCaption"
        }
    }

[Антон Р.]

kiberlain, точно не подскажу, я чисто логически предположил.

[freeExec]

kiberlain, Да, всё правильно, вставляйте в свой geojson

Answer 1

[Антон Шаманов]

var mapManager = new ymaps.ObjectManager({
    clusterize: true,
    gridSize: 32,
    clusterDisableClickZoom: true
});
mapManager.objects.options.set('preset', 'islands#blackDotIcon');
mapManager.clusters.options.set('preset', 'islands#blackClusterIcons');
map.geoObjects.add(mapManager);
mapManager.removeAll();

let items = [];
items.push({
    type: 'Feature',
    id: data.id,
    geometry: { type: 'Point', coordinates: [data.lat, data.lng] },
    properties: {
        clusterCaption: data.title,
        hintContent: data.title,
        balloonContentHeader: data.header,
        balloonContentBody: data.description,
        balloonContentFooter: data.footer,
        yourProperty1: data.prop1,
        yourProperty2: data.prop2
    }
});
mapManager.add({ type: 'FeatureCollection', features:  items });
mapManager.getMap().setBounds(
    mapManager.getBounds(),
    { checkZoomRange: true, useMapMargin: true }
);