Профиль
Заметки
Мир вокруг
Решения

Maks Takeda

Wonderful2x

StagiMap Beta

Скачать с GitHub

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

Основные возможности библиотеки

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

Пример

...
<div id="stagimap"></div>
<script src="stagimap.js?lang=en" type="text/javascript"></script>
<a href="#" sm-point="0">Переместиться к метке 1</a>
<a href="#" sm-point="1">Переместиться к метке 2</a>
<a href="#" sm-move="0, 0">Переместиться к координатам [0, 0]</a>
<a href="#" sm-show="0">Показать группу 1</a>
<a href="#" sm-show="1">Показать группу 2</a>
<a href="#" sm-show>Показать все метки</a>
...
Переместиться к метке 1 Переместиться к метке 2 Переместиться к координатам [0, 0] Показать группу 1 Показать группу 2 Показать все метки

Работа с библиотекой

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

Для начала работы достаточно скачать библиотку и добавить ее в любой участок кода. Отдельно код Яндекс.Карт вставлять на страницу нет необходимости - библиотека его включает при инициализации. В качестве параметра при подключении необходимо указать локализацию согласно RFC-3066. Например,

<script crossorigin src=".../stagimap.js?lang=en"></script></code>

Карта будет подключена в блок с id="stagimap", для которого предварительно необходимо задать ширину и высоту.

2. Настройка Яндекс.Карты

Для настройки и конфигурации карты используется обычный объект JavaScript, который может быть включен в любой участок кода. Имя переменной - smOptions.

smOptions = {};

Вся настройка карты осуществляется через данный объект. При наличии недостающего свойства - свойство берется из значений по-умолчанию.

2.1. Задание основных параметров

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

smOptions.center
задание географических координат центра отображаемой карты. Принимаются значения в виде массива, например [34.4481, -119.2429].
smOptions.restrictArea
задания границ карты (ограничение перемещения) в виде прямоугольной области. Указываются значения координат двух крайних точек прямоугольника в виде многомерного массива, например [[60.055334,30.038404], [59.812399,30.484037]].
smOptions.initialZoom
начальный масштаб карты. Принимаются числовые значения от 1 до 16.
smOptions.maxZoom
ограничение максимально возможного масштаба карты. Принимаются числовые значения от 1 до 16.
smOptions.minZoom
ограничение минимально возможного масштаба карты. Принимаются числовые значения от 1 до 16.

2.2. Настройка элементов управления

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

2.2.1. Настройка элементов управления

smOptions.zoomButtons
- определяет отображение элементов управления масштабом карты. Принимаются значения в виде объекта, который включает в себя свойства:

smOptions.zoomButtons.inButton
задает собственное изображение для кнопки управления увеличением масштаба. Принимает адрес изображения в виде строки.
smOptions.zoomButtons.inText
задает всплывающую подсказку при наведении на кнопку управления увеличением масштаба. Принимает текстовое значение в виде строки.
smOptions.zoomButtons.inStyle
определяет собственные стили для элемента управления увеличением масштаба. Принимаются значения в виде строки, например 'width: 30px; height: 30px; border-radius: 20px 20px 0px 0px;'.
smOptions.zoomButtons.inPosition
задает положение кнопки управления увеличением масштаба. Принимает значение в виде объекта, например {top: 320, left: 25}.
smOptions.zoomButtons.outButton
задает собственное изображение для кнопки управления уменьшением масштаба. Принимает адрес изображения в виде строки.
smOptions.zoomButtons.outText
задает всплывающую подсказку при наведении на кнопку управления уменьшением масштаба. Принимает текстовое значение в виде строки.
smOptions.zoomButtons.outStyle
определяет собственные стили для элемента управления уменьшением масштаба. Принимаются значения в виде строки, например 'width: 30px; height: 30px; border-radius: 0px 0px 20px 20px;'.
smOptions.zoomButtons.outPosition
задает положение кнопки управления уменьшением масштаба. Принимает значение в виде объекта, например {top: 350, left: 25}.
2.2.2. Настройка элемента определения местоположения пользователя

smOptions.geolocation
- отвечает за настройку элемента определения местоположения пользователя. Принимаются значения в виде объекта, который включает в себя свойства:

