Ymaps-list demo

Плагин для создания карты с произвольным набором меток

Github

Карта + список


var dataFull = [
    {
        "id": "ylist-1",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-2",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-3",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-4",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-5",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsFull = new Ylist({
    data: dataFull,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps-full',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 10,
                            right: 10
                        }
                    }
                }
            ]
        },
        container: 'ymaps-full-map',
        dragTooltip: {
            text: 'Чтобы переместить карту, проведите по ней двумя пальцами'
        }
    },
    list: {
        active: true,
        container: 'ymaps-full-list'
    },
    switchContainer: 'ymaps-full-switch',
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ]
    },
    balloon: {
        activeBeforeBreakpoint: true,
        activeAfterBreakpoint: true
    }
});

ymapsFull.init();

Карта


var dataMap = [
    {
        "id": "ylist-6",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-7",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-8",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-9",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-10",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsMap = new Ylist({
    data: dataMap,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 10,
                            right: 10
                        }
                    }
                }
            ]
        },
        container: 'ymaps-map',
        dragTooltip: {
            text: 'Чтобы переместить карту, проведите по ней двумя пальцами'
        }
    },
    list: {
        active: false
    },
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ]
    },
    balloon: {
        activeBeforeBreakpoint: true,
        activeAfterBreakpoint: true
    }
});

ymapsMap.init();

Карта со статичными метками


var dataStatic = [
    {
        "id": "ylist-11",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-12",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-13",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-14",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-15",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsStatic = new Ylist({
    data: dataStatic,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps-static',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 10,
                            right: 10
                        }
                    }
                }
            ]
        },
        container: 'ymaps-static-map',
        drag: {
            disableAlways: true
        },
        dragTooltip: {
            active: false
        }
    },
    list: {
        active: false
    },
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ],
        clicked: false
    },
    balloon: {
        activeBeforeBreakpoint: false,
        activeAfterBreakpoint: false,
        header: false
    }
});

ymapsStatic.init();

Карта с балуном за пределами области


var dataBalloonOverflow = [
    {
        "id": "ylist-16",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-17",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-18",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-19",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-20",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsBalloonOverflow = new Ylist({
    data: dataBalloonOverflow,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps-balloon-overflow',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 10,
                            right: 10
                        }
                    }
                }
            ]
        },
        container: 'ymaps-balloon-overflow-map',
        dragTooltip: {
            text: 'Чтобы переместить карту, проведите по ней двумя пальцами'
        }
    },
    list: {
        active: false
    },
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ]
    },
    balloon: {
        activeBeforeBreakpoint: true,
        activeAfterBreakpoint: true,
        mapOverflow: false
    }
});

ymapsBalloonOverflow.init();

Кастомизированная карта


var dataCustom = [
    {
        "id": "ylist-21",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-22",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-23",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-24",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-25",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsCustom = new Ylist({
    data: dataCustom,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps-custom',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            state: {
                type: 'yandex#satellite'
            },
            options: {
                suppressMapOpenBlock: true
            },
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 50,
                            left: 10
                        }
                    }
                },
                {
                    constructor: 'FullscreenControl',
                    options: {
                        position: {
                            bottom: 10,
                            left: 10
                        }
                    }
                },
                {
                    constructor: 'SearchControl',
                    options: {
                        position: {
                            top: 10,
                            left: 10
                        },
                        size: 'small'
                    }
                }
            ]
        },
        container: 'ymaps-custom-map',
        dragTooltip: {
            text: 'Чтобы переместить карту, проведите по ней двумя пальцами'
        }
    },
    list: {
        active: false
    },
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ]
    },
    balloon: {
        activeBeforeBreakpoint: true,
        activeAfterBreakpoint: true
    }
});

ymapsCustom.init();

Карта с фильтром



