Превращение веб-карты в веб-приложение
Ваша команда согласна с тем, что веб-приложение, ориентированное на карты, является лучшим средством коммуникации для вашей истории. Вы найдете и измените веб-карту, создадите новое веб-приложение на основе карты и настроите его базовую структуру компоновки.
Поиск карты с данными о жилье
Вместо того, чтобы начинать с пустой веб-карты, вы измените существующую. ArcGIS Living Atlas of the World представляет собой тщательно отобранную коллекцию географических данных и карт. Он включает в себя Esri Maps for Public Policy, сайт, посвященный повышению уровня пространственной грамотности и грамотности данных в государственной политике. Вы будете искать на этом сайте данные и карты, связанные с жилищной политикой.
- Перейдите на сайт Esri Maps for Public Policy.
Здесь вы можете искать ресурсы данных, связанные с различными темами государственной политики. В этом уроке вы ищете веб-карту, связанную с жильем.
- Щелкните вкладку Issues.
- Щелкните вкладку Economic Opportunity. В поисковой строке введите vacant housing и нажмите Enter.
- В результатах поиска щелкните заголовок веб-карты с названием Owned, Rented, or Vacant Housing Units, принадлежащей lisa_berry.
Появится страница элемента карты, где вы можете прочитать о карте и содержащихся в ней данных. На этой карте показано, где больше распространено собственное жилье, арендованное жилье или свободное жилье. Данные на этой карте взяты из American Community Survey (ACS), который проводится Бюро переписи населения США. Эта карта является хорошей отправной точкой для вашего приложения.
Примечание:
Пятилетние оценки ACS обычно используются для принятия решений в области государственной политики и охватывают широкий спектр тем, таких как бедность, доход, жилье и многое другое. Чтобы узнать больше о слоях ACS, доступных в ArcGIS Living Atlas, просмотрите Learn about your community using Census ACS layers in Living Atlas.
Вам нужно использовать эту карту в общедоступном веб-приложении, поэтому, прежде чем продолжить, проверьте, существуют ли какие-либо особые условия или ограничения на использование контента.
- Прокрутите вниз страницы элемента и найдите раздел Условия использования.
Веб-карта лицензируется в соответствии с Условиями использования веб-сервисов и API для Esri. Вы можете узнать больше об этих условиях, щелкнув либо View Summary либо View Terms of Use. В краткой информации поясняется, что любой может использовать эту веб-карту как для внутреннего, так и для внешнего использования при условии указания авторства Esri и поставщиков данных.
- Прокрутите вверх и найдите раздел Сведения об авторах.
Это информация, необходимая для правильной атрибутации поставщиков данных. Вы будете использовать эту информацию позже.
Настройка веб-карты
На данный момент вы нашли веб-карту о занятости жилья, которую можно использовать в качестве основных ресурсов для своего веб-приложения, и подтвердили, что у вас есть разрешение на ее использование для вашего конкретного проекта. Далее вы сохраните копию веб-карты и перенастроите ее слои, чтобы они лучше соответствовали целям вашего веб-приложения.
- Прокрутите вверх страницы элемента и щелкните Войти. Войдите под учётной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- В верхней части страницы элемента щелкните кнопку Открыть в Map Viewer.
Примечание:
Если вы не видите кнопки Открыть в Map Viewer, щелкните стрелку рядом с Открыть в Map Viewer Classic и выберите Открыть в Map Viewer.
Появится карта.
- На панели Содержание (темной) щелкните кнопку Слои.
Подсказка:
Если вы не видите панели инструментов Содержание щелкните Открыть в новом Map Viewer вверху страницы.
Откроется панель Слои. Перечислены три слоя, содержащие данные о жилье на уровне штата, округа и переписного участка. Каждый слой настроен так, чтобы отображаться в разных масштабах, поэтому в данный момент виден только слой Tract.
Ваша группа по защите интересов занимается жилищными вопросами на местном уровне, поэтому вас интересуют только данные на уровне переписных участков. Вы сохраните копию веб-карты только со слоем Tract.
- На панели Слои на слое State щелкните кнопку Опции. Щелкните Удалить.
- Также удалите слой County.
Остаются только данные, относящиеся к вашему веб-приложению. Далее вы убедитесь, что он виден во всех масштабах.
- Щелкните слой Tract.
Панель Свойства появится на другой стороне карты.
Подсказка:
Если панель Свойства не видна на панели инструментов Настройки (светлая) щелкните кнопку Свойства.
- Прокрутите вниз на панели Свойства. Отрегулируйте бегунок Видимый диапазон, пока он не будет находиться в диапазоне от Весь мир до Комната.
- На панели инструментов Содержание щелкните кнопку Сохранить и открыть и щелкните Сохранить как.
- В окне Сохранить для Заголовка введите Housing map. В окне Краткая информация замените существующий текст следующим:
This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23
- Щелкните Сохранить.
Создание веб-приложения
Теперь у вас есть веб-карта, настроенная для ваших нужд. Вы создадите веб-приложение из этой карты с помощью ArcGIS Experience Builder. Вы разработаете компоновку приложения с картой и столбцом.
- На панели инструментов Содержание щелкните кнопку Создать приложение.
Появится список опций. Существует несколько продуктов ArcGIS, позволяющих создавать веб-приложения из веб-карт. Каждый предлагает разные инструменты и подходит для разных ситуаций. В этом проекте вы хотите в значительной степени контролировать внешний вид приложения, чтобы оно соответствовало как веб-карте, так и стилю вашей организации. Вы выберете ArcGIS Experience Builder, потому что он обеспечивает максимальный пользовательский контроль над настройками.
- Щелкните Experience Builder.
Появится галерея шаблонов. Эти шаблоны могут сэкономить ваше время за счет предварительной настройки компоновки проекта, но в этом уроке вы начнете с чистой канвы, чтобы научиться структурировать компоновку.
- На карточке Пустое полноэкранное приложение щелкните Создать.
- Если появится окно Начало работы, щелкните Пропустить.
ArcGIS Experience Builder появляется, показывая карту в центре канвы. Вы переименуете свой интерфейс более значащим названием.
- На ленте щелкните Интерфейс без названия и введите Housing Availability.
Далее вы убедитесь, что видите всю канву.
- В правом нижнем углу экрана щелкните кнопку Подогнать ширину под текущее окно.
- Если панель Вставка виджета еще не видна, на боковой панели инструментов щелкните кнопку Вставить.
- Прокрутите вниз панель Вставка виджета и найдите раздел Компоновка.
Виджеты компоновки помогают упорядочивать группы виджетов в приложении. Аккуратное изменение размера и позиционирование виджетов часто бывает проще, когда они находятся внутри виджета компоновки.
- Перетащите виджет Столбец на канву.
- На панели инструментов виджета Столбец щелкните кнопку положения и выберите Полная высота.
- Щелкните кнопку положения снова и щелкните Замкнуть влево.
Теперь, когда столбец на месте, вы измените размер карты. Одной из целей вашего проекта является то, что карта должна быть в центре внимания приложения, поэтому вы заставите ее заполнить всю канву.
- Щелкните виджет Карта, чтобы выбрать его. На панели инструментов карты щелкните кнопку положения и выберите Полный размер.
Карта расширяется, чтобы заполнить всю канву, а ее часть скрыта за столбцом. Далее вы определите экстент карты по умолчанию в настройках свойств карты.
- На панели Карта в разделе Начальный вид, щелкните Пользовательский и щелкните Изменить.
Появляется окно Изменить начальный вид.
- Приблизьтесь к своему сообществу или другому району США, который вас интересует, например, остров Манхэттен в Нью-Йорке.
- Нажмите OK.
Вы выполните еще несколько настроек для виджета Карта.
- На панели Карта в разделе Инструменты отключите Поиск.
Позже вы добавите виджет Поиск, который будет более управляемым.
- В нижней части панели Карта в разделе Компоновка инструментов в разделе Крупный и средний размер выберите вторую опцию.
Элементы управления навигацией по карте переместятся в правый нижний угол карты. Раньше они были скрыты за столбцом.
Наконец, вы отключите всплывающие окна. Позже в этом уроке вы добавите виджеты для отображения информации о количестве единиц жилья каждого типа в каждом районе. Эта информация сделает всплывающие окна ненужными.
- В нижней части панели Карта в разделе Опции выключите опцию Включить всплывающее окно.
- На панели инструментов конструктора нажмите кнопку Сохранить.
- Закройте вкладку браузера Map Viewer и вкладку браузера Esri Maps for Public Policy.
На этом уроке вы нашли веб-карту, изменили ее для своих задач и преобразовали в веб-приложение в ArcGIS Experience Builder.
Добавление и настройка виджетов
Теперь, когда вы настроили карту, пришло время добавить несколько виджетов, которые помогут пользователям понять и изучить данные. Вы добавите виджеты Диаграмма, Текст, Поиск и Меню.
Добавление виджета Диаграмма
Вы добавите круговую диаграмму в пустой столбец. Вы подключите диаграмму к данным на карте, чтобы она отображала жилищный состав выбранного переписного участка.
- При необходимости заново откройте приложение Housing Availability в ArcGIS Experience Builder.
- На панели Вставить виджет щелкните кнопку Поиск и введите диаграмма.
- В результатах поиска перетащите виджет Диаграмма в столбец.
В столбце появится пустой виджет Диаграмма. Остальная часть столбца выглядит прозрачной, так как по умолчанию она не имеет фонового цвета.
Далее вы настроите диаграмму так, чтобы она отображала информацию о жилье с карты.
- На панели Диаграмма щелкните Выбрать данные.
- На панели Выбрать данные разверните Housing map и щелкните Tract.
- На панели Диаграмма в разделе Tract, щелкните По умолчанию и выберите Выбранные объекты.
- В разделе Тип диаграммы щелкните Выбрать диаграмму, а на панели Тип диаграммы выберите Круговая диаграмма.
Для этих данных подходит круговая диаграмма, поскольку она разделена на три категории (занятые собственником, занятые арендатором и свободные), которые вместе составляют до 100 процентов единиц жилья.
- На панели Диаграмма в разделе Данные задайте следующие параметры:
- Для Типа категории выберите По полю.
- Для Статистики выберите Сумма.
- Для Числовых полей отметьте Vacant Housing Units, Owner-Occupied Housing Units и Renter-Occupied Housing Units.
- Для Сортировать по выберите Ось категории.
На диаграмме показано предупреждение Данные не найдены. Это предупреждение появляется, так как вы выбрали отображение выбранных объектов на диаграмме, а в настоящее время нет выбранных объектов.
- На панели инструментов конструктора щелкните Просмотр в реальном времени.
В режиме просмотра в реальном времени вы можете взаимодействовать со своим веб-приложением так же, как и пользователь. Вы не можете выбирать виджеты и перемещать их.
- Щёлкните на карте любой переписной участок.
Теперь, когда переписной участок выбран, круговая диаграмма становится синей, а предупреждение исчезает. Вы выйдете из режима просмотра в реальном времени, чтобы продолжить настройку виджета Диаграмма.
- Отключите Просмотр в реальном времени. Щелкните виджет Диаграмма.
Снова появится панель Диаграмма.
- На панели Диаграмма рядом с разделом Общие щелкните стрелку, чтобы развернуть этот раздел.
- Включите Легенду. Для Положения Легенды выберите По нижнему краю. Для Максимальная ширина введите 300.
Далее вы добавите цвет к диаграмме так, чтобы он соответствовал цветам на карте.
- Разверните раздел Срезы. На панели Цвет сектора выберите B25002_003E. В разделе Цветовой режим выберите По категории и щелкните кнопку настройки.
- Сотрите существующий текст и наберите Vacant housing units.
- Измените имя B25003_002E на Owner-Occupied housing units и B25003_003E на Renter-Occupied housing units.
Надписи на легенде диаграммы изменятся соответственно.
- На панели Цвет сектора выберите цвет рядом с Vacant housing units и щелкните Дополнительно.
- Для Hex введите #aa7b7b и нажмите Enter.
Цвет обновляется до приглушенного красного цвета.
- Измените цвет для Owner-Occupied housing units на #d3c268, желтый цвет. Измените цвет для Renter-Occupied housing units на #6b99b5, голубой цвет.
Диаграмма и ее легенда теперь соответствуют цветам карты. Если выбранный переписной участок окрашен желтым цветом, самый большой фрагмент круговой диаграммы также будет желтым.
Настройка диаграммы в соответствии с цветами на карте облегчает чтение диаграммы, а также позволяет использовать ее в качестве легенды карты.
- Включите Просмотр в реальном времени и щелкайте разные участки, чтобы наблюдать за изменениями на диаграмме.
Примечание:
Несколько переписных участков будут отображать только один или два среза, потому что они имеют только один или два типа жилья.
Настройка вида для пустых выборок
В некоторых ситуациях виджет Диаграмма по-прежнему будет отображать предупреждение Данные не найдены. Вы выберете переписной участок, который будет использоваться в качестве объекта по умолчанию. При первом открытии веб-приложения на диаграмме будут отображаться данные для объекта по умолчанию.
- На карте щелкните область без переписного участка, например, Центральный парк или любую акваторию.
Диаграмма вернется к виду Данные не найдены. Диаграмма также будет выглядеть так при первом открытии веб-приложения. Вы можете решить эту проблему, настроив вид для пустых выборок.
- На боковой панели инструментов щелкните кнопку Данные. На панели Данные щелкните карточку Housing map.
- В разделе Используется щелкните карточку Tract.
- Внизу панели отметьте Просмотр пустой выборки.
Виджет Диаграмма заполнится красными, синими и желтыми секциями. Эта настройка гарантирует, что диаграмма не будет отображаться пустой, если не выбран ни один объект.
- Рядом с отметкой щелкните кнопку Настройки.
Появится окно Просмотр пустой выборки. Здесь вы выбираете, какой переписной участок будет отображаться, если на карте не выбран ни один из них. На следующих шагах вы выберете Переписной участок 94 в округе Нью-Йорк, штат Нью-Йорк. Если вы решили центрировать карту над другим городом, вместо этого выберите участок в этом районе.
- На вкладке Фильтр щелкните Добавить и выберите Условие.
Появится незаполненное условие.
- Еще два раза нажмите Добавить и Условие.
Теперь там три условия. Вы будете использовать первое условие, чтобы сузить данные по штатам.
- Для первого условия щелкните OBJECTID и выберите State. Для второго меню выберите равно.
- Рядом с третьим меню щелкните кнопку Выберите тип источника и выберите Уникальный.
Теперь вы можете выбирать из списка всех уникальных значений в поле State.
- Щелкните третье меню. В поисковом окне введите new и выберите New York или интересующий вас штат.
- Настройте второе условие так, чтобы оно читалось как County равно New York County или интересующий вас округ. Если округ не отображается в третьем меню, щелкните Искать больше, чтобы открыть дополнительные результаты поиска.
Подсказка:
Не забудьте изменить тип источника на Уникальный.
- Настройте третье условие так, чтобы оно читалось как NAME равно Census Tract 94 или переписной участок в интересующей вас области.
- Убедитесь, что для элемента управления над условиями установлено значение И.
При выборе И объект должен удовлетворять всем трем условиям. В таблице показана одна строка для одного объекта, выбранного по трем условиям. На круговой диаграмме будут показаны результаты для этого переписного участка, если на карте ничего не выбрано.
- Щелкните Применить изменения.
Изменение внешнего вида диаграммы
Вы завершите виджет Диаграмма, настроив некоторые свойства его оформления. Вы начнете с удаления кнопок в верхней части виджета. Они предоставляют функции, которые не нужны в вашем приложении. Вы удалите их, чтобы они не отвлекали от сообщения карты.
- Отключите Просмотр в реальном времени и выберите виджет Диаграмма.
- На панели Диаграмма разверните раздел Инструменты. Отключите Выборку.
Две кнопки исчезнут из виджета Диаграмма.
- Щелкните вкладку Действие и щелкните вкладку Действие с данными. Отключите опцию Активировать действие с данными.
Третья кнопка исчезнет из диаграммы. Далее, вы измените цвет фона виджета Диаграмма.
- Щелкните вкладку Содержание и разверните раздел Оформление. Щелкните цвет фона и щелкните Дополнительно.
- Для Hex введите #000000. Для A введите 75.
A означает Альфа и управляет прозрачностью цвета. Карта теперь частично видна за виджетом Диаграмма. Однако текст практически не виден. Вы измените его на белый.
- Рядом с Элементами Текста щелкните кнопку настройки.
- На панели Элементы Текста рядом с Подписью легенды щелкните кнопку редактировать.
- Щелкните черный квадрат. В разделе Стандартные цвета выберите белый.
- На панели Диаграмма разверните раздел Срезы. Измените цвет Контура на черный.
Готовый виджет Диаграмма имеет белый текст на темном фоне.
Добавление виджета Текст
Далее вы добавите Текст, чтобы придать контекст карте, включая заголовок и подтверждение данных. Вы отформатируете различные части текста, чтобы сделать его более читаемым, и добавите несколько ссылок, по которым пользователи вашего приложения смогут найти дополнительную информацию о данных, отображаемых на карте.
- На боковой панели инструментов нажмите кнопку Вставить. На панели Вставить виджет очистите поиск. Найдите виджет Текст и перетащите его в столбец под диаграммой.
Виджет Текст автоматически разместится под виджетом Диаграмма с небольшим промежутком между ними.
- Дважды щелкнув виджет Текст, скопируйте и вставьте следующий текст:
Owned, Rented, or Vacant?
Click a Census Tract to see housing information for that area.
Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.
Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2015-2019 5-year estimates, Table B25002.
Включите пробелы между строками текста. Третья строка текста станет более понятной позже, когда вы добавите динамические элементы.
Подсказка:
Используйте Ctrl+Shift+V или Command+Shift+V, чтобы вставить текст без форматирования.
Далее вы измените высоту виджета Текст.
- На панели Текст щелкните вкладку Стиль. Рядом с Высотой щелкните кнопку со стрелкой и выберите Авто.
Благодаря этой настройке виджет Текст всегда будет достаточно, но не слишком высоким, чтобы можно было увидеть все его содержимое.
Далее вы выберете те же цвета текста и фона, что и для виджета Диаграмма.
- На панели Текст в разделе Фон щелкните Настроить, затем щелкните цвет Заполнить. В разделе Последние цвета выберите полупрозрачный черный цвет, который вы создали для фона круговой диаграммы.
- Щелкните закладку Содержание. В разделе Формат текста щелкните кнопку Цвет шрифта. В разделе Стандартные цвета выберите белый.
- В разделе Формат текста щелкните кнопку Центрировать.
Текст диаграммы теперь белый и выровнен по центру. Далее вы отформатируете первую строку текста - заголовок вашего приложения - так, чтобы она была крупнее и жирнее.
- Выделите первую строку текста. На панели инструментов текст щелкните кнопку Полужирный и измените размер на 25 пикселов.
Подсказка:
Если панель инструментов текст не отображается, измените свойства шрифта на вкладке Содержание на панели Текст.
Затем вы включите ссылку на ресурс U.S. Census Bureau для читателей, которые могут не знать, что такое переписной участок.
- Во второй строке текста выделите слова Census Tract. На панели Текст на вкладке Содержание в разделе Форматировать текст щелкните кнопку Ссылка.
- В панели Задать ссылку для Ссылка на выберите URL. Для URL скопируйте и вставьте https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf.
- Для опции Открыть в выберите Новом окне. Нажмите OK.
- Сделайте текст Census Tract полужирным.
Вы также получите ссылку на дополнительную информацию о American Community Survey. Ваша визуализация данных будет считаться более достоверной, если она предоставит информацию о том, как данные были собраны и кем.
- В последней сроке выделите текст American Community Survey (ACS) и свяжите его со следующим URL-адресом: https://www.census.gov/programs-surveys/acs/about.html.
- Сделайте текст American Community Survey (ACS) полужирным.
Поскольку виджет Текст содержит заголовок карты, вы поместите его вверху столбца.
- Перетащите виджет Диаграмма под виджет Текст.
Вы также уберете зазор между элементами столбца.
- Щелкните пустую нижнюю часть столбца или промежуток между виджетами Текст и Диаграмма, чтобы выбрать столбец.
- На панели Столбец для Зазор введите 0 пикселов.
Теперь виджеты Текст и Диаграмма отображаются как один элемент.
Добавление динамического текста
В третью строку текста вы добавите информацию о жилье, которая будет обновляться, чтобы отражать выборки на карте, так же, как и на диаграмме. Вы видели поля, доступные в данных, при настройке круговой диаграммы. Вы отобразите некоторые из этих полей в виджете Текст.
- Выберите виджет Текст. На панели Текст включите Подключение к данным. Щелкните Выбрать данные.
- На панели Выбрать данные разверните Housing map и щелкните Tract.
Теперь у виджета Текст есть доступ к данным жилья на карте.
- В виджете Текст выделите слово Tract.
Вы замените этот текст динамическим содержимым.
- На панели инструментов виджета Текст щелкните кнопку Динамическое содержимое.
- В окне Динамическое содержимое щелкните поле NAME.
В виджете Текст выделенный текст будет заменен на {NAME}. Также был добавлен дополнительный пробел между полем и запятой.
- Удалите дополнительный пробел.
- Замените следующие слова следующими полями:
- Замените слово County полем County.
- Замените слово State полем State.
- Замените слово Rent полем Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent).
- Замените слово Value полем Median Home Value (for Owner-Occupied Housing Units).
Подсказка:
Чтобы увидеть полное имя поля, наведите курсор на поле.
- Удалите лишние пробелы.
- Выделите все динамические поля полужирным шрифтом.
- Включите Просмотр в реальном времени и щелкайте по разным переписным участкам на карте.
Динамический текст обновляется, отражая информацию о жилье для выбранного участка.
Добавление виджета Поиск
Ранее вы удалили панель поиска из виджета Карта. Теперь вы замените ее виджетом Поиск. Этот виджет предлагает больше возможностей для настройки, чем встроенный инструмент. Например, вы можете разместить его в любом месте и изменить его внешний вид.
- Отключите Просмотр в реальном времени. На панели Вставить виджет щелкните виджет Поиск и перетащите его на карту.
- Разместите виджет Поиск в правом верхнем углу карты.
Текст подсказки виджета Поиск по умолчанию - Find address or place (Найти адрес или место). Вы перефразируете этот текст.
- На панели Поиск щелкните Новый источник поиска и выберите Источник локатора.
Появится панель Задать источник локатора.
- На панели Задать источник локатора щелкните Выбрать утилиту.
- На панели Выбрать утилиту на вкладке Организация в разделе Геокодирование выберите ArcGIS World Geocoding Service.
- На панели Установить источник локатора в разделе Параметры поиска для Подсказки введите Search for your area.
Текст подсказки в виджете Поиск изменится.
Далее вы подключите виджет Поиск к виджету Карта с действием.
- На панели Поиск щелкните вкладку Действие. Щелкните Добавить триггер.
- На панели Выбрать триггер щелкните Изменения выборки записей.
- В разделе Виджеты щелкните Карта. В разделе Выбрать действие щелкните Переместить к.
- Закройте панель Настройки действия.
Вы проверите виджет Поиск, чтобы убедиться, что данное действие настроено правильно.
- Включите Просмотр в реальном времени. В виджете Поиск введите название места. В результатах поиска щелкните одно из названий мест.
Карта приблизится к выбранному местоположению.
- На карте рядом с элементами управления масштабированием щелкните кнопку На главную.
- На панели инструментов конструктора отключите Просмотр в реальном времени и щелкните Сохранить.
Добавление страницы
Ваша визуализация данных завершена. Далее вы добавите соответствующую статью, написанную вашими коллегами. Можно добавить ссылку на историю в виджет Текст, но будет лучше, если эта история будет более заметной и будет восприниматься как часть веб-приложения. Вы добавите в приложение вторую страницу и встроите в нее историю.
- На боковой панели инструментов нажмите кнопку Страница.
- На панели Страница щелкните кнопку Добавить страницу и щелкните опцию Пустое полноэкранное приложение.
Появится новая пустая канва.
- В панели Страница наведите курсор на Страницу 2 и щелкните кнопку Дополнительно. Щелкните Переименовать.
- Переименуйте Страницу 2 в Историю. Переименуйте Страницу в Карту.
- На панели Вставить виджет добавьте виджет Встроить на канву.
- На панели инструментов виджета Встроить щелкните кнопку положения и выберите Полный размер.
В этом руководстве вы встроите статью How the Age of Housing Impacts Affordability, написанную Стивеном Авилесом из команды Esri Policy Maps.
- На панели Встроить для опции Встроить по выберите URL.
- Вставьте следующий URL-адрес: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.
История появляется на канве. Она была создана в ArcGIS StoryMaps.
Добавление виджета Меню
Далее вы добавите виджет Меню. Он даст пользователям возможность переключаться между двумя страницами вашего приложения. Чтобы меню не скрывало части истории, вы сначала добавите заголовок на страницу.
- На боковой панели инструментов нажмите кнопку Страница. На панели Страница щелкните страницу История.
- На панели История включите Заголовок.
В верхней части страницы появится синяя полоса.
- Для Высоты введите 60 пикселов.
- Наведите курсор на заголовок и щелкните Редактировать заголовок.
- На панели Вставить виджет добавьте виджет Меню к странице заголовка.
- Прикрепите виджет Меню к правой стороне.
- На панели Меню на вкладке Содержание для Стиля выберите Знак.
Синий цвет заголовка и виджета Меню не соответствует остальной части вашего приложения. Вместо того, чтобы менять цвета в нескольких местах, вы измените тему приложения.
- На боковой панели инструментов нажмите кнопку Тема. На панели Тема щелкните Перо.
Заголовок становится белым, а знак меню становится темно-серым.
Виджет Меню позволяет пользователям переключаться с истории на карту. Вы добавите тот же виджет Меню на страницу карты, чтобы она также могла переключаться на историю.
- Откройте панель Страница и щелкните страницу Карта.
Вам не нужно добавлять заголовок на страницу, так как пользователи могут перемещаться по карте, чтобы увидеть области, скрытые виджетами.
- На панели Вставить виджет добавьте виджет Меню на страницу.
- На панели Меню 2 для Стиля выберите Знак.
- Переместите виджет Поиск вниз и поместите его под виджет Меню.
- Включите Просмотр в реальном времени. Щелкайте кнопки меню, чтобы проверить переключение между двумя страницами.
- На панели Страница убедитесь, что кнопка Сделать главной страницей видна рядом со страницей Карта.
Эта кнопка указывает, какая страница является главной. Она появится при первом открытии приложения.
- Щелкните Сохранить.
Вы создали веб-приложение с двумя страницами, содержащими карту и историю. Вы настроили виджеты Карта, Столбец, Диаграмма, Текст, Поиск, Встроить и Меню. Вы подключили виджеты с помощью действий и динамического содержимого, чтобы помочь пользователям узнать о наличии жилья.
Оптимизация приложения для мобильных устройств
На данный момент вы достигли четырех целей веб-приложения:
- Карта должна быть в фокусе приложения.
- Приложение должно позволять пользователям искать свой собственный адрес или области интереса.
- Приложение должно включать динамический текст и диаграммы, чтобы пользователи могли исследовать данные и взаимодействовать с ними.
- Карта должна сопровождаться репортажем.
Осталась одна цель: приложение должно работать как на мобильном устройстве, так и на экране настольного компьютера.
В настоящее время ваше веб-приложение хорошо выглядит только на большом экране. Чтобы закончить проект, вы будете настраивать элементы, пока приложение не будет хорошо выглядеть на экране любого размера.
Оптимизация страницы истории для мобильных устройств
Чтобы страница истории работала на экранах разных размеров, необходимо изменить размер виджета Меню с относительного (в процентах) на абсолютный (в пикселах).
- При необходимости заново откройте приложение Housing Availability в ArcGIS Experience Builder. Включите Просмотр в реальном времени.
- При необходимости в меню приложения щелкните ячейку История, чтобы просмотреть страницу История.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с маленьким экраном, чтобы переключиться в режим маленького экрана.
Этот вид имитирует то, как ваше приложение будет выглядеть на мобильном устройстве.
- Прокрутите историю, чтобы убедиться, что ни текст, ни карты не обрезаны.
Истории ArcGIS StoryMaps уже настроены на изменение размера для мобильных устройств. Однако виджет Меню в заголовке страницы слишком короткий, чтобы его можно было прочитать.
Вы можете создать собственную компоновку для небольших экранов, но в этом случае вы можете решить эту проблему, изменив размер виджета Меню для всех размеров экрана. Решения, которые работают на всех размерах экрана, предпочтительнее пользовательских решений для разных размеров экрана, поскольку они упрощают редактирование и обслуживание приложения в будущем.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с большим экраном.
Необходимо переключиться в режим большого экрана, чтобы перенастроить виджеты.
- Отключите Просмотр в реальном времени. Щелкните Редактировать заголовок и щелкните виджет Меню.
- На панели Меню щелкните вкладку Стиль. Найдите свойство Ширина.
Свойство Ширина определяется в процентах от ширины экрана, которое становится слишком маленьким на узких экранах. Вместо этого вы зададите ширину в пикселах, чтобы убедиться, что она всегда одинакова, независимо от размера экрана.
- Рядом с Шириной щелкните кнопку Изменить единицы и выберите px.
- Установите Ширину на 250 пикселов.
- Переключитесь в режим маленького экрана.
Меню теперь достаточно большое, чтобы читать его на маленьком экране.
Оптимизация страницы карты для мобильных устройств
Далее вы настроите страницу карты, чтобы она работала на всех размерах экрана. Вы измените некоторые элементы на абсолютные размеры. Вы также настроите собственную компоновку для мобильных устройств.
- На панели Страница щелкните страницу Карта.
Все виджеты на этой странице слишком узкие. Большая часть текста не читается.
- На панели инструментов конструктора щелкните кнопку Отредактировать страницу для устройств со средним экраном, чтобы переключиться в режим среднего экрана.
Этот вид имитирует то, как ваше приложение будет выглядеть на планшете. Выглядит лучше, но легенда диаграммы и меню по-прежнему обрезаны. Вы отрегулируете их ширину до абсолютного размера.
- Переключитесь в режим большого экрана.
- Выберите виджет Меню. На панели Меню 2 на вкладке Стиль измените Ширину на 250 пикселов.
- Выберите виджет Поиск. Измените его Ширину на 250 пикселов.
- Щелкните под диаграммой, чтобы выбрать виджет Столбец. Установите его Ширину на 300 пикселов.
- Переключитесь в режим среднего экрана.
Изменения компоновки действуют на экране этого размера.
- Переключитесь в режим маленького экрана.
Изменения здесь неэффективны. Карта почти полностью скрыта за виджетами Текст и Диаграмма. Вы обсудили с коллегами и решили, что диаграмма не нужна для мобильной версии вашего веб-приложения. Вы скроете ее из виду, когда размер экрана мал. Для этого вам нужно создать собственную компоновку для маленьких экранов.
- Рядом с канвой щелкните Пользовательский.
- Во всплывающем окне предупреждения щелкните OK.
Теперь вы можете вносить изменения в компоновку, которые повлияют на приложение только при просмотре на маленьких экранах. Вы скроете виджет Диаграмма так, чтобы он появлялся, когда экран большой, и исчезал, когда экран маленький.
- Щелкните виджет Диаграмма. На его панели инструментов щелкните кнопку Переместить в лист ожидания.
Виджет Диаграмма исчезнет.
Важно, чтобы вы не удаляли виджет Диаграмма. Даже если вы находитесь в пользовательском режиме, если вы удалите виджет, он будет удален из всех версий приложения. Лист ожидания позволяет удалить виджеты из поля зрения, не удаляя их.
Подсказка:
Если вы случайно удалили виджет Диаграмма, щелкните кнопку Отмена на панели инструментов конструктора. Если позднее вы решите добавить Диаграмму обратно, вы сможете найти ее на панели виджета Вставка на вкладке Ожидающие.
Далее вы измените размер и положение виджета Текст так, чтобы он не скрывал виджеты Поиск и Меню.
- Щелкните виджет Текст. Перетащите его за пределы столбца и поместите на карту.
- Переместите виджет Столбец в лист ожидания.
- Прикрепите виджет Текст к левому нижнему углу.
- На панели Текст щелкните вкладку Стиль. Измените Ширину на 90 процентов, а Высоту - на 30 процентов.
Этот размер не позволяет элементам управления навигацией по карте скрывать какой-либо текст.
Примечание:
В пользовательском режиме вы можете изменить размер и положение виджетов, не затрагивая другие размеры экрана. Однако изменения других свойств будут видны на всех размерах экрана. Например, если вы выберете меньший размер шрифта для виджета Текст, он будет отображаться меньшего размера на всех размерах экрана. Если вам нужен меньший размер шрифта только на маленьких экранах, вы должны создать копию виджета Текст, переместить исходный виджет в лист ожидания и изменить размер шрифта в новом виджете.
Завершение и публикация
Чтобы завершить проект, вы предварительно просмотрите, опубликуете и поделитесь веб-приложением.
- На панели инструментов конструктора нажмите кнопку Сохранить.
- Когда появится сообщение Сохранено успешно, нажмите кнопку Предварительный просмотр.
Появится новое окно браузера с вашим приложением.
- Протестируйте приложение, исследуя карту, диаграмму и историю.
- Измените размер окна браузера, чтобы протестировать компоновку приложения на разных размерах экрана.
- Вернитесь на вкладку редактирования Experience Builder. На панели инструментов конструктора щелкните Опубликовать.
Вы также обновите настройки общего доступа к приложению, чтобы сделать его общедоступным.
- Щелкните кнопку Дополнительно и щелкните Изменить настройки публикации.
Отобразится страница элемента для веб-приложения.
- Щёлкните Опубликовать.
- Щелкните Для всех (общий) и затем Сохранить.
На этом уроке вы создали многостраничное веб-приложение с картой и историей о заполняемости жилья в США. Вы добавили интерактивные виджеты, чтобы улучшить понимание данных читателями. Наконец, вы изменили компоновку, чтобы она работала на экранах всех размеров.
Теперь вы и ваши товарищи по команде можете размещать свою работу на веб-сайте вашей группы защиты жилья или делиться ссылками на веб-приложение в социальных сетях.
Вы можете найти больше уроков в галерее учебных пособий Learn ArcGIS.