Руководство пользователя

Руководство пользователя

Настройка всплывающих окон с помощью HTML

Настройте стиль всплывающих информационных окон с помощью HTML.

Как описано в Руководстве по включению информационных окон, информационное всплывающее окно обеспечивает взаимодействие с данными на вашей визуализации карты при щелчке или наведении указателя мыши на данные.

В этом руководстве описывается, как настроить стиль всплывающих информационных окон, изменяя HTML-код для слоя карты.

Включение взаимодействия с всплывающими окнами

Этот раздел руководства проводит вас через процесс включения взаимодействия с всплывающими окнами для слоя карты. Цель состоит в том, чтобы включить и щелчковое, и наведение информационное всплывающее окно для наших данных и просмотреть HTML-шаблоны, созданные внутри.

  1. В этом руководстве импортируйте файл шаблона из архива с помощью перетаскивания в область конструктора. Конструктор открывается с самыми твитнутыми породами собак в качестве первого и единственного слоя карты.

    Если вы щелкнете на слое Most Tweeted Dog Breeds и перейдете на вкладку ВСПЛЫВАЮЩЕЕ ОКНО, обратите внимание, что всплывающие окна не разрешены для анимированного слоя. Но не беда, добавим второй слой карты (используя те же данные), чтобы включить взаимодействие с всплывающими окнами!

  2. Добавьте второй слой карты, используя те же данные о собаках в Twitter:

    1. В списке СЛОИ в констукторе нажмите ДОБАВИТЬ НОВЫЙ СЛОЙ.
    2. Добавьте второй слой с названием twitter_dogs.
    3. Щелкните на слое twitter_dogs.
    4. Перейдите на вкладку ВСПЛЫВАЮЩЕЕ ОКНО.

    Есть две подвкладки, КЛИКНУТЬ и НАВЕСТИ КУРСОР, на которых отображается выбранный стиль всплывающего окна. Давайте применим оба действия к этому слою карты.

  3. Включите КЛИКНУТЬ, чтобы отображалось изображение пользователя Twitter при нажатии на точку:

    1. На подвкладке КЛИКНУТЬ выберите ИЗОБРАЖЕНИЕ в качестве стиля всплывающего окна.

    2. Выберите actor_image в качестве имени столбца, которое должно появиться в заголовке изображения. Это профильное изображение пользователя Twitter.

    3. Используйте флажок рядом с именем столбцов, которые вы хотите отображать во всплывающем окне с информацией. Для этого примера выберите следующие столбцы (и убедитесь, что они отображаются в правильном порядке под actor_image):

      1. actor_displayname
      2. actor_preferredusername
      3. body
      4. link

      Все эти столбцы обычно используются в Twitter.

      click

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

    1. Щелкните на подвкладке НАВЕСТИ КУРСОР на вкладке ВСПЛЫВАЮЩЕЕ ОКНО.
    2. Выберите стиль СВЕТЛЫЙ для всплывающего окна.
    3. Используйте флажок рядом с actor_displayname.
    4. Измените имя, под которым столбец отображается во всплывающем окне, на Кто твитит?

    hover

Изменение подзаголовка и заголовка столбцов во всплывающем окне

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

  1. На слое карты twitter_dogs нажмите вкладку ВСПЛЫВАЮЩЕЕ ОКНО.

    Есть две подвкладки, КЛИКНУТЬ и НАВЕСТИ КУРСОР, на которых отображается выбранный стиль всплывающего окна.

  2. На подвкладке КЛИКНУТЬ щелкните кнопку-переключатель с ЗНАЧЕНИЯ на HTML.

    html_switch

  3. Измените подзаголовок и заголовок для имени пользователя Twitter.

    Вместо отображения столбца actor_preferredusername во всплывающем окне, давайте удалим подзаголовок столбца и отобразим значения как @username.

    1. Строки 19-22 HTML-шаблона содержат подзаголовок <h5> и заголовок <h4> для столбца ``.
      actor_preferred

    2. Со строки 20 удалите текст подзаголовка actor_preferred из элемента <h5>. Таким образом, мы удалим подзаголовок столбца из всплывающего окна с информацией.

        <h5 class="CDB-infowindow-subtitle"></h5>
      
    3. Со строки 21 добавьте символ @ перед именем столбца в элементе <h4>. Таким образом, будет добавлен символ @ перед каждым именем пользователя Twitter во всплывающем окне с информацией.

        <h4 class="CDB-infowindow-title">@</h4>
      
    4. Щелкните ПРИМЕНИТЬ и обратите внимание, как подзаголовок и заголовок отображаются во всплывающем окне с информацией о пользователе.

      modified_subtitle

  4. Аналогично изменим подзаголовок описания твита.

    1. Строки 27-30 HTML-шаблона содержат подзаголовок <h5> и заголовок <h4> для столбца ``.

      body

    2. Со строки 28 удалите текст подзаголовка body из элемента <h5>.

        <h5 class="CDB-infowindow-subtitle"></h5>
      
    3. Щелкните ПРИМЕНИТЬ и обратите внимание, как подзаголовок для тела удаляется из всплывающего окна с информацией. Отображается только описание твита.

      Следующий HTML-код показывает стиль body для всплывающего окна при щелчке на строках 23-25.

        <div class="CDB-infowindow-listItem CDB-infowindow-listItem--order4">
          <h5 class="CDB-infowindow-subtitle"></h5>
          <h4 class="CDB-infowindow-title"></h4>
        </div>
      

