Skip to content

Latest commit

 

History

History
159 lines (112 loc) · 13.2 KB

README_RU.md

File metadata and controls

159 lines (112 loc) · 13.2 KB
Raw

StagiMap

StagiMap является простым и дружелюбным конфигуратором для Яндекс.Карты. Цель данной библиотеки - предоставить любому разработчику простой способ настройки и внедрения карт на сайте, где неохобходимо показать контактную информацию, без надобности изучения API-документации. С помощью данной библиотеки, в несколько строк возможна концигурация Яндекс.Карты с поддержкой кластеризации, навигации, скрытием/отображением данных на карте и др.

ВАЖНО: StagiMap базируется на версии 2.1.XX API Яндекс.Карты и зависит от жизненного цикла данной версии. Данная библиотека не создана для полноценной работы с API и поддерживает только ограниченные фунции API Яндекс.Карты.

Приемущества данной библиотеки:

  • Настройка и рендер карты через несколько строк кода
  • Простое и быстрое добавление данных на карту
  • Настройка кластеризации через одну переменную
  • Возможность управления картой снаружи через HTML-элементы
  • Простая группировка точек
  • Простое создание маршрутов и точек в пути
  • Простое управления стилями элементов на карте
  • Конфигурирование элементов управления

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

Демо

Данный проект включает в себя React-приложение, которое может быть запущено, через следующую команду

npm start

Вы можете использовать это в качестве примера или для дальнейшей разработки поверх данного проекта.

Генерация библиотеки для использования в собственном проекте

Чтобы сгенерировать конечную версию StagiMap, запустите следующую команду

npm run bundle

Результат - минифицированная версия библиотеки, расположенная в dist директории. Вы можете импортировать данную версию в свой проект для начала работы.

Концигурация и инициализация

Экземпляр класса StagiMap должен быть создан с параметрами, которые определят конфигурацию отображаемой карты.

import '../stagimap.min';

const map = new StagiMap({
  ...smOptions,
});

Система координат используется в следующем формате coordinateds = [LATITUDE, LONGITUDE].

Авторизация

Для полноценного использования Вам необходим Яндекс-аккаунт, чтобы создать ключ доступа к API.

Параметр Формат Описание
smOptions.apiKey string задает используемый ключ доступа к API Яндекс.Карты

Локализация

Вам необходимо определить локализацию карты в RFC-3066 формате (Получить информацию о поддерживаемых локализация можно по следующей ссылке - tech.yandex.com/maps/doc/intro/concepts/localization-docpage. Если локализация не задана, en будет использована по-умолчанию.

Параметр Формат Описание
smOptions.locale RFC-3066 задает локализацию карты

Главные параметры

Главные параметры необходимы для правильного функционирования карты и включают в себя центер карты, рабочую зону, минимальный, максимальный и начальный масштаб.

Параметр Формат Описание
smOptions.containerId string выбирает DIV элемент на HTML шаблоне, через id-атрибут, для рендеринга карты
smOptions.center coordinateds задает координаты центра карты
smOptions.restrictArea [coordinateds, coordinateds] ограничивает рабочую зону карты через координаты верхнего-левого и правого-нижнего углов зоны (опционально)
smOptions.initialZoom integer задает начальный масштаб в диапазоне 1 ... 16
smOptions.maxZoom integer задает максимальный масштаб в диапазоне 1 ... 16
smOptions.minZoom integer задает минимальный масштаб в диапазоне 1 ... 16

Zoom buttons

Возможность настройки кнопок масштабирования карты.

Параметр Формат Описание
smOptions.zoomButtons.inButton url задает изображение для кнопки "Увеличить масштаб"
smOptions.zoomButtons.inText string задает текстовую подсказку для кнопки "Увеличить масштаб"
smOptions.zoomButtons.inStyle string задает стилизацию для кнопки "Увеличить масштаб", к примеру, width: 30px; height: 30px; border-radius: 0px 0px 20px 20px;
smOptions.zoomButtons.inPosition {top: integer, left: integer} задает позиционирование для кнопки "Увеличить масштаб"
smOptions.zoomButtons.outButton url задает изображение для кнопки "Уменшить масштаб"
smOptions.zoomButtons.outText string задает текстовую подсказку для кнопки "Уменшить масштаб"
smOptions.zoomButtons.outStyle string задает стилизацию для кнопки "Уменшить масштаб", к примеру, width: 30px; height: 30px; border-radius: 0px 0px 20px 20px;
smOptions.zoomButtons.outPosition {top: integer, left: integer} задает позиционирование для кнопки "Уменшить масштаб"

Geolocation button

Ability to set and customize geolocation buttons.

Параметр Формат Описание
smOptions.geolocation.geoButton url задает изображение для кнопки "Местоположение"
smOptions.geolocation.geoText string задает текстовую подсказку для кнопки "Местоположение"
smOptions.geolocation.geoStyle string задает стилизацию для кнопки "Местоположение", к примеру, width: 30px; height: 30px; border-radius: 0px 0px 20px 20px;
smOptions.geolocation.geoPosition {top: integer, left: integer} задает позиционирование для кнопки "Местоположение"
smOptions.geolocation.icon url задает изображение для иконки "Местоположение" на карте
smOptions.geolocation.sizePoint [integer, integer] задает размер иконки "Местоположение" [WIDTH, HEIGHT]
smOptions.geolocation.offsetPoint [integer, integer] задает отступ иконки "Местоположение" [L-OFFSET, T-OFFSET]

Кластеризация

Параметр Формат Описание
smOptions.cluster boolean объединяет точки на карте в кластер в зависимости от масштаба

Точки на карте

Точки могут быть добавлены на карту через параметр smOptions.data, основываясь на изложенной схеме.

Параметр Формат Описание
smOptions.data[i].coordinates coordinateds задает центр точки на карте
smOptions.data[i].html string задает контент для балуна точки как текст или HTML-строка
smOptions.data[i].title string задает заголок для балуна точки
smOptions.data[i].icon url задает изображение для иконки точки на карте
smOptions.data[i].sizePoint [integer, integer] задает размер иконки точки [WIDTH, HEIGHT]
smOptions.data[i].offsetPoint [integer, integer] задает отступ иконки точки [L-OFFSET, T-OFFSET]
smOptions.data[i].group string задает группу точки, если необходимо

Routes

Маршрутизатор позволяет строить на карте мультимаршруты между заданными точками.

Параметр Формат Описание
smOptions.router.startPoint coordinateds задает координаты начальной точки пути
smOptions.router.endPoint coordinateds задает координаты конечной точки пути
smOptions.router.maxWays integer задает максимальное количество возможных маршрутов между точками
smOptions.router.refPoints [coordinateds] задает координаты промежуточных точек на заданном пути

Траффик

Возможность отображения траффика на дорогах доступна только для объектов на территории России, Беларуси, Казахстана и Турции.

Параметр Формат Описание
smOptions.traffic boolean включает на карте слой с отображение траффика на дорогах

Интеграция с HTML шаблоном

Указанные HTML атрибуты могут быть использованы на элементах шаблоны для управления картой снаружи.

Параметр Формат Описание
sm-point index сдвигает центр карты к заданной точке по ее индексу в массиве smOptions.data
sm-move integer, integer сдвигает центр карты к заданным координатам (долгота и широта), к примеру, sm-move="0, 0"
sm-show string меняет видимость точек, через заданную группу, для точек с указанной группой smOptions.data[i].group. Если идентификатор группы не задан на атрибуте, отображает все группы при клике на элемент.