Ymaps-list
Ymaps-list это плагин для создания карты с произвольным набором меток.
Плагин использует API Яндекс.Карт версии 2.1.
Плагин может создавать не только карту, но и дополнительно может создать текстовый список меток, который будет связан с метками на карте.
Demo
Package Managers
# NPM npm install ymaps-list # YARN yarn add ymaps-list
Подключение
В html файле необходимо подключить jQuery, API Яндкс.Карт и js файл плагина:
В head необходимо подключить css файлы плагина:
<!-- Подключение ymaps-list.base.css обязательно --><!-- Подключайте ymaps-list.theme.css если вам нужна базовая стилизация -->
Разметка
В html необходимо подготовить разметку:
<!-- id всех элементов вы можете задать любые, class всех элементов должны быть строго такими --> <!-- В качестве переключателей можно использовать любые элементы, но у них обязательно должен быть указан data-ylist-switch --> Список Карта
Настройка и инициализация:
var data = "id": "id-1" "name": "Элемент списка №1" "coords": 55790464 37530409 "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": "id-2" "name": "Элемент списка №2" "coords": 55861954 37687713 "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." ; var myYmaps = data: data dataOrder: 'name' 'address' 'phone' 'email' 'description' dataExtension: { let extendedAddress = `<p class="ylist__address"></p>`; return extendedAddress; } { let phoneLink = phone; let extendedPhone = `<p class="ylist__phone"><a href="tel:"></a></p>`; return extendedPhone; } { let extendedEmail = `<p class="ylist__email"><a href="mailto:"></a></p>`; return extendedEmail; } { let extendedDescription = `<p class="ylist__description"></p>`; return extendedDescription; } container: 'ymaps' map: center: 55751574 37573856 customize: state: zoom: 4 options: nativeFullscreen: true controls: ; myYmaps.init();
Настройки
data
Тип: Array
Значение по умолчанию: null
Обязательно: +
Данные меток в виде массива объектов. Обязательные параметры метки: id: 'string'
, name: 'string'
, coords: [широта, долгота]
. Из name
формируется заголовок балуна и списка. Остальные параметры опциональны, могут иметь любое название и быть в любом кол-ве. Важно чтобы у каждой метки был одинаковый набор параметров. Порядок вывода параметров указывается в опции dataOrder
.
// Пример входящего массива данныхvar data = "id": "id-1" "name": "Point №1" "coords": 55790464 37530409 "address": "Moscow, Main street, 5" "phone": "8 (999) 999-99-99" "email": "email@domain.com" "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo perferendis quaerat." // ...;
dataOrder
Тип: Array
Значение по умолчанию: -
Обязательно: +
Массив, в котором указывается порядок вывода параметров меткию. В массиве указываются именно названия свойств, которые указаны у метки в data
.
// ...dataOrder: 'name' 'address' 'phone' 'email' 'description'// ...
dataExtension
Тип: Object
Значение по умолчанию: {}
Обязательно: -
В объекте указываются свойства с таким же именем, как в dataOrder
. В каждом свойстве находится функция колбек, в которую первым аргументом передается в виде строки значение соответствующего свойства из data
, вторым аргументом передается весь объект данных по метке. Например, function(address, pointData) {}
. Функция должна возвращать строку.
// ...dataExtension: { let extendedAddress = `<p class="ylist__address"></p>`; return extendedAddress; } { let phoneLink = phone; let extendedPhone = `<p class="ylist__phone"><a href="tel:"></a></p>`; return extendedPhone; }// ...
container
Тип: String
Значение по умолчанию: -
Обязательно: +
ID родительского контейнера в виде строки, например ymaps
.
map
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки карты.
map.container
Тип: String
Значение по умолчанию: -
Обязательно: +
ID контейнера карты в виде строки, например ymaps-map
.
map.center
Тип: Array
Значение по умолчанию: -
Обязательно: +
Координаты дефолтного центра карты в виде массива координат [широта, долгота]
.
map.customize
Тип: Object
или Boolean
Значение по умолчанию: false
Обязательно: -
Объект пользовательских настроек карты. Содержит поля state
, options
, controls
. См. API Яндекс.Карт
map.customize.state
Тип: Object
или Boolean
Значение по умолчанию: false
Обязательно: -
Параметры карты. См. API Яндекс.Карт state.*
// ...map: customize: state: zoom: 4 // ...
map.customize.options
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Опции карты. См. API Яндекс.Карт options.*
// ...map: customize: options: nativeFullscreen: true // ...
map.customize.controls
Тип: Array
или Boolean
Значение по умолчанию: false
Обязательно: -
Элементы управления картой. Массив объектов, где у объекта есть параметры constructor
- название конструктора контрола из API Яндекс.Карт, например ZoomControl
, options
- опции конструктора контрола parameters.options.*
. Пример см. в Демо.
// ...map: customize: controls:
map.drag
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки включения/выключения опции drag карты.
map.drag.disableOnTouch
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Включение/выключение опции drag карты на touch устройствах.
map.drag.disableAlways
Тип: Boolean
Значение по умолчанию: false
Обязательно: -
Включение/выключение опции drag карты всегда на всех устройствах.
map.dragTooltip
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки подсказки про драг двумя пальцами.
map.dragTooltip.active
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Включение/выключение подсказки про драг карты.
map.dragTooltip.text
Тип: String
Значение по умолчанию: To drag map touch screen by two fingers and move
Обязательно: -
Текст подсказки про драг карты.
map.filterTooltip
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки подсказки фильтрации. Подсказка появляется если при фильтрации нет никаких совпадений.
map.filterTooltip.active
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Включение/выключение подсказки фильтрации.
map.filterTooltip.text
Тип: String
Значение по умолчанию: No matches found
Обязательно: -
Текст подсказки фильтрации.
map.filterTooltip.container
Тип: String
Значение по умолчанию: #${this.container}
Обязательно: -
Контейнер, в которорый будет выводиться подсказка фильтра. Обязательно указывать класс или id, например #my-container
list
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки текстового спсика меток.
list.active
Тип: Boolean
Значение по умолчанию: false
Обязательно: -
Строить текстовый список меток или нет.
list.container
Тип: String
Значение по умолчанию: -
Обязательно: -
ID контейнера списка в виде строки, например ymaps-list
. Обязательно только если list.active: true
.
list.scroll
Тип: Boolean
или function
Значение по умолчанию: false
Обязательно: -
Если list.active: true
и list.scroll: false
, то проскролливание к активному элементу списка происходит с помощью jQuery.scrollTop()
и подсчет позиции активного элемента. Если list.active: true
и list.scroll: function($listContainer, $activeListItem) {}
, то можно описать свой механизм проскролливания, например в случае использования кастомного скроллбара. В функцию передается элемент контейнера списка и активный элемент спсика.
// ...list: { // Call custom scrollbar method to $activeListItem }// ...
list.header
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Показывать заголовок элемента спсика или нет.
list.clickElement
Тип: String
Значение по умолчанию: ylist-list__title
Обязательно: -
Класс внутри элемента списка, на который вешается событие клика, которое выделяет элемент списка и метку.
list.itemWrapper
Тип: String
или Boolean
Значение по умолчанию: false
Обязательно: -
Класс. Все содержимое элемента списка будет обернуто в div с указанным классом.
list.modifier
Тип: String
Значение по умолчанию: ''
Обязательно: -
БЭМ модификатор для элемента списка .ylist-list
в формате ylist-list--modifier
.
switchContainer
Тип: String
Значение по умолчанию: false
Обязательно: -
ID контейнера с переключателями карта/список в виде строки, например ymaps-switch
.
cluster
Тип: Object
или Boolean
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки кластера. Если cluster: false
, то кластеризация меток не происходит.
cluster.icons
Тип: Array
Значение по умолчанию: ['islands#invertedRedClusterIcons', 'islands#invertedBlueClusterIcons']
Обязательно: -
Массив, который содержит настройки иконок кластера. Первым элементом указывается дефолтная иконка, вторым элементом указывается активная иконка. В качестве значений можно использовать уже существующийе иконки в Яндкс.Картах. Если требуется задать кастомные иконки кластера, то первым элементом указывается массив из 2-х объектов для дефолтной иконки, вторым элементом указывается массив из 2-х объектов для активной иконки см. пример.
// ...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 // ...
или
// ...cluster: icons: 'islands#invertedGrayClusterIcons' 'islands#invertedOrangeClusterIcons' // ...
cluster.inlineStyle
Тип: String
Значение по умолчанию: ''
Обязательно: -
Инлайновые стили для текста внутри кастомной иконки кластера.
// ...cluster: inlineStyle: 'color: #fff; padding-left: 2px; text-align: center; font: bold 16px/44px Helvetica, Helvetica CY, Arial, Nimbus Sans L, sans-serif;'// ...
placemark
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки меток.
placemark.icons
Тип: Array
Значение по умолчанию: ['islands#redDotIcon', 'islands#blueDotIcon']
Обязательно: -
Массив, который содержит настройки иконок меток. Первым элементом указывается дефолтная иконка, вторым элементом указывается активная иконка. В качестве значений можно использовать уже существующийе иконки в Яндкс.Картах. Если требуется задать кастомные иконки меток, то первым элементом указывается объект для дефолтной иконки, вторым элементом указывается объект для активной иконки, например:
// ...placemark: icons: href: 'img/pin.svg' size: 40 50 offset: -20 -50 href: 'img/pin_active.svg' size: 40 50 offset: -20 -50 // ...
или
// ...placemark: icons: 'islands#grayDotIcon' 'islands#orangeDotIcon' // ...
placemark.clicked
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Указывает кликабельны метки на карте или нет.
balloon
Тип: Object
Значение по умолчанию: {}
Обязательно: -
Объект, который содержит настройки балуна метки.
balloon.activeBeforeBreakpoint
Тип: Boolean
Значение по умолчанию: false
Обязательно: -
Показывать ли балун метки на разрешениях < adaptiveBreakpoint
.
balloon.activeAfterBreakpoint
Тип: Boolean
Значение по умолчанию: false
Обязательно: -
Показывать ли балун метки на разрешениях > adaptiveBreakpoint
.
balloon.closeButton
Тип: String
Значение по умолчанию: x
Обязательно: -
Html разметка содержимого кнопки закрытия балуна метки.
// ...balloon: closeButton: '<span>x</span>'// ...
balloon.header
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Показывать заголовок балуна списика или нет.
balloon.modifier
Тип: String
Значение по умолчанию: ''
Обязательно: -
БЭМ модификатор для элемента балуна .ylist-balloon
в формате ylist-balloon--modifier
.
balloon.mapOverflow
Тип: Boolean
Значение по умолчанию: true
Обязательно: -
Показывать балун за пределами области карты, когда балун по высоте больше карты, или нет. Если true
, то баллун не выходит за рамки области карты.
adaptiveBreakpoint
Тип: Number
Значение по умолчанию: 1024
Обязательно: -
Брейкпоинт, на котором происходит перестроение связки карта-список. Если разрешение < adaptiveBreakpoint
, то становится видимым переключатель карта-список и соответственно отображается либо карта, либо список. Если разрешение > adaptiveBreakpoint
, то карта и список видны обновременно, а переключатель скрывается.
Callbacks
afterInit
Тип: Boolean
или function
Значение по умолчанию: false
Обязательно: -
Колбек отрабатывает после полной готовности списка и карты (отрисока и простановка меток). Возвращает экземпляр класса и jQuery элемент главного контейнера.
// ... { $mainContainer; ymapsList;}// ...
Публичные методы
init
Arguments: -
Инициализация плагина.
update
Arguments: newData : Array
необязательно
Обновляет карту и список. Опционально можно передать массив новых данных см. описание опции data
var newData = "id": "id-1" "name": "Элемент списка №1" "coords": 55790464 37530409 "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": "id-2" "name": "Элемент списка №2" "coords": 55861954 37687713 "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." ; ;
getPointData
Arguments: id : String
Получает данные метки по её id.
;
filter
Arguments: callback : Function
, param : String/Number
Фильрация списка и меток на карте.
var param = ; // obj - элемент массива входящих данных data// i - индекс элемента внутри массива data// data - весь массив входящих данныхmyFilteredMap; // Значение, по которому произошла фильтрация нужно передавать обязательно
clearFilter
Arguments: -
Сброс результата фильтрации.
;
Building
yarn install
- Запустить сборку
npm start