MapGL JS API
MapGL JS API - это JavaScript-библиотека, при помощи которой вы можете добавить карту 2GIS в ваше веб-приложение или сайт.
Библиотека позволяет:
- Добавлять трехмерную карту, использующую технологию WebGL и картографические данные 2GIS, в веб-приложения и сайты.
- Вращать, наклонять и масштабировать карту при помощи мыши или сенсорных жестов.
- Отображать планы этажей торговых центров и аэропортов.
- Настраивать внешний вид карты с помощью редактора стилей.
- Добавлять на карту одиночные маркеры и группы маркеров.
- Добавлять текстовые метки и рисовать геометрические фигуры.
- Строить автомобильные и пешеходные маршруты.
- Добавлять попапы и подсказки к объектам на карте.
- Настраивать элементы управления карты.
Картографические данные поддерживают стандарты OGC.
⚠ Используйте только описанные в документации поля и методы
MapGL JS API
. Мы не гарантируем обратную совместимость для недокументированных возможностей.
Получение ключа доступа
Перед использованием библиотеки нужно получить ключ доступа к API. Чтобы его получить, заполните форму на dev.2gis.ru/order.
Подключение библиотеки MapGL JS API
При помощи тега 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',
});
});
При помощи system.js
При использовании карты совместно с 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>