Клуб API Карт

Найдено на тему «шаблоны»:
Поменять шаблон кластера при его открытии
mvblog
13 декабря 2016, 11:56

Здравствуйте , я динамически заполняю кластер с помощью ajax. Изначально я создаю кластер с

clusterBalloonContentLayout: /* шаблон балуна с прелоадером */

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

Я делаю так

var clusterer = new ymaps.Clusterer({
    clusterBalloonContentLayout: /* шаблон балуна с прелоадером */,
    /* Прочие поля */
});

clusterer.events.add('balloonopen', function(event) {
  var cluster = event.get('cluster');

  // Эмуляция ajax запроса
  setTimeout(function() {
    cluster.properties.set(
      'balloonContentBody', 'Полученные данные'
    );
  }, 2000);
});

Шаблон балуна с прелоадером

.ballon
  .ballon_body {{properties.balloonContentBody|raw}}

Вот это не работает.  Следующая строка выполняется, но балун как был с прелоадером, так и остался. Ничего не меняется.

cluster.properties.set('balloonContentBody', 'Полученные данные');

Подскажите, что здесь неправильно. Спасибо!

clusterer,clusterBalloon,clusterBalloonContentLayout,динамическая загрузка,Кластер,шаблоны
ObjectManager, содержимое макета кластера
denis.ezhkov
6 сентября 2016, 17:02

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

Не могу разобраться, как задать содержимое макета кластера на основе информации входящих в него точек.

Все примеры, которые нашел, используют Clusterer и перекрытие некоторых методов. В моем случае я использую ObjectManager, clusterize:true и геообъекты вида 

{
  type: 'Feature',
  id: 123,
  geometry: {
    type: 'Point',
    coordinates: coords
  },
  properties: {
    iconContent: 123,
  },
  options: {
    iconLayout: pointLayout,
  }
}

На основе iconContent геообъектов, входящих в кластер, мне нужно формировать содержимое иконки кластера. Как это правильно сделать?

Спасибо

7 комментариев
ObjectManager,шаблоны,Кластер,макет кластера
getShape() возвращает неправильные координаты
denis.ezhkov
26 июня 2016, 09:27

