MapGL JS API | 2GIS Documentation
MapGL JS API

MapGL JS API

MapGL JS API — это JavaScript-библиотека, при помощи которой вы можете добавить карту 2GIS в ваше веб-приложение или сайт.

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

Картографические данные поддерживают стандарты OGC.

Важно

Используйте только описанные в документации поля и методы MapGL JS API. Обратная совместимость для недокументированных возможностей не гарантирована.

Чтобы получить ключ для работы с API:

  1. Зарегистрируйтесь в личном кабинете Platform Manager.
  2. Создайте демо-ключ (если вы еще не пользовались продуктами 2ГИС) или запросите боевой ключ по ссылке для связи с менеджером на вкладке Ключи API.

В личном кабинете вы также можете:

  • Просматривать информацию по своим уже созданным ключам: какие сервисы подключены, какой лимит задан по каждому из них, когда ключ будет деактивирован.
  • Задавать ограничения на ключ по HTTP-заголовкам или по IP и подсетям.
  • Изучать статистику распределения запросов по каждому ключу.
  • Поработать с готовой трёхмерной интерактивной картой в песочнице.

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

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

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

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

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

load().then((mapglAPI) => {
    const map = new mapglAPI.Map('container', {
        center: [55.31878, 25.23584],
        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: [55.31878, 25.23584],
            zoom: 13,
            key: 'Your API access key',
        });
    }
</script>

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

const mapgl = System.import('https://mapgl.2gis.com/api/js/v1');

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

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

Так как карта будет помещена внутрь этого элемента, нужно указать его размеры:

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Quickstart with 2GIS Map API" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
                style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b'
            });
            const marker = new mapgl.Marker(map, {
                coordinates: [55.31878, 25.23584],
            });
        </script>
    </body>
</html>