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

RasterJS API

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

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

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

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

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

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

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

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

Чтобы получить ключ доступа и работать с API сервиса, обратитесь в отдел продаж 2ГИС.

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

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

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

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

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

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

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

Чтобы инициализировать карту, вызовите метод DG.map(), укажите идентификатор контейнера и ваш ключ доступа. Вы также можете указать начальные координаты карты и нужный масштаб. Полный список параметров см. в Справочнике 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.

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>RasterJS API</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></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>

Что дальше?​