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

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

Чтобы начать работу с RasterJS API, выполните следующие шаги:

  1. Получите ключ доступа.
  2. Подключите библиотеку RasterJS API к вашему проекту.
  3. Инициализируйте карту.
  4. (Опционально) Добавьте маркер на карту.

1. Получите ключ доступа​

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

Примечание

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

Работать с ключами можно в Менеджере Платформы: подробнее см. в документации личного кабинета.

2. Подключите библиотеку​

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

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

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

3. Инициализируйте карту​

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

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

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

<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.

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

4. Добавьте маркер​

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

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

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

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

Полный список параметров маркера см. в Справочнике 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>

Что дальше?​