Создание собственного шаблона хаба

Шаблон хаба OneMap – это быстрый способ начать работу, он призван помочь вам в размышлениях о том, как лучше всего организовать ваши данные. Шаблон, который вы можете просмотреть здесь, представляет собой основу для дизайна хаба, затем вы сможете адаптировать его к особенностям вашей организации, добавив свой собственный стиль и изображения. Вы перейдете к ArcGIS Hub из своих приложений ArcGIS Online.

Примечание:

На протяжении всего этого руководства термин OneMap используется в качестве заполнителя для ГИС-брендинга вашего сообщества. Например, Ireland GeoHive, NC OneMap, IndianaMap, HIFLD Open Data и UAE 1Map.

Создайте свою инициативу хаба

Сначала вы создадите инициативу хаба на основе шаблона хаба OneMap.

  1. Войдите под учётной записью организации ArcGIS.
    Примечание:

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

  2. На ленте рядом с именем пользователя нажмите кнопку Приложения, чтобы развернуть список доступных вам приложений.
  3. Щелкните кнопку Hub.

    Кнопка Hub в списке приложений

    Появится страница Обзор Hub. Здесь можно ознакомиться с инициативами, ресурсами и участниками сообщества. Вы создадите инициативу, которую будете настраивать под себя.

  4. На ленте щелкните Новый и выберите Инициатива.

    Опция Новая инициатива

    На экране появятся некоторые опции, с помощью которых можно дать имя инициативе или просмотреть шаблоны. Выберите шаблон, который будете использовать.

    Примечание:

    Инициативы представлены в ArcGIS Hub Premium. Если вы не видите опцию Инициатива, проверьте свой уровень лицензирования ArcGIS Hub, а также свои права у своего администратора.

  5. Щелкните Найти шаблоны.

    Кнопка Найти шаблоны

    Для сужения результатов поиск доступных шаблонов можно отфильтровать.

  6. Под Опубликовано поставьте отметку для Esri.

    Отфильтруйте шаблоны до тех, которые опубликованы компанией Esri.

  7. Под Шаблоны в поле поиска введите onemap и нажмите Ввод.

    Появится инициатива OneMap.

    Инициатива OneMap

  8. Щелкните Активировать шаблон.

    Далее необходимо дать инициативе имя. Подумайте о том, как люди могут найти этот сайт, и выберите название, отражающее деятельность вашей организации.

  9. Для Присвоить имя инициативе введите выбранное имя и щелкните Начать.

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

    Эти страницы включают следующие:

    • Домашняя страница — целевая страница, которая привлекает внимание и помогает посетителям быстро получить представление о вашей юрисдикции
    • О нас — представьте на этой странице видение, цели и задачи вашей организации. Можно также предусмотреть возможность для посетителей использовать эту страницу для связи с вами.
    • Соавторы — выделите здесь те департаменты, агентства или другие организации, которые предоставили данные для вашего сайта. На этой странице можно настроить фильтр имеющихся данных по участникам и ссылки на их страницы.
    • Open Data — посетители вашего сайта могут искать и просматривать все данные, которые вы собрали в хабе.
    • Foundation Data — помогите другим понять ценность вашего фонда. Придайте своим данным контекст, тщательно продумав, какое место они могут занять в процессе принятия решений, присвоив им темы или категории. В разделе Основные руководства для администраторов 'OneMap' приведены советы, как это можно сделать, на основе глобальных примеров. Вы можете скопировать страницу Foundation Data для отражения каждой темы данных, выделенной вашей организацией.
    • Изучить — научите других использовать предоставленные вами данные. Есть ли что-то конкретное, что они должны знать? Здесь же можно поместить ссылки на технические руководства по ГИС.
    • Избранные темы — поделитесь здесь данными по темам. Темы, актуальные для вашей организации, могут отличаться от тем Foundational Data. Например, тема "Изменение климата" может содержать как темы данных по экологии, так и по инфраструктуре.

    Пока ваш сайт OneMap находится в процессе настройки, подумайте, как вы измените его под свои потребности. Рекомендуется начать с изображения, которое представляет вашу организацию.

Найдите изображение баннера для главной страницы

