xandeadx.ru
Блог друпал девелопера

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

15.12.2013

Версия для Drupal 8 переименована в "Yandex.Maps (formerly Geofield Yandex Maps)".

Описание

Модуль 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
Похожие записи

Комментарии

Alex
24.02.2017, 16:12

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

Настя
25.03.2017, 01:22

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

xandeadx
25.03.2017, 15:06

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

Настя
25.03.2017, 23:15

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

xandeadx
25.03.2017, 23:27

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

Настя
25.03.2017, 23:29

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

xandeadx
25.03.2017, 23:46

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

Игорь
06.04.2017, 15:02

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

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

Спасибо

DL
18.04.2017, 14:03

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

Михаил Яковлев
22.04.2017, 17:25

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

Гость
15.08.2017, 18:34

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

JKey
28.08.2017, 15:19

Здравствуйте!

С помощью views вывел объекты на карту.
Каким-то образом возможно узнать на какой маркер кликнул? ЧТобы передатьт его обратно на сайт?

Alexey
09.10.2017, 20:40

Привет! Нужно сделать города, в которых отображаются пункты выдачи (все на одной карте).

Подумалось: Город сделать нодой, а пункт выдачи - множественным multifield (кроме геополя надо хранить телефон, название и фото объекта). Есть возможность настроить вывод нескольких геополей, добаавленных таким образом в одной ноде, на одной карте?

xandeadx
09.10.2017, 20:41

Значение поля содержит только геоданные, сохранить другие данные в него нельзя.

xandeadx
09.10.2017, 20:56

По-моему проще вставить готовую карту с помощью конструктора или программно (с помощью html, js или php)

Alexey
09.10.2017, 21:20

КОнструктор - не вариант (там должна быть возможность выбирать только один. Т.е. фильтровать надо). А вот программно попробую.. при этом могу ведь я брать значения из goefield?
А может лучше сделать город - таксономией, а пунты выдачи - нодами?

Максим
15.11.2017, 01:51

Отличный модуль. Спасибо за работу.
Вопрос: можно ли выводить карту на этапе оформления заказа, чтобы покупатель мог выбрать нужный пункт не из списка (как это у меня реализовано сейчас), а на карте с помощью вашего модуля? Уже обыскался возможные решения.. сейчас вывожу просто списком, но выводить на карте - это другой уровень)

xandeadx
15.11.2017, 10:16

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

BETEP
19.01.2018, 15:33

Здравствуйте, подскажите, а под восьмую версию вы планируете разработку?

Andrew
07.05.2018, 03:06

Не сохраняется маркер в ноде. Версия Drupal 7.59
Автор, как исправить? Спасибо заранее

xandeadx
07.05.2018, 10:02

Проверил на 7.59, маркер в ноде сохраняется.

Andrew
07.05.2018, 10:14

Спасибо за оперативный ответ! Тогда не знаю, в чем дело -( Чистая версия Drupal. Накатил 7.54, тоже самое.

Andrew
07.05.2018, 11:05

xandeadx, извиняюсь, затупил и установил geofield 1.2. Сейчас все работает, с версией 2.3.
Спасибо за отличный модуль!

Вадим
25.07.2018, 13:20

Добрый день.
Подскажите,пожалуйста,как реализовать такое:
-При клике на метку,балун не открывается,а всплывает за пределами карты?
Спасибо

xandeadx
25.07.2018, 14:09

чем отличается открытие от всплытия?

Вадим
25.07.2018, 16:00

ничем) да и я разобрался с помощью css.
Но возник другой вопрос. как повесить event на метки? никак не могу обратиться к карте

Сергей
29.08.2018, 10:28

Добрый день!

Спасибо за модуль!
На десктопе работает отлично. На мобиле не ставится метка ( Т.е. она появляется при тапе, но через секунду исчезает. Что может быть? Понимаю что нужно ковырять события кастомной кнопки, но может есть какое-то быстрое решение?

Заранее Спасибо!

Сергей
29.08.2018, 14:51

Заметил, что при мобильном отображении, событие mapClickHandler срабатывает два раза. Причем первый раз (var geometry = event.get('coords');) переменная geometry содержит нормальные координаты, а второй раз уже [NaN, NaN].

В чем может быть причина? Замечу, именно при мобильном отображении, такая проблема.

Гость
18.11.2019, 11:08

Не подскажите почему показывается сообщение "Сервер не смог обработать запрос" при попытке поиска адреса?

Оксана
12.04.2020, 17:04

Добрый день.
Пытаюсь отобразить карту, сгенерированную во views, через Bootstrap Tabs. Карта со всеми метками выводится, но вот zoom слетает. В результате показывается вся карта мира, без зума. Если выводить блок на странице, то все отображается как надо. Это можно как то исправить?

Оксана
12.04.2020, 18:13

Вопрос решился снятием галки "Автомасштабирование карты".

Кирилл
27.11.2020, 17:31

А кто-то знает как включить темную тему?

mNigma
18.06.2021, 09:51

Добрый день!
Установил на Drupal 9.
Использовал Geolocation. Как появился модуль для 9, поставил его (8.x-1.1)
Попробовал вывести карту через views. Выдает ошибку "Call to a member function out() on null in Drupal\yandex_maps\Plugin\views\style\YandexMap->render()..."

Как понял, ошибка из-за пустого NULL объекта $geometry.

      foreach ($geofield_values as $geofield_value) {
          $geometry = geoPHP::load($geofield_value, 'wkt');
        $feature = [
          'type' => 'Feature',
          'geometry' => $geometry->out('json', TRUE),
        ];
        ..
        }

Значение в дебаггере $geofield_value = "45.000208576654, 41.914427580068"

Как можно поправить?

mNigma
23.06.2021, 02:42

xandeadx, спасибо, разобрался. Прописал костыль, чтобы заработало на полях Geolocation.

Не в тему. Раньше уведомления приходили на почту о новых ответах. Было удобно :) Если есть возможность, хорошо бы вернуть поле email.

Михаил
05.03.2022, 17:49

Подскажите как обратиться к карте в форме из JS, Drupal 9

xandeadx
05.03.2022, 18:08

http://xandeadx.ru/blog/drupal/704#ymap-javascript-reade

Михаил
05.03.2022, 18:39

Нашел объект карты здесь Drupal.yandexMaps.data['id-карты'].map.
Как к нему правильно обратиться пока он еще не загрузился?
пробовал $(document).ready, но не получается, так как скрипт карты грузиться асинхронно

Николай
14.03.2024, 01:10

На старых сайтах всё супер работает. Сейчас установил на новый (Друпал 7 + Views) — выводит максимум 19 нод на карте, если поставить больше — минимальный масштаб, на карте "для этого масштаба нет данных", на карте ничего не выводится. Что может быть? Ключ у Яндекса получил...

Николай
24.03.2024, 20:44

Добрый день! Спасибо за Ваш модуль для работы с картами Яндекса. Подскажите, пожалуйста, как добавить кастомный слой на карту?

Добавить комментарий