Если у вас есть столбец, содержащий URL-адреса, вы можете отредактировать HTML-код, чтобы сделать эти гиперссылки кликабельными из всплывающего окна с информацией. Давайте продолжим редактировать HTML-код всплывающего окна при щелчке на слое карты twitter_dogs.

  1. Примените элемент HTML <a href> для значений гиперссылок.

    Строки 23-26 HTML-шаблона содержат подзаголовок <h5> и заголовок <h4> для столбца ``.

    Ссылка

  2. Со строки 24 удалите текст подзаголовка link из элемента <h5>.

    <h5 class="CDB-infowindow-subtitle"></h5>
    
  3. Со строки 25 измените элемент <h4> заголовка, чтобы отображались гиперссылки для столбца ``.

    <h4 class="CDB-infowindow-title"><a href="" target="_blank">Просмотр твита</a></h4>
    
  4. Щелкните ПРИМЕНИТЬ. Столбец link во всплывающем окне при щелчке открывает твит в отдельном окне.
    Ссылка

Следующий код отображает настроенную таблицу стилей HTML для всплывающего окна при щелчке.

<div class="CDB-infowindow CDB-infowindow--light js-infowindow" data-cover="true">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-header CDB-infowindow-headerMedia js-header js-cover">      
      <div class="CDB-infowindow-mediaTitle">
        <h4 class="CDB-infowindow-title">
          <span>{{actor_displayname}}</span>
        </h4>
      </div>
    </div>
    <div class="CDB-infowindow-inner js-inner">      
      <div class="CDB-infowindow-list js-content">
        <div class="CDB-infowindow-listItem CDB-infowindow-listItem--order1">
          <h5 class="CDB-infowindow-subtitle">actor_displayname</h5>
          <h4 class="CDB-infowindow-title">{{actor_displayname}}</h4>
        </div>
        <div class="CDB-infowindow-listItem CDB-infowindow-listItem--order2">
          <h5 class="CDB-infowindow-subtitle"></h5>          
          <h4 class="CDB-infowindow-title">@{{actor_preferredusername}}</h4>
        </div>
        <div class="CDB-infowindow-listItem CDB-infowindow-listItem--order3">
          <h5 class="CDB-infowindow-subtitle"></h5>
          <h4 class="CDB-infowindow-title"><a href="{{link}}" target="_blank">Просмотр твита</a></h4>
        </div>
        <div class="CDB-infowindow-listItem CDB-infowindow-listItem--order4">
          <h5 class="CDB-infowindow-subtitle"></h5>
          <h4 class="CDB-infowindow-title"></h4>
        </div>
      </div>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>

Изменение размера окна с помощью HTML

Для всплывающих окон при наведении информационное окно автоматически подстраивается под значение выбранного столбца(ов).

Для всплывающих окон при щелчке на вкладке ВСПЛЫВАЮЩЕЕ ОКНО есть опция определения РАЗМЕРА ОКНА для информационного окна. По желанию вы можете изменить размер окна с помощью HTML.

Например, выбранное значение РАЗМЕРА ОКНА (со вкладки ВСПЛЫВАЮЩЕЕ ОКНО) скрыто в HTML-шаблоне.

<div class="CDB-infowindow CDB-infowindow--light js-infowindow">
  <div class="CDB-infowindow-close js-close"></div>
<div class="CDB-infowindow-container">

Чтобы применить пользовательские размеры для размера окна, вы можете задать значения width, height и margin внутри элементов <div style> и container всплывающего окна.

<div style="width:600px; background-color:white">
  <div class="CDB-infowindow-close js-close" ></div>
<div class="CDB-infowindow-container" style="width:97%; height:97%; margin: 0 auto">

Библиотека CSS для всплывающих окон

Например, предположим, что вы хотите объединить элементы стилей всплывающих окон при щелчке и наведении на новый стиль.

Пример настраиваемого стиля всплывающего окна с использованием HTML

<div style="padding:0; background-color:white; border:0px; padding:0px">
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header" style="background: #CC66FF;margin-top:1em;margin-bottom:1em;text-align:center">
      <ul class="CDB-infowindow-list">
        <li class="CDB-infowindow-listItem">
          <h4 class="CDB-infowindow-title">
            TITLE: Я создал пользовательский стиль всплывающего окна с помощью HTML
          </h4>
        </li>
      </ul>
    </div>
    <div class="CDB-infowindow-inner js-inner">
      <ul class="CDB-infowindow-list js-content">
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">actor name</h5>
          <h4 class="CDB-infowindow-title">{{actor_displayname}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle"></h5>
          <h4 class="CDB-infowindow-title"><a href="{{link}}" target="_blank">Просмотр твита</a></h4>
        </li>
      </ul>
    </div>
  </div>
</div>

Применение настраиваемого стиля всплывающего окна

custom_styling

Используйте всю мощь библиотеки CSS, чтобы создавать свои собственные настраиваемые стили всплывающих окон с использованием HTML!