Теперь, когда вы создали инициативу хаба, вы должны настроить изображение баннера на главной странице в соответствии с требованиями вашей организации и назначением хаба. Вы выполните поиск на предпочитаемом вами сайте изображений и найдете изображение, которое можно бесплатно загрузить и использовать в своей инициативе хаба.

  1. Закройте окно Начало работы.
  2. Откройте вкладку веб-браузера и перейдите на предпочитаемый вами сайт изображений, например Unsplash.
  3. В поле поиска введите термин, например, mapping, и нажмите Enter.
  4. Выберите понравившееся изображение и щелкните его, чтобы увеличить.
  5. Загрузите изображение на свой компьютер, используя опции сайта.

    Примечание:

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

    Изображение, используемое для баннера Hub в этом учебном пособии; ваше изображение будет другим

  6. После завершения загрузки вернитесь к изображению на вкладке браузера.

    Перед тем как выйти из изображения, с помощью инструмента выбора цвета можно взять некоторые цвета из изображения. Это поможет вам брендировать свой сайт. Возможно, у вашей организации уже есть цвета, которые она хочет использовать. Независимо от того, какие цвета вы выберете, для обновления сайта вам понадобится шестнадцатеричный код или hex код цвета. Hex код - это один из способов идентификации определенного цвета.

    В этом примере вы будете использовать плагин Chrome под названием ColorZilla, чтобы выбирать цвета из выбранного вами изображения и находить их hex коды.

  7. Откройте вкладку веб-браузера Google Chrome и выполните поиск Colorzilla.
  8. Щелкните первый результат и щелкните ColorZilla for Chrome and Firefox. Щелкните Install ColorZilla, Добавить в Chrome и Добавить расширение.
  9. Рядом с адресной строкой нажмите кнопку Расширения и выберите ColorZilla.

    Выберите Colorzilla

    Теперь вы можете выбрать опцию в меню ColorZilla, чтобы определить hex код цветов из ресурсов на текущей странице Chrome или из ресурсов за пределами браузера Chrome.

  10. Выберите Pick Color Outside Browser. Наведите курсор на изображение и щелкните, чтобы увидеть, как отображается код hex.

    Щелкните несколько областей выбранного изображения, чтобы получить разные цвета и записать их коды hex. Обратите внимание, что hex коды начинаются с символа #. В руководстве будут использоваться три hex кода: #7CA8AF, #014165, and #7A8082.

  11. Вернитесь на сайт хаба.

    После запуска сайта он будет находиться в режиме редактирования.

    Сайт хаба в режиме редактирования

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

    Примечание:

    Если вы не в режиме редактирования, нажмите кнопку редактирования в крайней левой части страницы, чтобы начать редактирование.

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

    Кнопка Редактировать изображение

  13. На панели Строка компоновки в разделе Оформление для Фонового изображения щелкните Загрузить и выберите изображение для загрузки.

    Загрузка фонового изображения

    Изображение обновляется на главной странице.

    Обновленное изображение героя

  14. Наведите курсор на текст Наш OneMap и щелкните кнопку редактирования.

    Редактирование текста баннера

  15. Измените текст таким образом, чтобы он отражал название вашей организации, удалив при этом общий текст OneMap.

    Вы обновили первое изображение и текст, которые пользователи увидят при посещении вашего сайта.

Изменение темы хаба

Далее вы обновите тему страницы. Тема относится к цветам элементов, текста и кнопок на сайте.

  1. На первой странице сайта хаба в боковой панели нажимайте стрелку назад, пока не увидите пункт Настроить.

    Панель Настроить

  2. Под Настроить щелкните Тема.

    Опция Тема

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

  3. На панели Тема установите выбранные цвета или используйте следующие параметры:
    • Для Цвета фона глобальной навигации введите или скопируйте и вставьте #7ca8af.
    • В поле Цвет текста глобальной навигации введите #7a8082.
    • Для Цвета фона заголовка введите #014165.
    • Для Цвета текста основы введите #014165.

    Цвета темы изменены

  4. На ленте щелкните кнопку Сохранить.

    Кнопка Сохранить

  5. На панели Тема щелкните стрелку назад Настроить.

    Стрелка назад Настроить

  6. На панели Настройки щелкните Заголовок.

    Опция Заголовок

    Заголовок отображается в верхней части вашего сайта (под панелью глобальной навигации), а также на всех страницах и видах, прикрепленных к вашему сайту. Заголовок содержит название, логотип и меню ссылок.

    В разделе Заголовок можно обновить логотип в верхней части страницы, скопировав и вставив URL-адрес изображения или загрузив уже имеющееся изображение. Размер загружаемых изображений не должен превышать 3 МБ.

  7. Если у вас есть URL-адрес изображения или файл, который вы можете загрузить для заголовка, добавьте его сейчас.

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

    Теперь сайт хаба отражает общую тематику вашей организации.