var dataFilter = [
    {
        "id": "ylist-filter-1",
        "name": "Элемент списка №1",
        "coords": [55.790464, 37.530409],
        "address": "Ходынский бульвар, д. 4",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-filter-2",
        "name": "Элемент списка №2",
        "coords": [55.861954, 37.687713],
        "address": "ул. Дудинка, д. 3",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-filter-3",
        "name": "Элемент списка №3",
        "coords": [55.783944, 37.624642],
        "address": "Олимпийский проспект, д. 16, стр. 5, БЦ Олимпик-холл",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-filter-4",
        "name": "Элемент списка №4",
        "coords": [55.706431, 37.022618],
        "address": "Рублево-Успенское шоссе, пос. Горки-10, д. 24А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    },
    {
        "id": "ylist-filter-5",
        "name": "Элемент списка №5",
        "coords": [55.451967, 37.763198],
        "address": "Советский пр-т, д. 2А",
        "phone": "8 (999) 999-99-99",
        "email": "email@domain.com",
        "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat."
    }
];

var ymapsFilter = new Ylist({
    data: dataFilter,
    dataOrder: [
        'name',
        'address',
        'phone',
        'email',
        'description'
    ],
    dataExtension: {
        address: function(address, pointData) {
            let extendedAddress = `<p class="ylist__address">${address}</p>`;
            return extendedAddress;
        },
        phone: function(phone, pointData) {
            let phoneLink = phone.replace(/[\ \-\(\)']+/g, '');
            let extendedPhone = `<p class="ylist__phone"><a href="tel:${phoneLink}">${phone}</a></p>`;
            return extendedPhone;
        },
        email: function(email, pointData) {
            let extendedEmail = `<p class="ylist__email"><a href="mailto:${email}">${email}</a></p>`;
            return extendedEmail;
        },
        description: function(description, pointData) {
            let extendedDescription = `<p class="ylist__description">${description}</p>`;
            return extendedDescription;
        },
    },
    container: 'ymaps-filter',
    map: {
        center: [55.751574, 37.573856],
        customize: {
            controls: [
                {
                    constructor: 'ZoomControl',
                    options: {
                        size: 'small',
                        position: {
                            top: 10,
                            right: 10
                        }
                    }
                }
            ]
        },
        container: 'ymaps-filter-map',
        dragTooltip: {
            text: 'Чтобы переместить карту, проведите по ней двумя пальцами'
        },
        filterTooltip: {
            text: 'Совпадений не найдено'
        }
    },
    list: {
        active: true,
        container: 'ymaps-filter-list'
    },
    switchContainer: 'ymaps-filter-switch',
    cluster: {
        icons: [
            [
                {
                    href: 'img/pin_empty.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ],
            [
                {
                    href: 'img/pin_empty_active.svg',
                    size: [40, 50],
                    offset: [-20, -30]
                },
                {
                    href: 'img/pin_empty_active.svg',
                    size: [60, 75],
                    offset: [-30, -37]
                }
            ]
        ],
        inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'
    },
    placemark: {
        icons: [
            {
                href: 'img/pin.svg',
                size: [40, 50],
                offset: [-20, -50]
            },
            {
                href: 'img/pin_active.svg',
                size: [40, 50],
                offset: [-20, -50]
            }
        ]
    },
    balloon: {
        activeBeforeBreakpoint: true,
        activeAfterBreakpoint: false
    }
});

ymapsFilter.init();

// Фильтрация
$('.js-filter').on('submit', function(e) {
    e.preventDefault();
    var filterData = $(this).serializeArray();
    var param = filterData[0].value;

    // obj - элемент массива входящих данных data
    // i - индекс элемента внутри массива data
    // data - весь массив входящих данных
    ymapsFilter.filter((obj, i, data) => {
        // Проверяем на совпадение id
        if (obj.id === 'ylist-filter-' + param) {
            // Если колбек возвращает true, то эта метка будет отображена
            return true;
        }

        return false;
    }, Number(param)); // Значение, по которому произошла фильтрация нужно передавать обязательно


    $('.js-clear-filter').prop('disabled', false);
});

// Сброс фильтра
$('.js-clear-filter').on('click', function() {
    $(this).prop('disabled', true);
    $('.js-filter input:text').val('');

    ymapsFilter.clearFilter();
});
Github