xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Модуль Geofield Yandex Maps — ввод и вывод гео-информации на Яндекс.Картах 2.1

Описание

Модуль Geofield Yandex Maps — это набор инструментов для ввода и вывода гео-информации на Яндекс.Картах версии 2.1. Модуль работает в связке с Geofield 2.x и добавляет:

  • Виджет для ввода
  • Форматтер для вывода
  • Views хэндлер для вывода нескольких объектов на одной карте
  • Текстовый фильтр для вставки карт в текст
  • Theme-функцию для лёгкого вывода карты с помощью PHP
  • Элемент формы для использования карты в своих формах

Поддерживаемая геометрия — точки, линии, полигоны.

Установка и использование

Установка стандартная — распаковать в sites/all/modules, включить.

Использование виджета

Добавляем сущности поле Geofield. Выбираем в качестве виджета Yandex Map:

Настраиваем по вкусу:

Результат:

Использование форматтера

В настройках отображения поля выбираем форматтер Yandex Map:

Настраиваем:

Результат:

Демо.

Использование Views хэндлера

Добавляем представление по материалам, с дисплеем Page и форматом Yandex Map выводящим поля:

Добавляем в представление поле Geofield в названии которого есть суффикс (GeoObject):

Добавляем любые другие поля. Они будут выводиться при клике на объекте.

Настраиваем формат:


Результат:

Демо (работает с AJAX!).

Использование текстового фильтра

В настройках текстового формата включаем фильтр Yandex Map. Изменяем порядок фильтров так, чтобы Yandex Map оказался первым:

Настраиваем по желанию:

На странице настроек модуля admin/config/system/geofield-ymap включаем опцию Use loader.

Для вставки карты в текст используем тег [map][/map]. Пример вставки карты с одной точкой:

[map]{"type":"Point","coordinates":[37.62,55.75]}[/map]

Пример вставки карты с переопределёнными настройками:

[map zoom=10 auto-zooming=0]{"type":"Point","coordinates":[37.62,55.75]}[/map]

Объекты описываются в формате GeoJSON.

Демо.

Использование theme-функции

Пример создания карты с одной точкой:

$map = array(
  '#theme' => 'geofield_ymap',
  '#map_type' => 'yandex#map', // optionaly, default 'yandex#map'
  '#map_center' => array(37, 55), // optionaly, default 0,0
  '#map_zoom' => 12, // optionaly, default 0 and auto zooming
  '#map_auto_centering' => TRUE, // optionaly, default FALSE
  '#map_auto_zooming' => TRUE, // optionaly, default FALSE
  '#map_clusterize' => TRUE, // optionaly, default FALSE
  '#map_objects' => '{"type":"Point","coordinates":[37.62,55.75]}', // GeoJSON, optionaly
);
$output = render($map);

Демо.

Использование карты в своей форме

$form['location'] = array(
  '#type' => 'geofield_ymap',
  '#title' => 'Location',
  '#description' => 'Select control and click to map for add object on map. Double click on object to remove it.',
  '#map_multiple' => TRUE,
  '#map_center' => array(55.733835, 37.588227),
  '#map_zoom' => 12,
  '#map_auto_centering' => TRUE,
  '#map_object_types' => array('point', 'line', 'polygon'),
);

В #map_object_types перечисляются названия объектов, которые сможет добавлять пользователь. После сабмита в $form_state['values']['location'] будет массив со значениями:
objects - объекты в GeoJSON
center - центр карты
zoom - зум карты

Демо.

Создание карты из html кода

Добавляем в текст:

<div class="geofield-ymap" data-map-objects='{"type":"Point","coordinates":[37,55]}'></div>

В настройках модуля admin/config/system/geofield-ymap включаем опцию Use loader.

Демо.

Создание карты с помощью javascript

ymaps.ready(function () {
  // for <div id="my-map" style="width:100%; height:400px;"></div>
  var map = Drupal.geofieldYmap.mapInit('my-map', {
    objects: '{"type":"Point","coordinates":[37.62,55.75]}',
    autoCentering: true,
    autoZooming: true
  });
});

Перед использованием не забываем подключить библиотеку:

drupal_add_library('geofield_ymap', 'geofield_ymap');

Демо.

Доступ к созданной карте из Javascript

Все объекты карт находятся в переменной Drupal.geofieldYmap.data['id-карты'].map. Объекты доступны по событию yandexMapInit:

// Доступ к определённой карте
$('#id-карты').bind('yandexMapInit', function (event, map) {
  // ...
});
 
// Доступ ко всем картам
$(document).bind('yandexMapInit', function (event, map) {
  // ...
});

Полезные ссылки:
Визуальный генератор GeoJSON
Определение координат (координаты идут в обратном порядке)
Сюда можно писать о багах и новых фичах

Полезные статьи:
Как быстро отрисовать 10000 меток на карте и не затормозить всё вокруг
Тепловые карты в API Яндекс.Карт
Метки кластера в виде круговой диаграммы

Написанное актуально для Geofield Yandex Maps 7.x-1.x-dev
Похожие записи

Комментарии RSS

Здравствуйте! Спасибо за очень полезный модуль. Я использую ее для своего модуля (в своей форме). Скажите, можно ли вывести форму поиска за пределы карты (над картой) и сделать ее всегда видимой?

Вопрос не касается модуля. https://yandex.ru/blog/ymapsapi/1501

Здраствуйте, xandeadx. Ваш модуль очень хороший. Но есть одна загвоздка. Я добавила карту на страницу ноды. Сейчас мне надо убрать карту у этой ноды, как мне это сделать. При редактировании стоит виджет "Яндекс Карта", непонятно как убрать карту.

Смею предположить, что как добавили, так и уберите. В чём сложность?

При создании материала в поле сразу стоит карта, не до не после нее нет никаких элементов управления (на вроде кнопки "удалить"). На самой карте можно установить маркер. А вот удалить его с это карты нельзя, можно только передвинуть. Что я делею не так или что я не вижу/не додумалась?

Для удаления объекта с карты, нужно сделать по нему двойной клик. Об этом написано в описании к карте.

о_О работает, спасибище! Но где черт побери это написано? Я всю инфу по модулю перелопатила прежде чем сюда писать, вас беспокоить, но ничего подобного не нашла... :(

У виджета действительно по умолчанию не написано. Только у элемента формы.

А возможно ли покрасить полигон при выводе через views? (цвет брать из поля ноды)
Например есть 5 нод, в каждой свой полигон а в отдельном поле свой цвет (hex, rgba)

Или же, чтобы полигоны (выведенные вьюхой) хоть как-то отличались друг от друга(цвет фона, цвет бордера, цифра)

Спасибо

Как можно покрасить карту (дороги, дома и прочее) в свои цвета?

никак

Я хочу добавить карту в профиль юзера.
Добавил новое поле (все, как в статье). На странице редактирования карта есть. Но после ее заполнения (например, указания точки) она не появляется на странице пользователя. Что не так?
Если нужно, то вот сайт: http://avtorazborki03.ru

очень нужен порт на d8.. есть что-нибудь такое в планах? очень удобно все реализовано

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании