Модуль Geofield Yandex Maps - создание своего пресета для оформления метки, hint и clusterIcon


106

Уже не раз использовал в проектах модуль Geofield Yandex Maps для вывода различных гео-объектов на Яндекс.Картах. И лично для меня основной проблемой всегда было воображение дизайнеров))) ​Ну да ладно, статья все таки не о них, а про Яндекс.Карты версии 2.1. 

Итак, поставили мы точку на карту. А дальше нужно вписать ее в дизайн сайта. Оформить всплывающее окно с информацией об объекте (baloon) - самое простое. Тут можно справиться простым css. А вот с остальными элементами сложнее. В статье приведу пример своего пресета, который помог мне темизировать следующие элементы:

  1. Метка- иконка объекта
  2. Hint - Подсказка с краткой информацией об объекте (стандартное поведение - при наведении курсора на объект)
  3. ClusterIcon - Иконка кластера. Заменяем своей иконкой и/или меняем 

Модуль Geofield Yandex Maps идет в комплекте с примером своих пресетов. Найти их можно в папке с модулем geofield_ymap\js\geofield_ymap_presets.example.js. Необходимо скопировать данный файл в папку свой темы или в папку своего модуля, переименовать и на странице основных настроек модуля (admin/config/system/geofield-ymap) указать путь к нему:

И теперь покажу свой вариант пресета:
Файл
sites/all/modules/custom/frz_tweaks/js/geofield_ymap_presets.jcb.js
ymaps.ready(function () {    
 // Создание макета содержимого хинта.
 // Макет создается через фабрику макетов с помощью текстового шаблона.
 hintLayout = ymaps.templateLayoutFactory.createClass("
" + "{{ properties.hintContent|raw }}" + "
", { // Определяем метод getShape, который // будет возвращать размеры макета хинта. // Это необходимо для того, чтобы хинт автоматически // сдвигал позицию при выходе за пределы карты. getShape: function () { var el = this.getElement(), result = null; if (el) { var firstChild = el.firstChild; result = new ymaps.shape.Rectangle( new ymaps.geometry.pixel.Rectangle([ [0, 0], [firstChild.offsetWidth, firstChild.offsetHeight] ]) ); } return result; } } ); //Аналогично создаем макет для содержимого иконки кластера MyIconContentLayout = ymaps.templateLayoutFactory.createClass("
" +   "{{ properties.geoObjects.length }}
"); clusterNumbers = [100]; //Непосредственно сам пресет: ymaps.option.presetStorage.add('custom#jcbPreset', { iconLayout: 'default#image', //путь к основной иконке: iconImageHref: "http://адресСайта/sites/default/files/icon_map.png", iconImageSize: [65, 71], iconImageOffset: [-28, -70], //устанавливаем макет для содержимого hint: hintLayout: hintLayout, clusterIcons:[{ //путь к иконке кластера href: "http://адресСайта/sites/default/files/icon_map_cluster_empty.png", size: [40, 40], offset: [-20, -20], shape: { type: 'Circle', coordinates: [0, 0], radius: 20 } }], clusterNumbers: clusterNumbers, //устанавливаем макет для содержимого иконки кластера: clusterIconContentLayout: MyIconContentLayout });
  1. Метка: Используем стандартный макет для иконок 'default#image', который позволяет выводить произвольные изображения в качестве метки. 
  2. Хинт: Что бы изменить html хинта мы создаем свой макет, и в нем определяем новую html структуру. Это нам необходимо для того, что бы потом через css определить необходимые стили для хинта.
  3. Иконка кластера. Тут я использовал сразу два приёма - загружаем фоновую картинку для иконки кластера и в новом макете меняем html структуру для содержимого (что бы изменить форматирование текста внутри иконки). В конечном итоге я отказался от фоновой картинки и загрузил просто прозрачный png. Все оформление кластера ушло в css.

И приведу фрагмент css:

.jcb-claster-number {
  color: #000;
  font-size: 14px;
  border: 2px solid #fff;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: @brand-primary;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  font-family: "GillSansCyrMT","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: 40px;
}

.jcb-hint {
  display: inline-block;
  padding: 15px;
  padding-left: 30px;
  position: relative;
  left: 5px;
  top: 5px;
  font-size: 13px;
  line-height: 17px;
  width: 300px;
  color: #333333;
  text-align: left;
  vertical-align: middle;
  background-color: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
  box-shadow: 0 0 10px rgba(0,0,0,0.4);

  &:before {
    content: '';
    display: block;
    border: 15px solid transparent;
    border-left: 15px solid #faae25;
    border-top: 15px solid #faae25;
    position: absolute;
    top: 0;
    left: 0;
  }
}

Вот такой вариант получился у меня:

Добавить комментарий
Может быть интересно

Порядок действий для установки Solr на сервере с Centos 7

4
Модуль Migrate это фреймворк для миграции (импорта) данных в Drupal из любых источников.
1

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

2
Снова возвращаемся к migrate. Довольно удобный фреймворк для импорта данных в Друпал. Один из распространенных форматов источника для импорта - CSV. Поддерживается migrate из коробки. Описание и примеры работы с классом MigrateSourceCSV можно найти на drupal.org.
2
Иногда при разработке сайта появляется необходимость создавать отдельный шаблон для определенной ноды. По умолчанию такой возможности нет, зато можно это прикрутить самостоятельно. Как это сделать? Это можно узнать в данной статье.