Перейти к основному содержимому

Raster Tiles API

Сервис Raster Tiles API позволяет добавить растровую карту 2ГИС в мобильное или веб-приложение. Он возвращает изображения тайлов в формате PNG, с помощью которых можно отобразить карту в интерфейсе.

Вы можете выбрать способ интеграции сервиса в зависимости от ваших задач:

Начало работы​

Получение ключа​

  1. Зарегистрируйтесь в личном кабинете Менеджер Платформы.
  2. Создайте демо-ключ или купите подписку для доступа к API. Подробнее о стоимости сервиса см. в разделе Тарифы.

Примечание

Если у вас уже есть действующий API-ключ, полученный для RasterJS API, вы можете использовать его и с Raster Tiles API до истечения срока действия подписки. Срок действия можно посмотреть в личном кабинете, на вкладке Главная.

Использование endpoint-а​

При использовании сторонних библиотек вы можете указать endpoint, по которому будут загружаться изображения тайлов:

https://tile{n}.maps.2gis.com/v2/tiles/{tileset}/{z}/{x}/{y}.png?key={key}

Здесь:

  • n — номер хоста. Может иметь значение от 0 до 4. Вы можете использовать один хост, если у вас небольшой объём трафика, или распределять запросы между несколькими хостами самостоятельно.
  • tileset — набор тайлов. Например, online_hd для тайлов в высоком разрешении или online_sd для тайлов в стандартном разрешении.
  • z — масштаб карты. Чем больше число, тем подробнее карта.
  • x, y — координаты тайла.
  • key — ваш API-ключ.

Пример запроса​

https://tile0.maps.2gis.com/v2/tiles/online_hd/16/47851/20734.png?key=YOUR_KEY

Использование библиотеки RasterJS API​

RasterJS API — это бесплатная JavaScript-библиотека, с помощью которой вы можете добавить двумерную карту 2ГИС на ваш сайт. Библиотека содержит готовый набор инструментов для интерактивного взаимодействия с картой, автоматически запрашивает растровые тайлы и отображает их на странице.

Библиотека позволяет:

  • создавать интерактивные карты на веб-странице;
  • показывать на карте маркеры, попапы и геометрические объекты;
  • определять координаты геообъектов по их названиям и названия по координатам.

Вы можете посмотреть примеры использования библиотеки в разделе Примеры.

Исходный код RasterJS API доступен на GitHub, проект открыт к предложениям и пулл-реквестам.

Чтобы использовать сервис Raster Tiles API с библиотекой RasterJS API, после получения API-ключа:

  1. Подключите библиотеку.
  2. Инициализируйте карту.
  3. Добавьте маркер на карту.

Подключение библиотеки​

Добавьте следующую строку в код HTML-страницы:

 <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&key=YOUR_KEY"></script>

Если вы используете npm, см. раздел Подключение API.

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

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

<body>
    <div id="map" style="width:500px; height:400px"></div>
</body>

Чтобы инициализировать карту, вызовите метод DG.map(), укажите идентификатор контейнера и ваш ключ доступа. Вы также можете указать начальные координаты карты и нужный масштаб. Полный список параметров см. в Справочнике для RasterJS API.

<script type="text/javascript">
    var map;

    DG.then(function () {
        map = DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13,
            key: 'Your API access key',
        });
    });
</script>

Здесь:

  • center — координаты центра карты в формате [широта, долгота];
  • zoom — масштаб карты в диапазоне от 1 до 18.

Добавление маркера​

Чтобы добавить маркер на карту, вызовите метод DG.marker(), указав инстанс карты и координаты для маркера:

DG.marker([54.98, 82.89]).addTo(map);

Чтобы добавить на карту попап (всплывающий блок) с необходимой информацией, который будет отображаться при клике на маркер:

DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');

Полный список дополнительных параметров для маркера см. в Справочнике для RasterJS API.

Пример​

Результирующий код:

<!DOCTYPE html>
<html>
    <head>
        <title>Raster Tiles API</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&key=<YOUR_KEY>"></script>
        <script type="text/javascript">
            var map;

            DG.then(function () {
                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13,
                    key: 'Your API access key',
                });

                DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');
            });
        </script>
    </head>
    <body>
        <div id="map" style="width:500px; height:400px"></div>
    </body>
</html>

Статистика​

При исчерпании лимитов сервис станет недоступен. Вы можете отслеживать расходование лимитов в подписке и статистику распределения запросов к сервису в личном кабинете. Подробнее об инструментах статистики см. в разделе Статистика.

Тарифы​

  • Стоимость сервиса рассчитывается исходя из количества успешных запросов в месяц.
  • Актуальные тарифы можно посмотреть в Менеджере Платформы.

Что дальше?​