Вы создали сайт хаба на основе шаблона OneMap, изменили его тему и добавили изображение главной страницы, соответствующее стилю и брендингу организации. Далее вы добавите ресурсы на страницу хаба.


Улучшите свой веб-сайт, добавив ресурсы

Теперь вы готовы улучшить свой сайт хаба за счет добавления ресурсов. Хаб – это пространство для совместной работы, и именно ресурсы делают его ценным для ваших партнеров и ГИС-сообщества.

Добавление ресурсов в раздел Hub

Далее вы измените раздел хаба Оказание воздействия. В этой части сайта можно поделиться историями успеха, демонстрирующими значение ваших усилий. Например, можно добавить карточки со ссылками на тематические статьи, приложения или интересные инициативы от вас и ваших партнеров.

  1. На первой странице сайта прокрутите страницу вниз и найдите раздел Оказание воздействия.

    Раздел Оказание воздействия

  2. Наведите курсор на область с несколькими приложениями и щелкните кнопку Редактировать.

    Кнопка Редактировать

    Появится панель Галерея Компоновка.

    На панели предусмотрено два способа выбора элементов, которыми вы хотите поделиться: Динамический (ссылка на ресурсы группы) или Вручную. В любом случае отображаемые ресурсы берутся из вашей организации ArcGIS Online. Вы можете регистрировать чужие приложения в своей организации или ссылаться на созданные вами. Убедитесь, что элементы опубликованы правильно, и ваша аудитория сможет их увидеть.

  3. Щелкните Ручной.

    Галерея шаблона OneMap содержит семь приложений. Вы добавите еще несколько.

  4. На панели Ресурсы щелкните Выбрать ресурсы.

    Появится окно Добавить ресурсы. Вы можете фильтровать исходные местоположения и типы ресурсов.

    Окно Добавить ресурсы

    Примечание:

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

  5. Добавьте некоторые элементы из своей организации.

    Элементы добавляются в галерею под существующими элементами. Вы можете удалять и переупорядочивать элементы на панели Галерея с помощью кнопок Удалить ресурсы и Сортировать ресурсы.

    Элементы раздела Оказание воздействия; новые элементы будут добавлены под последним приложением Air Quality Aware.

Выделение партнеров с помощью пользовательского компонента

Обладая простыми навыками фронтенд-разработки, вы можете создавать пользовательские компоненты для сайта OneMap. В нижней части главной страницы расположен пользовательский компонент для отображения списка ваших партнеров. Партнерами могут быть провайдеры данных, потребители данных, финансирующие организации и сторонники. Поощрение партнеров – один из способов признания их важной роли и обеспечения взаимной отдачи.

  1. На первой странице хаба прокрутите страницу в самый низ и найдите раздел Наши партнеры.

    Раздел Наши партнеры

    В шаблоне OneMap есть образцы логотипов партнеров, которые еще не связаны с веб-сайтами. Далее вы увидите, как изменить логотипы и установить ссылки.

  2. Чтобы просмотреть HTML-код, щелкните на строке приложений.
  3. Щелкните </>Edit in HTML.

    Опция Редактировать в HTML

    Появляется окно HTML. HTML в верхней части определяет стиль, например, обратите внимание на то, что в теге <style> включена прокрутка.

    Тег Style

    Под <div class=”scrollmenu”> вы увидите список элементов. Именно они представлены в галерее Наши партнеры.

    Элементы в галерее

    Следует обратить внимание на текст href=”#” и img src =.

    В HTML href означает ссылку. Вы замените символ # после href на ссылку на сайт партнера.

    Img src указывает на URL-адрес изображения, которое показывает, кто партнер. Это может быть изображение их логотипа или созданное вами изображение. Если у вас есть изображения на хостинге, на них можно сослаться здесь. Если у вас нет места для хостинга изображений, вы можете загрузить их на ArcGIS Online.

    Примечание:

    Если у вас нет изображений, вы можете использовать любое изображение в Интернете, на которое у вас есть права. Щелкните изображение правой кнопкой мыши и выберите Копировать адрес изображения, чтобы сохранить URL-адрес изображения, или выберите Сохранить изображение как..., чтобы загрузить изображение.

  4. При желании замените один или несколько # своими собственными партнерскими ссылками и обновите img src изображениями или логотипами ваших партнеров.

    Учебное пособие обновит ссылку на первое предоставленное изображение.

  5. Замените первый # в строке 24 на www.esri.com.

    Это установит ссылку для первого логотипа на главную страницу Esri.

    Установите ссылку для первого логотипа на веб-сайт Esri
  6. Щелкните Применить, чтобы сохранить изменения в галерее Наши партнеры. На ленте щелкните кнопку Сохранить.