smOptions.geolocation.geoButton
задает собственное изображение для кнопки определения местоположения пользователя. Принимает адрес изображения в виде строки.
smOptions.geolocation.geoText
задает всплывающую подсказку при наведении на кнопку определения местоположения пользователя. Принимает текстовое значение в виде строки.
smOptions.zoomButtons.geoStyle
определяет собственные стили для кнопки определения местоположения пользователя. Принимаются значения в виде строки, например 'width: 30px; height: 30px; border-radius: 0px 0px 20px 20px;'.
smOptions.geolocation.geoPosition
задает положение кнопки определения местоположения пользователя. Принимает значение в виде объекта, например {top: 250, left: 10}.
smOptions.geolocation.icon
задает изображение для метки местоположения пользователя. Принимает адрес изображения в виде строки.
smOptions.geolocation.sizePoint
определяет размеры метки местоположения пользователя. Принимает массив с значениями ширины и высоты, например [47, 52].
smOptions.geolocation.offsetPoint
определяет смещение метки местоположения пользователя. Принимает массив с смещением по ширине и высоте, например [-24, -52].

2.3. Работа с объектами на карте

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

smOptions.cluster
делает возможным объединение близко расположенных меток в группу (создание кластера). Принимаются выражения логического типа - true или false.
2.3.2. Нанесение меток на карту

smOptions.data - принимает массив объектов, где каждый объект может иметь следующие свойства, характеризующие параметры отображения каждой метки и балуна метки: { coordinates: ..., html: ..., title: ..., group: ... }

smOptions.data[i].coordinates
задание географических координат метки. Принимаются значения в виде массива, например [34.4481, -119.2429].
smOptions.data[i].html
задает разметку и содержимое балуна метки. Принимает код в виде строки.
smOptions.data[i].title
задает разметку и содержимое заголовка при кластеризации. Принимает код в виде строки.
smOptions.data[i].icon
задает изображение для конкретной метки. Принимает адрес изображения в виде строки.
smOptions.data[i].sizePoint
определяет размеры конкретной метки. Принимает массив с значениями ширины и высоты, например [47, 52].
smOptions.data[i].offsetPoint
определяет смещение конкретной метки. Принимает массив с смещением по ширине и высоте, например [-24, -52].
smOptions.data[i].group
служит при необходимости для группировки точек по конкретной тематике. Принимает любые строковые или числовые значения.

2.4. Создание мультимаршрутов

smOptions.router - определяет условия для построения мультимаршрута из одной точки в другую. Принимает объект, в котором указываются необходимые параметры:

smOptions.router.startPoint
задает начальную точку движения. Принимает значения в виде массива с координатами - [34.4481, -119.2429] или в виде строки с ближайшим к точке адресу - 'Пермь, ул. Монастырская'.
smOptions.router.endPoint
задает конечную точку движения. Принимает значения в виде массива с координатами - [34.4481, -119.2429] или в виде строки с ближайшим к точке адресу - 'Пермь, ул. Монастырская'.
smOptions.router.maxWays
максимально возможное количество построенных маршрутов от начальной до конечной точки. Принимает целые числовые значения.
smOptions.router.refPoints
трсанзитные точки, через которые будет осуществляться движениею Принимает многомерный массив, элементы которого являются координатами необходимых точек, например [[37.771951, -116.637113], [39.102605, -119.735258]].

2.5. Отображение ситуации на дорогах

Для городов России, Белоруссии, Украины, Казахстана, Турции возможно отображение реальной ситуации на дорогах.

smOptions.traffic - включает, по-возможности, режим уации на отображения реальной ситуации на дорогах. Принимаются выражения логического типа - true или false.

3. Интеграция карты с элементами HTML на странице

Каждой ссылке могут быть присвоены дополнительные атрибуты, которые делают простым управление объектами на карте и само взаимодействие с ней.

sm-point - атрибут, который позволяет при клике переместиться к заданной метке на карте. Принимает числовое значение, соответствующее порядковому номеру метки в массиве smOptions.data, например sm-point="0".

sm-move - атрибут, который позволяет при клике переместиться к заданным координатам на карте. Принимает числовые значения, соответствующии географическим координатам, например sm-move="0, 0".

sm-show - атрибут, которые позволяет отбирать необходимые для отображения метки на карте, согласно группировки из smOptions.data[i].group. Принимает значение, аналогичное тому, которое было передано в smOptions.data[i].group для определенной метки (группы меток), если не передавать значения и оставить атрибут без значения - при клике отобразятся все имеющиеся метки из smOptions.data.