Начало работы
Чтобы начать работу с MapGL JS API:
- Получите ключ доступа.
- Добавьте библиотеку MapGL JS API в свой проект.
- Инициализируйте карту.
- (Опционально) Добавьте объект на карту (например, маркер).
1. Получите ключ доступа
Чтобы работать с API сервиса, нужно получить ключ доступа:
- Зарегистрируйтесь в личном кабинете Platform Manager.
- Создайте демо-ключ или купите ключ для доступа к API: см. инструкцию Ключи доступа.
Работать с ключами можно в личном кабинете Platform Manager: подробнее см. в разделе Platform Manager.
2. Подключите библиотеку
При помощи тега script
Чтобы подключить библиотеку MapGL JS API, добавьте следующую строку в код страницы:
<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((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.js следует воспользоваться конструкцией System.import
:
System.import('https://mapgl.2gis.com/api/js/v1').then((mapgl) => {
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
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() и указав идентификатор контейнера и ваш ключ доступа. Вы также можете указать начальные координаты карты и нужный масштаб. Полный список параметров можно найти в Справочнике API.
const map = new mapgl.Map('container', {
key: 'Your API access key',
center: [55.31878, 25.23584],
zoom: 13,
});
4. Добавьте маркер
Чтобы добавить маркер на карту, нужно вызвать метод 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>
Что дальше?
- Примените дополнительные настройки для удобного взаимодействия с картой.
- Настройте внешний вид карты и правила отрисовки объектов при помощи стилей.
- Добавьте объекты на карту поштучно или подключите источник данных с множеством объектов.