При создании веб-страницы часто требуется добавить механизм поиска места на карте. Webix предлагает простое и элегантное решение для встраивания в веб-приложение географических карт онлайн.
Эта статья расскажет вам, как добавить популярные веб-карты, такие как Google, Nokia, OpenStreet и Yandex maps в приложение Webix, используя всего несколько строк кода.
Создание виджета карты
Прежде всего, из открытого репозитория вспомогательных компонентов Webix нужно загрузить специальный JavaScript файл, который поможет встроить карту в веб-приложение. Этот файл соединит ваше приложение со сторонними библиотеками и файлами, необходимыми для выбранной карты без непосредственного подключения к ним. Обратите внимание, что эти расширения не входят в стандартный пакет библиотеки.
После загрузки необходимого файла с JS кодом, нужно подключить ссылку на него в тег
вашего документа. Например, чтобы встроить в веб-страницу карту Google Map, необходимо скачать файл “googlemap.js” и подключить его с помощью строки кода ниже:
Обратите внимание, что карта Nokia map требует установки ключей аутентификации, которые вы можете получить при регистрации аккаунта Nokia. Узнать больше можно из документации.
Ниже представлен отрывок кода, который инициализирует карту на странице:
view:"google-map", // or "nokia-map", "yandex-map", "open-map"
id:"map",
zoom:6,
center:[ 48.724, 8.215 ]
});
Следующие свойства задают начальную позицию карты:
- id – задает уникальное ID компонента;
- zoom – задает желаемое расстояние до поверхности земли;
- center — определяет центр карты. Это массив из двух элементов (широта и долгота), отделяемых запятой.
Размещение карты на странице
Карту можно расположить прямо в теле веб-страницы, и тогда она займет все доступное пространство. Именно такое размещение карты задается кодом, описанным выше. Кроме того, карта может быть встроена в любой HTML-элемент или в Webix Window.
Для отрисовки карты внутри HTML-элемента, задайте контейнер для вашей карты с указанием ID нужного элемента:
webix.ui({
container:"mydiv",
..//конфигурация карты
});
Для интеграции карты Google в JS Window используйте следующую конфигурацию для инициализации компонента Window. Карта будет расположена внутри тела компонента этого компонента:
view:"window", id:"mapwin",
body:{ ... }, //конфигурация карты
head:{....}, //место для размещения toolbar
top:50, left:50,
width:600, height:500 // размеры и расположение окна
}).show();
Теперь на нашей странице появилась полноценная карта. Вы можете увидеть ее в онлайн-демо. Нужно отметить, что Webix только размещает карту на странице. В то же время, вы можете использовать собственный API каждой из карт (например, Google Maps API) для выполнения различных операций с их помощью.
Заключение
Интеграция Webix с онлайн картами проста и удобна. Она требует минимального кода, а конфигурации разных карт практически одинаковы.
Чтобы узнать больше об интеграции Webix с географическими картами онлайн, ознакомьтесь со статьей документации по данной теме.