Вот здесь (http://gobank.testmycoding.ru/kurs.php) подгружается массив точек. Шаблон метки кастомный, при наведении метка должна менять цвет. Если мы находимся в самом верху страницы, то все хорошо. Но если страницу поскроллить немного вниз, то все ломается. Изображение метки перестает реагировать на mouseover. Я заметил, то метка как будто бы виртуально получается смещена ниже своего отображения на количество пикселей, которое мы отскроллили. 

Еще раз поясню алгоритм.

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

Что это может быть и как поправить?

getShape,Метка,шаблоны
Не отображается картинка в баллуне меток загруженных с помощью ymapsml
Евгений Закиров
1 июня 2015, 15:56

код:

 

        var myMap = new ymaps.Map("show-base", {

            center: [53.346930035079104,83.77647585253904], 

            zoom: 8,

            controls: ['smallMapDefaultSet']

        });

 

        ymaps.geoXml.load('http://tur.flyleaf.su/hostels/default/ymapsml/1/?d=556c5116c5880')

            .then(onGeoXmlLoad);

        function onGeoXmlLoad (res) {

            myMap.geoObjects.add(res.geoObjects);

 

            if (res.mapState) {

                res.mapState.applyToMap(myMap);

            }

        } 

 

 

http://tur.flyleaf.su/hostels/default/ymapsml/1/ метки отсюда.

В шаблоне баллуна загружаемых меток я подставляю <img src="$[metaDataProperty.AnyMetaData.link]" /> (http://tur.flyleaf.su/hostels/default/ymapsml/1/) но в результате, при выводе меток на карте, картинка не отображается, в коде: <img > , при этом ссылка на картинку точно существует, если в шаблоне указать: $[metaDataProperty.AnyMetaData.link], то выведется текст ссылки на картинку.

https://yadi.sk/i/glNbIREDgzjyr

что я делаю не так?(

ps: к примеру если поменять здесь  <img src="$[metaDataProperty.AnyMetaData.link]" />  src на alt , то ссылка выведется нормально, картинки естественно не будет, но: https://yadi.sk/i/cAKovBeAgzkyN

2 комментария
API 2.1,шаблоны,YMapsML
Использование своего шаблона внутри twig шаблонизатора
zalex@zalex.com.ua
20 января 2015, 18:46

В силу того что создание кастомного шаблона позволяет использовать twig шаблонизатор, возникает коллизия если создавать шаблон внутри twig шаблона (например как это происходит используя Symfony2).

Вопрос в следующем, каким образом возможно заменить управляющие метки типа {%  %} {{   }}  на другие, чтоб Twig не воспринимал внутри себя эти метки.

 

Как вариант я предполагаю что можно пользовать вокруг конструкции  тэк {% verbatim%} {%endverbatim%}, но насколько это удобно и правильно 

5 комментариев
API 2.1,шаблоны,балун,макеты
Свой шаблон для кластера (api v2.1)
Удалённый пользователь
20 июня 2014, 18:38

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

Мне нужно реализровать совй шаблон для кластера. Он будет похож на шаблон "две колонки", но там другая форма балуна и еще несколько фич. Очень нужен пример подобный этому, но для версии api 2.1 

Я смог сделать макет для спика геообъектов в кластере, там все просто:

<ul id="placemark-list">

    {% for place in properties.geoObjects %}

       <li data-place-id = "{{ place.properties.place_id }}">

          <img src="{{ place.options.iconImageHref }}" ><a href="#">{{ place.properties.clusterCaption }}</a>

      </li>

    {% endfor %}

</ul>

Геообъекты можно получить через кластер.

А как передать в шаблон, скажем, выбраный геообъект, чтобы в шаблоне:

<div class="ymaps_balloon-container">

   {{ properties.content|raw }}

</div>

свойство properties.content относилось к геообъекту в кластере, а не к самому кластеру?

P.S. исходный код шаблона "две колонки" тоже подойдет

2 комментария
кластер,API 2.1,шаблоны,балун
Дополнительные фильтры для шаблонизатора
Artur
16 июня 2014, 13:51

Есть ли какой-нибудь способ добавить свои фильтры для шаблонизатора? Это который в templateLayoutFactory http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/templateLayoutFactory.xml

4 комментария
API 2.1,шаблоны,макеты
Ссылка на выполнение скрипта в шаблоне балуна
Удалённый пользователь
18 марта 2014, 14:12

Добрый день. Как правильно прописать ссылку в шаблоне балуна при формировании xml-файла, чтобы при клике на нее выполнялся некая функция.

 

Формирование шаблона происходит так:

 

    <Template gml:id="balloonTemplate">

      <text>

        <![CDATA[

 <div style="font-size:12px;">

            <div style="font-family:Tahoma,Arial;font-size:14px;"><b>$[name]</b></div>

            <div style="font-family:Tahoma,Arial;font-size:14px;">($[metaDataProperty.AnyMetaData.district])</div>

            <div style="margin-left:3px;font-family:Tahoma,Arial;font-size:12px;">Удаленность от КАД: $[metaDataProperty.AnyMetaData.kad] км</div>

            <div><img src="http:$[metaDataProperty.AnyMetaData.image]" alt="" /></div>

            <div style="margin-top:5px;">

<a rel="nofollow" class="blue_link" target="blank" href="http://u8814306.plsk.regruhosting.ru/info.php?id=$[metaDataProperty.AnyMetaData.id]">Подробная информация</a>&nbsp;&nbsp;

<a rel="nofollow" href="#" class="blue_link">Сравнение</a></div>

            </div>

 

          </div>

        ]]>

      </text>

    </Template>

 

30 комментариев
API 2.0,события,jQuery,шаблоны,YMapsML
onClick в шаблоне балуна
Удалённый пользователь
4 марта 2014, 14:25

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

 

        <![CDATA[

 <div style="font-size:12px;">

            <div style="font-family:Tahoma,Arial;font-size:14px;"><b>$[name]</b></div>

            <div style="font-family:Tahoma,Arial;font-size:14px;">($[metaDataProperty.AnyMetaData.district])</div>

            <div style="margin-left:3px;font-family:Tahoma,Arial;font-size:12px;">Удаленность от КАД: $[metaDataProperty.AnyMetaData.kad] км</div>

            <div><img src="http:$[metaDataProperty.AnyMetaData.image]" alt="" /></div>

            <div style="margin-top:5px;">

<a rel="nofollow" class="blue_link" target="blank" href="http://u8814306.plsk.regruhosting.ru/info.php?id=$[metaDataProperty.AnyMetaData.id]">Подробная информация</a>&nbsp;&nbsp;

<a rel="nofollow" class="blue_link" href="#" onClick="addToCompare($[metaDataProperty.AnyMetaData.id]);return false;">Сравнение</a></div>

            </div>

 

          </div>

        ]]>

      </text>

 

А то функция addToCompare() не работает при клике. Спасибо.

4 комментария
шаблоны,API 2.0,балун,YMapsML
Как создать ссылку при формировании xml-файла?
Удалённый пользователь
23 февраля 2014, 15:07

Привет. Вот часть кода, которые делает xml-файл. Как мне сделать в балуне ссылку info.php?id=x, где x - это id метки из БД

 

<Template gml:id="balloonTemplate">

<text>

<![CDATA[

<div style="font-size:12px;">

                        <div id=$[id] style="color:#ff0303;font-weight:bold;"><a href=info.php?id=$[id] target="blank" class="blue_link">Информация об объекте</a></div>

                    </div>]]></text>

</Template>

</Representation>

 

    <GeoObjectCollection>

        <gml:name>Объекты карте</gml:name>

        <gml:featureMembers>';

 

 

if (($_GET['id'] < 1) || (!isset($_GET['id'])))

{

  $query = mysql_query("SELECT * FROM `settlement` WHERE id_area='".$area['id']."' ") or die($db_error);

}

 

if ($_GET['id'] > 0)

{

  $query = mysql_query("SELECT * FROM `settlement` WHERE id_district='".$_GET['id']."' ") or die($db_error);

}

 

while ($result = mysql_fetch_array($query))

{

  $query1 = mysql_query("SELECT * FROM `object` WHERE id_settlement='".intval($result['id'])."' ") or die(mysql_error());

  while ($par1 = mysql_fetch_array($query1))

  {

   echo '<GeoObject gml:id="', $par1['id'], '">';

   echo '<gml:name>', htmlspecialchars($par1['name']), '</gml:name>';

   echo '<gml:metaDataProperty>';

   echo '<AnyMetaData>';

   echo '<adress>',htmlspecialchars($par1['id']),'</adress>';

   echo '</AnyMetaData>';

   echo '</gml:metaDataProperty>';

   echo '<gml:Point>';

   echo '<gml:pos>', $par1['coord_y'], ' ', $par1['coord_x'], '</gml:pos>';

   echo '</gml:Point>';

   echo '<style>#styleHotels</style>';

   echo '</GeoObject>';

   echo "\n";

  }

}

 

3 комментария
PHP,шаблоны,YMapsML
body layout для кластера
vershh23
3 июля 2013, 17:46

Всем привет! не могу переопределить clusterBalloonContentBodyLayout у кластера. А проблема именно в том, что не пойму как выстроить внутри него clusterBalloonSidebarItemLayout, 

пробовал что то вроде

,clusterBalloonContentBodyLayout: ymaps.templateLayoutFactory.createClass('<div class="body">$[[options.clusterBalloonSidebarItemLayout]]</div>')

 

было бы круто, если бы указали на шаблон для cluster#balloonContentBody



Спасибо!

3 комментария
кластеризатор,шаблоны,API 2.0
Доработка стандартного шаблона балуна
miami999
28 марта 2013, 13:35

Добрый день!

При кастомизации балунов использовал шаблон ("balloonLayout": "default#imageWithContent"), он меня всем устраивает, вот только нет закрывающего крестика. Визуально я его запилил, а вот как повесить событие на него разобраться не могу.

P.S. Существует ли список всех шаблонов с примерами?

1 комментарий
шаблоны,API 2.0,балун
Стилизация балунов
small_butterfly_long_long_as_long_as_i_can_do_it_here
23 апреля 2012, 19:01

Добрый день!  Как создавать свои стили для балунов в новом API?

В прошлой версии для балуна переопределял интерфейс YMaps.IBalloonLayout и все работало.

В новой версии есть фабрика шаблонов ymaps.templateLayoutFactory, но в ней нет возможностей настройки оффсетов и положения кнопки "закрыть"

  
var iconStyle = {
href : iconUrl,
size : {x : 22, y : 27}
}
var MyBalloonLayout = ymaps.templateLayoutFactory.createClass('<div class="balloon_layout"><div class="balloon_content">$[[options.contentLayout]]</div><div class="balloon_close"></div><div class="balloon_tail"></div></div>') ;
ymaps.layout.storage.add('my#balloonLayout', MyBalloonLayout) ;
var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass('<b>$[properties.name]</b>') ;
ymaps.layout.storage.add('my#balloonContentLayout', MyBalloonContentLayout) ;
 
 А затем его применяю к своей коллекции:
 
myCollection.options.set({
            iconImageHref : iconStyle.href,
iconImageSize : [iconStyle.size.x, iconStyle.size.y],
iconImageOffset : [-iconStyle.size.x/2, -iconStyle.size.y],
            balloonLayout           : 'my#balloonLayout',
            balloonContentLayout    : 'my#balloonContentLayout'
 }) ;
 
Для иконок оффсеты можно задать как iconImageOffset, но как сделать аналогичное для балунов, которые могут растягиваться от содержимого?
6 комментариев
метка,шаблоны,API 2.0,балун
шаблон для значка метки
DrFreez
23 января 2011, 23:04

Помогите разобраться с шаблонами отображения меток. Делал как тут http://api.yandex.ru/maps/ymapsml/doc/ref/reference/text.xml

Если делать просто <div>$[style.iconStyle.href]</div> то всё отлично выводится, но если <div><img src="$[style.iconStyle.href]" /></div> или <div style="background:url($[style.iconStyle.href]);"></div> то атрибуты style или src удаляются.

 стиль
<repr:Style gml:id="style25">
       <repr:iconStyle>
                        <repr:href>http://domen.ru/images/site/img/ymicons/gasStation025.png</repr:href>
                <repr:size x="27" y="26"/>
                        <repr:offset x="-14" y="-26"/>
                        <repr:template>#pointIconDefault</repr:template>
       </repr:iconStyle>
    </repr:Style>

шаблон метки

<repr:Template gml:id="pointIconDefault">

             <repr:text><![CDATA[<div><img
src="$[style.iconStyle.href]" /></div>]]></repr:text>
    </repr:Template>
   
4 комментария
метка,шаблоны,YMapsML
Позиционирование картинки в балуне
ckudku.com
21 октября 2010, 14:22
Добрый день!

Вот такой вопрос: у меня в балуне отображается информация (http://ckudku.com/map.html), меня все устраивает кроме одного. Как сделать чтобы картинка была не сверху а слева как в примере (http://ckudku.com/1.jpg)?

Использую вот такой код:
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.546172,47.098124), {style: "default#barberShopIcon"}
placemark.name = '<img src="http://ckudku.com/mariupol/images/image17.png" alt=""/>';
placemark.description = "<strong>Салон красоты\"Сапфо\"</strong><strong>Адрес:</strong><span>ул. Варганова,2</span><strong>Телефон:</strong><span>(0629)34-92-73</span><a href="http://ckudku.com" target="_blanс">1</a><span> | </span><span><a href="http://ckudku.com" target="_blanс">2</a>";
map.addOverlay(placemark);
Спасибо!
6 комментариев
шаблоны,API 1.x,балун
Как указать шаблон для hint (хинт)?
boicoff
22 августа 2010, 19:08
Как указать шаблон для хинта, не для плейсмарка, а т.с. глобально?
11 комментариев
шаблоны,хинт
ссылки в шаблонах
Oldpunk777
22 августа 2010, 18:09

Такая проблема, у меня есть шаблон

<repr:Template gml:id="balloonTemplate">
                <repr:text>
                    <![CDATA[
                    <div style="padding:5px; width:500px">
                       
<img width="80px" height="120px" alt="$[name]" border="1px"
src="$[metaDataProperty.AnyMetaData.img_link]" style="margin:0 10px 10px
0;width:80px; height:120px; border:1px solid #000000; float:left">
                       
<font style="margin-bottom:20px; color:#000000; display:block;
font:bold 18px tahoma ">$[name]</font>
                        <font style="color:#000000" >$[metaDataProperty.AnyMetaData.desc]</font>
                       
<a href="$[metaDataProperty.AnyMetaData.link]" style="display:block;
color:#1e6fe5">Полная информация</a>
                    </div>]]>
                </repr:text>
            </repr:Template>

пытаюсь сюда  href="$[metaDataProperty.AnyMetaData.link]"  передать ссылку

<ymaps:AnyMetaData>
                        <img_link><![CDATA[rrr rhttp://smartov.net.ru/up/screensmall.jpgrrrr]]></img_link>
                        <desc>Вот те полное описание</desc>
                        <link>http://ya.ru</link>
 </ymaps:AnyMetaData>

но почему то ссылки не передаются? как можно сделать?

1 комментарий
шаблоны,API 1.x,YMapsML
Вопрос по шаблонам карт
skaurus2008
25 июня 2010, 12:12
То, что можно указывать шаблоны как содержимое меток, это чудно.
Но раз уж к картам прилагается шаблонизатор, я бы предпочел использовать его и в прочих гнусных целях.

Вопрос сводится к тому, как мне после вызова .build на объекте Template получить отрендеренный html. Сейчас делаю что-то вроде

var html = st.build({
    avatar: '...',
    fullname: '...'
})._$elements[1];

мне не нравится.
2 комментария
шаблоны,API 1.x
Номер для метки
cycler
7 июня 2010, 13:16

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

Если эти метки я добавляю через YMapsML - файл.

 

Подскажите. плиз, киньте ссылку.

2 комментария
метка,шаблоны,YMapsML
Вопрос к знатокам!!
Башкин Игорь Александрович
3 июня 2010, 12:42

На карту выгружаю значки из ХМЛ файла.

В нем шаблон

 <Template gml:id="balloonTemplate">
       <text>
         <![CDATA[
           <div style="font-size:12px;">
             <div style="color:#038003;font-weight:bold">Сроки: <font color=#FF8003>$[name]</font></div>
             <div>$[metaDataProperty.AnyMetaData.srk]</div>
             <div><font color=#038003>Организация:</font> $[metaDataProperty.AnyMetaData.org]</div>
              <div><font color=#038003>Адрес:</font>$[metaDataProperty.AnyMetaData.adr]</div>
              <a href="allinfo.php?id=$[id]"  rel="gb_page_center[640, 480]">Подробная информация.</a>
          </div>
         ]]>
       </text>
     </Template>

!!!!!!!!rel="gb_page_center[640, 480]"!!!!!!!!!!!!

Эта штука открывает страницу в компоненте типа lightbox , (graybox называется) так вот ссылки который получаются в баллуне, открываются просто в новой странице, а хотелось бы в компоненте, КУДА он пропадает?????

Мож есть какие другие реализации отображения в компоненте страницы!!! по  ссылке??

Заранее благодарен.

7 комментариев
Lightbox,шаблоны,API 1.x,YMapsML