JS API карт Navitel представляет собой набор JavaScript-компонентов, предназначенных для доступа к картографическому материалу веб-страницах.
Возможности:
1. Получите API-ключ.
Для работы с JS API карт Navitel требуется действующий API ключ. Ключ можно получить, обратившись по адресу ap@navitel.ru.
2. Подключите API и библиотеки Leaflet.
Для подключения библиотек Leaflet и API добавьте в заголовок HTML-страницы строки следующего вида:
<head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet-src.js"></script> <script src="http://webmapapi.navitel.ru/index.umd.js"></script> </head>
3. Создайте контейнер для карты.
Для создания контейнера, в котором будет размещена карта, добавьте любой HTML-элемент блочного типа. Карта заполнит этот элемент полностью.
<body> <div id="map"></div> </body>
4.Создайте карту.
Для создания карты с тайлами добавьте следующий код в секцию body:
<script> const nmapi = navitel.createWebMapApi('6e982defee3eb78ab24890068d57fff04b4f7ae5', { locale: navitel.LocaleCode.ru_RU }) const map = L.map('map', { center: [55.75, 37.70], zoom: 9, }) const navitelTile = nmapi.extension.leaflet.createTileLayer({ locale: navitel.LocaleCode.ru_RU }) navitelTile.addTo(map) </script>
В данном примере используется два параметра для карты:
Географическая точка с определенной широтой и долготой.
| Свойство | Тип | Описание |
|---|---|---|
| latitude | Number | Широта в градусах, интервал допустимых значений [-90, 90] |
| longitude | Number | Долгота в градусах, интервал допустимых значений [-180, 180] |
Описывает прямоугольную область на карте в пиксельных координатах.
| Свойство | Тип | Описание |
|---|---|---|
| widthPx | Number | Ширина в пикселях |
| heightPx | Number | Высота в пикселях |
| zoomLevel | Number | Коэффициент масштабирования в диапазоне от 3 до 18 включительно, где 3 – минимальный масштаб, 18 – максимальный |
| centerCoordinates | LatLng | Координаты центра карты в формате [широта, долгота] |
Полилиния из последовательности точек на карте.
| Свойство | Тип | Описание |
|---|---|---|
| points | LonLat[] | Последовательность точек |
В данном разделе приводится описание API карт, который используется для создания и управления картой на странице.
| Конструктор | Описание |
|---|---|
| createWebMapApi( | Создает объект, с которым будет дальнейшее обращение к API |
Параметры
| Параметр | Тип | Значение по умолчанию | Описание |
|---|---|---|---|
| locale | String | Язык браузера | Указывает код используемого языка для карты |
Пример использования
const nmapi = navitel.createWebMapApi('6e982defee3eb78ab24890068d57fff04b4f7ae5', { locale: navitel.LocaleCode.ru_RU })
| Конструктор | Описание |
|---|---|
| L.map( | Инициализирует карту в DOM-узле <div> элемента с указанным id с необязательным набором опций, которые описаны ниже. |
Параметры
Подробное описание возможных параметров данного метода приведено в описании API используемой библиотеки Leaflet 1.6.0
Пример использования
Инициализация карты в элементе div с id "map", с указанием координат центра карты и коэффициента масштабирования.
const map = L.map('map', { center: [55.75, 37.70], zoom: 9, })
| Конструктор | Описание |
|---|---|
| createTileLayer( | Создание слоя с тайлами. |
Параметры
| Параметр | Тип | Значение по умолчанию | Описание |
|---|---|---|---|
| locale | String | Язык браузера | Указывает код используемого языка для тайлов |
Пример использования
const navitelTile = nmapi.extension.leaflet.createTileLayer({ locale: navitel.LocaleCode.es_ES })
API позволяет автоматически строить маршрут между заданными точками, получать информацию о протяженности маршрута и ориентировочном времени прохождения маршрута. Доступны следующие виды транспортных средств, для которых прокладывается маршрут:
Маршрут можно строить по двум точкам и более, с учетом пробок или без.
| Конструктор | Описание |
|---|---|
| routeId( | Генерация ключа маршрута |
Параметры
| Параметр | Тип | Значение по умолчанию | Описание |
|---|---|---|---|
| objectType | Integer | Указывает тип ТС, для которого прокладывается маршрут. Возможные значения: INVALID = 0; PEDESTRIAN = 1; BICYCLE = 2; CAR = 3; TAXI = 4; BUS = 5; EMERGENCY = 6; DELIVERY = 7; TRUCK = 8; | |
| jams | Boolean | False | Учитывает пробки при прокладке маршрута. |
| waypointsList | LonLat[] | Указывает массив точек для построения маршрута. |
Пример использования
const routeId = await nmapi.route.routeId({ objectType: nmapi.route.ObjectType.BUS, waypointsList: [ [59.938806, 30.314278], // St. Petersburg [55.755773, 37.617761], // Moscow [55.028739, 82.906928], // Novosibirsk ] })
| Конструктор | Описание | Возвращает | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| routeMetadata( | Получение метаданных маршрута | length_meters - протяженность маршрута в метрах duration_seconds - ориентировочное время прохождения маршрута либо ошибку с кодом
|
Пример использования
const meta = await nmapi.route.routeMetadata({ routeId })
| Конструктор | Описание | Возвращает | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| routeGeometry( | Получение геометрии маршрута | GeoLine[] lines - геометрию маршрута в виде последовательного набора полилиний в пространстве либо ошибку с кодом
|
Параметры
| Параметр | Тип | Описание |
|---|---|---|
| viewport | viewport | Задает область, для которой будет получена геометрия маршрута, геометрия будет генерализована с учетом масштаба. Если параметр не задан, будет получена геометрия всего маршрута. |
Пример использования
const geom = await nmapi.route.routeGeometry({ routeId, viewport: { widthPx: 640, heightPx: 480, zoomLevel: 9, centerCoordinates: { latitude: 55.75, longitude: 37.70, }, }, })
