Подключение API | RasterJS API | 2GIS Documentation
RasterJS API

Подключение API

Работа с картой возможна только после того, как в браузер будет загружен код API карт. Есть несколько способов его загрузки.

Сперва подключим API карт, поместив в секцию head HTML-страницы следующий код:

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

Затем воспользуемся функцией DG.then, в которую поместим код инициализации карты:

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

Внутри себя эта функция добавляет обработчик события загрузки страницы. Именно такой способ рассматривался в разделе Быстрый старт.

API карт можно подключить через npm:

$ npm i 2gis-maps

После установки пакета подключим его через require:

var DG = require('2gis-maps');
var map = DG.map('map', {
    center: [54.98, 82.89],
    zoom: 13,
});

Обратите внимание, что при использовании npm-пакета использовать DG.then не нужно.

Вы можете загрузить API карт именно в тот момент, когда карта станет нужна. Для этого в URL подключения API необходимо добавить параметр lazy=true:

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

Затем в нужный момент времени (например, при нажатии на кнопку) необходимо вызвать функцию DG.then:

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

Ниже описаны все опции, которые может принимать URL загрузки API карт:

Опция По умолчанию Описание
pkg full Пакет загружаемых модулей. На данный момент поддерживается 2 пакета: full — все модули API; basic — базовая функциональность (попапы, маркеры, векторные объекты).
skin dark Тема управляющих элементов (светлая или темная). Принимает значение light или dark.
lazy false Если указать значение true, тогда API карт загрузится отложенно, при первом вызове DG.then.

Как было описано ранее, функция DG.then отвечает за отслеживание момента загрузки API карт и добавление обработчиков этого действия. Параметры функции:

Вызов Возвращает Описание
DG.then( <Function> resolve, <Function> reject ) Promise Регистрирует обработчики загрузки API. Пареметры: resolve — функция, срабатывающая при успешной загрузке API карт, reject — функция, срабатывающая в случае ошибки сервера.

Вызов функции DG.then в любой момент после загрузки API мгновенно выполнит обработчик.