Advanced

Интеграция карт

Как добавить

Файлы JS для этих компонентов не включены в пакет библиотеки и могут быть взяты из:

Github https://github.com/webix-hub/components
CDN

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

Библиотека Webix позволяет встраивать географические карты в приложение с помощью собственных компонентов. Поддерживаются следующие карты:

Here Map
OpenStreet Map
Яндекс.Карты
GoogleMap (начиная с версии 4.0 включена в основной пакет библиотеки)

Карты, связанные с пользовательским интерфейсом, наследуются от view.

Путь к компоненту

Вы можете задать путь к источнику нужной карты на CDN. Существуют три способа сделать это:

с помощью свойства cdn в конфигурации компонента. Этот способ позволяет задать путь к конкретной версии нужной библиотеки или локальному CDN
не задавая путь вообще. В этом случае будет использован официальный CDN компонента или глобальный cdnjs (если источник компонента там присутствует)
напрямую включив все файлы на страницу компонента. В этом случае необходимо задать значение false свойству cdn, чтобы избежать возможных конфликтов с версией компонента, включенной по умолчанию.

Инициализация

Шаг 1. Добавьте файл подключения

Для начала нужно добавить специальный файл в раздел head вашего документа. Указанный скрипт помогает присоединить стороннее приложение без указания явной ссылки: Расширения расположены по адресу https://github.com/webix-hub/components. Обратите внимание, в примерах документации они связаны по-другому, следуйте шаблонам ниже:

Для Here Map

<script type="text/javascript" src="./heremap.js"></script>

Related sample: Here Map

Для OpenStreet Map

<script type="text/javascript" src="./openmap.js"></script>

Related sample: OpenStreet Map

Для Яндекс.Карты

<script type="text/javascript" src="./yandexmap.js"></script>

Related sample: Integration: Yandex Map

Шаг 2. Указать контейнер для карты

Определите где на странице будет расположена карта. Вы можете отобразить ее внутри любого элемента HTML, заданного как контейнер карты:

// <div id="mydiv"></div>
webix.ui({
    container:"mydiv",
    // конфигурация map
});

Дополнительно вы можете поместить карту в Webix Window:

webix.ui({ 
    view:"window", id:"mapwin",
    body:{ ... }, // конфигурация map
    head:{ ... }, // место для тулбара 
    top:50, left:50, 
    width:600, height:500 // размеры и положение окна
}).show();

Шаг 3. Создать карту

Создайте карту и назначьте ей нужные свойства. Конструкторы всех карт одинаковы и отличаются только названием view.

Инициализация карты

{ 
    view:"yandex-map", // или "here-map", "open-map" 
    id:"map",
    zoom:6,
    center:[ 48.724, 8.215 ]
}

Свойства карты

Свойства определяющие исходное положение карты:

id - (string) - задает уникальный ID для компонента
zoom - (number) - определяет расстояние до поверхности Земли
center - (array) - определяет центр карты. Это массив двух элементов (широта и долгота) через запятую.

Related sample: Yandex Map

Работа с картами

Получение объекта карты

Чтобы сделать онлайн карты интерактивными, обратитесь к справочнику API по каждой из предоставляемых услуг. Чтобы получить доступ к объекту карты, используйте метод getMap():

var mapObj = $$("map").getMap();

Метод может принимать параметр waitMap. Если передан, метод возвращает промис, который разрешится при отображении карты.

$$("map").getMap().then(function(mapObj){
    // ваш код
});

Работа с Map API

API каждой из карт предлагает большое число возможных настроек, контролы, слои, сервисы и т.п.

Например,

чтобы показать определенную зону карты по запросу, передайте соответствующему методу параметры lat, lng и zoom с нужными значениями:

// для Яндекс.Карты
$$("map").getMap().setCenter([lat, lang], zoom);
 
// для Here Map
$$("map").getMap().setCenter({lat:lat, lng:lng});
 
// для Open Map
 $$("map").getMap().panTo([lat, lng]);

чтобы показать маркер на Яндекс.Карты, выполните два действия:
- создайте класс Placemark, который реализует маркеры
- добавьте маркер в коллекцию geoObjects (глобальная коллекция объектов карты):

// для Яндекс.Карты
var myPlacemark = new ymaps.Placemark([lat, lang]);
$$("map").getMap().geoObjects.add(myPlacemark);

Проверяйте API каждой из карт, чтобы узнать ее методы, свойства и события.

Статьи по теме

Наверх