RasterJS API
RasterJS API — это JavaScript-библиотека, при помощи которой вы можете добавить двумерную карту 2ГИС на ваш сайт.
Библиотека позволяет:
- Создавать интерактивные карты на веб-странице.
- Показывать на карте различные объекты: маркеры, попапы, геометрические объекты.
- Производить поиск на карте: определять координаты геообъектов по их названиям и названия по координатам.
Исходный код RasterJS API доступен на GitHub, проект открыт к предложениям и пулл-реквестам.
Начало работы
Чтобы начать работу с RasterJS API, выполните следующие шаги:
- Получите ключ доступа.
- Добавьте библиотеку RasterJS API в свой проект.
- Инициализируйте карту.
- (Опционально) Добавьте объект на карту (например, маркер).
1. Получите ключ доступа
Чтобы получить ключ доступа и работать с API сервиса, обратитесь в отдел продаж 2ГИС.
2. Подключите библиотеку
Чтобы подключить библиотеку RasterJS API, добавьте следующую строку в код HTML-страницы:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
Если вы используете npm, см. раздел Подключение API.
3. Инициализируйте карту
Чтобы отобразить карту на странице, создайте HTML-элемент, который будет выступать в роли контейнера, и укажите его размеры:
<body>
<div id="map" style="width:500px; height:400px"></div>
</body>
Чтобы инициализировать карту, вызовите метод DG.map(), укажите идентификатор контейнера и ваш ключ доступа. Вы также можете указать начальные координаты карты и нужный масштаб. Полный список параметров см. в Справочнике API.
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
key: 'Your API access key',
});
});
</script>
Здесь:
center
— координаты центра карты в формате[широта, долгота]
;zoom
— масштаб карты в диапазоне от 1 до 18.
4. Добавьте маркер
Чтобы добавить маркер на карту, вызовите метод DG.marker(), указав инстанс карты и координаты для маркера:
DG.marker([54.98, 82.89]).addTo(map);
Чтобы добавить на карту попап (всплывающий блок) с необходимой информацией, который будет отображаться при клике на маркер:
DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');
Полный список дополнительных параметров для маркера см. в Справочнике API.
Пример
Результирующий код:
<!DOCTYPE html>
<html>
<head>
<title>RasterJS API</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
key: 'Your API access key',
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');
});
</script>
</head>
<body>
<div id="map" style="width:500px; height:400px"></div>
</body>
</html>