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

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

Чтобы начать работу с MapGL JS API, ознакомьтесь с основными сценариями использования карты и выполните следующие шаги:

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

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

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

Примечание

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

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

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

При помощи тега script​

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

<script src="https://mapgl.2gis.com/api/js/v1"></script>

Библиотека добавит глобальную переменную mapgl. Полный список доступных методов переменной см. в Справочнике API.

При помощи npm​

Если вы используете npm, подключите библиотеку с помощью пакета @2gis/mapgl:

import { load } from '@2gis/mapgl';
// or const { load } = require('@2gis/mapgl');

load().then((mapgl) => {
    const map = new mapgl.Map('container', {
        center: [37.61565, 55.76801],
        zoom: 13,
        key: 'Your API access key',
    });
});

Чтобы использовать MapGL JS API, который установлен в On-Premise окружении, дополнительно укажите адрес сервиса:

load('http://mapgl-js-api.example.com/api/js').then((mapgl) => {
    const map = new mapgl.Map('container', {
        center: [37.61565, 55.76801],
        zoom: 13,
        key: 'Your API access key',
    });
});

Асинхронная загрузка​

Чтобы загрузить карту асинхронно, укажите атрибуты async и defer при загрузке библиотеки. Укажите в параметре callback в строке запроса имя функции, которая будет вызвана после загрузки библиотеки:

<script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
<script>
    function initMap() {
        const map = new mapgl.Map('container', {
            center: [37.61565, 55.76801],
            zoom: 13,
            key: 'Your API access key',
        });
    }
</script>

При помощи system.js​

При использовании карты совместно с system.js используйте System.import:

System.import('https://mapgl.2gis.com/api/js/v1').then((mapgl) => {
    const map = new mapgl.Map('container', {
        center: [37.61565, 55.76801],
        zoom: 13,
        key: 'Your API access key',
    });
});

Примечание

Вы также можете использовать MapGL JS API в проектах на React.

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

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

<div id="container"></div>

Укажите размеры контейнера для карты:

<style>
    #container {
        width: 500px;
        height: 300px;
    }
</style>

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

const map = new mapgl.Map('container', {
    key: 'Your API access key',
    center: [37.61565, 55.76801],
    zoom: 13,
});

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

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

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

const marker = new mapgl.Marker(map, {
    coordinates: [37.61565, 55.76801],
});

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

Пример использования​

Вы также можете поработать с готовой картой в песочнице (авторизация не требуется).

Что дальше?​