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();
});