Руководство пользователя
Настройка всплывающих окон с помощью HTML
Настройте стиль всплывающих информационных окон с помощью HTML.
Как описано в Руководстве по включению информационных окон, информационное всплывающее окно обеспечивает взаимодействие с данными на вашей визуализации карты при щелчке или наведении указателя мыши на данные.
В этом руководстве описывается, как настроить стиль всплывающих информационных окон, изменяя HTML-код для слоя карты.
Включение взаимодействия с всплывающими окнами
Этот раздел руководства проводит вас через процесс включения взаимодействия с всплывающими окнами для слоя карты. Цель состоит в том, чтобы включить и щелчковое, и наведение информационное всплывающее окно для наших данных и просмотреть HTML-шаблоны, созданные внутри.
-
В этом руководстве импортируйте файл шаблона из архива с помощью перетаскивания в область конструктора. Конструктор открывается с самыми твитнутыми породами собак в качестве первого и единственного слоя карты.
Если вы щелкнете на слое Most Tweeted Dog Breeds и перейдете на вкладку ВСПЛЫВАЮЩЕЕ ОКНО, обратите внимание, что всплывающие окна не разрешены для анимированного слоя. Но не беда, добавим второй слой карты (используя те же данные), чтобы включить взаимодействие с всплывающими окнами!
-
Добавьте второй слой карты, используя те же данные о собаках в Twitter:
- В списке СЛОИ в констукторе нажмите ДОБАВИТЬ НОВЫЙ СЛОЙ.
- Добавьте второй слой с названием
twitter_dogs
. - Щелкните на слое
twitter_dogs
. - Перейдите на вкладку ВСПЛЫВАЮЩЕЕ ОКНО.
Есть две подвкладки, КЛИКНУТЬ и НАВЕСТИ КУРСОР, на которых отображается выбранный стиль всплывающего окна. Давайте применим оба действия к этому слою карты.
-
Включите КЛИКНУТЬ, чтобы отображалось изображение пользователя Twitter при нажатии на точку:
-
На подвкладке КЛИКНУТЬ выберите ИЗОБРАЖЕНИЕ в качестве стиля всплывающего окна.
-
Выберите
actor_image
в качестве имени столбца, которое должно появиться в заголовке изображения. Это профильное изображение пользователя Twitter. -
Используйте флажок рядом с именем столбцов, которые вы хотите отображать во всплывающем окне с информацией. Для этого примера выберите следующие столбцы (и убедитесь, что они отображаются в правильном порядке под
actor_image
):actor_displayname
actor_preferredusername
body
link
Все эти столбцы обычно используются в Twitter.
-
-
Включите взаимодействие при наведении, чтобы отображались сведения о том, кто твитит, при наведении указателя мыши на точку:
- Щелкните на подвкладке НАВЕСТИ КУРСОР на вкладке ВСПЛЫВАЮЩЕЕ ОКНО.
- Выберите стиль СВЕТЛЫЙ для всплывающего окна.
- Используйте флажок рядом с
actor_displayname
. - Измените имя, под которым столбец отображается во всплывающем окне, на Кто твитит?
Изменение подзаголовка и заголовка столбцов во всплывающем окне
Давайте изменим стиль отображения данных во всплывающем окне при щелчке, редактируя HTML-код для подзаголовка и заголовка.
-
На слое карты
twitter_dogs
нажмите вкладку ВСПЛЫВАЮЩЕЕ ОКНО.Есть две подвкладки, КЛИКНУТЬ и НАВЕСТИ КУРСОР, на которых отображается выбранный стиль всплывающего окна.
-
На подвкладке КЛИКНУТЬ щелкните кнопку-переключатель с ЗНАЧЕНИЯ на HTML.
-
Измените подзаголовок и заголовок для имени пользователя Twitter.
Вместо отображения столбца
actor_preferredusername
во всплывающем окне, давайте удалим подзаголовок столбца и отобразим значения как @username.-
Строки 19-22 HTML-шаблона содержат подзаголовок
<h5>
и заголовок<h4>
для столбца ``.
-
Со строки 20 удалите текст подзаголовка
actor_preferred
из элемента<h5>
. Таким образом, мы удалим подзаголовок столбца из всплывающего окна с информацией.<h5 class="CDB-infowindow-subtitle"></h5>
-
Со строки 21 добавьте символ
@
перед именем столбца в элементе<h4>
. Таким образом, будет добавлен символ @ перед каждым именем пользователя Twitter во всплывающем окне с информацией.<h4 class="CDB-infowindow-title">@</h4>
-
Щелкните ПРИМЕНИТЬ и обратите внимание, как подзаголовок и заголовок отображаются во всплывающем окне с информацией о пользователе.
-
-
Аналогично изменим подзаголовок описания твита.
-
Строки 27-30 HTML-шаблона содержат подзаголовок
<h5>
и заголовок<h4>
для столбца ``. -
Со строки 28 удалите текст подзаголовка
body
из элемента<h5>
.<h5 class="CDB-infowindow-subtitle"></h5>
-
Щелкните ПРИМЕНИТЬ и обратите внимание, как подзаголовок для тела удаляется из всплывающего окна с информацией. Отображается только описание твита.
Следующий 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
.
-
Примените элемент HTML
<a href>
для значений гиперссылок.Строки 23-26 HTML-шаблона содержат подзаголовок
<h5>
и заголовок<h4>
для столбца ``. -
Со строки 24 удалите текст подзаголовка
link
из элемента<h5>
.<h5 class="CDB-infowindow-subtitle"></h5>
-
Со строки 25 измените элемент
<h4>
заголовка, чтобы отображались гиперссылки для столбца ``.<h4 class="CDB-infowindow-title"><a href="" target="_blank">Просмотр твита</a></h4>
-
Щелкните ПРИМЕНИТЬ. Столбец
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>
Применение настраиваемого стиля всплывающего окна
Используйте всю мощь библиотеки CSS, чтобы создавать свои собственные настраиваемые стили всплывающих окон с использованием HTML!