Вы успешно выделили несколько партнеров на своем сайте хаба.

Обновление страницы в шаблоне хаба

Теперь, когда вы обновили главную страницу, вы разберетесь с другими страницами в шаблоне OneMap. Этот шаблон имеет несколько страниц, которые можно настроить с помощью готовых функций, не требующих кода или не требующих большого количества кода. Кроме того, различным темам сайта может быть посвящено несколько страниц. Вы создадите копию страницы OneMap Foundation Data.

  1. В панели Настройка нажмите кнопку с числом страниц (6 страниц для этого хаба).

    Число страниц

  2. Щелкните страницу OneMap Foundation Data, чтобы открыть ее.

    Страница OneMap Foundation Data

    Откроется страница с заголовком Transportation Data.

  3. На ленте нажмите кнопку Опции и выберите Повторить компоновку. Если будет предложено опубликовать сайт, щелкните Опубликовать.

    Кнопка Повторить компоновку

    Когда клонирование завершится, страница будет скопирована со всеми изменениями, которые вы внесли к этому моменту. Ваша клонированная страница будет скопирована с предыдущей страницы с номером _1 (и последующими номерами, если скопировано несколько).

  4. На ленте щелкните Страницы.

    Опция Страницы

    Клонированная страница отображается в списке вместе с другими страницами.

    Клонированная страница

    Теперь, когда вы клонировали страницу OneMap Foundation Data, вы дадите ей уникальное имя и удобный для поиска URL.

  5. Щелкните клонированную страницу, чтобы открыть ее, и щелкните Информация о странице.

    Опция Информация о странице

  6. Для параметра Информация о странице введите уникальное имя. В данном примере будет использоваться название Данные по транспорту.

    Имя новой страницы

    Далее необходимо отредактировать URL страницы в соответствии с обновленным именем страницы.

  7. Щелкните Редактировать настройки URL и введите имя вашей страницы.

    Описательная часть страницы

    Описательная часть – это текст, который находится в конце URL-адреса вашей страницы, поэтому важно изменить описательную часть после того, как вы изменили название страницы.

  8. В окне Редактирование URL-адреса страницы щелкните Сохранить. На ленте щелкните Сохранить, чтобы сохранить страницу.
    Подсказка:

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

    Каждый компонент, включая заголовок и главное изображение (большое изображение, размещенное в верхней части веб-страницы) страницы OneMap Foundation Data, можно изменить так же, как и главную страницу. Изучая страницу OneMap Foundation Data, подумайте, какие элементы можно изменить, чтобы продемонстрировать как свою организацию, так и саму тему данных. Например, вы можете выбрать обновление статистики по данным, лежащим в основе вашей страницы. Или же вы можете пополнить галерею соответствующими приложениями или другими сайтами, которые создают контекст для вашей темы.

Вы изменили шаблон OneMap под свои запросы. Вы обновили изображение главной страницы, изменили тему хаба и клонировали страницу. Вы можете применить эти навыки для изменения остальных страниц хаба в соответствии со стилем вашей организации и партнеров.