Make the hub template your own
The OneMap hub template is a quick way to get started and is designed to assist you while you think about how your data might be best organized. The template, which you can view here, provides the baseline for your hub design and then you can customize it to your organization by adding your own style and imagery. You will access ArcGIS Hub from your ArcGIS Online apps.
Note:
Throughout this tutorial, the term OneMap is used as a placeholder for your community GIS branding. For example, Ireland GeoHive, NC OneMap, IndianaMap, HIFLD Open Data, and UAE 1Map.
Create your hub initiative
First, you will create a hub initiative from the OneMap hub template.
- Sign in to your ArcGIS organizational account.
Note:
If you don't have an organizational account, see options for software access.
- On the ribbon, next to your username, click the apps button to expand the list of apps that are available to you.
- Click the Hub button.
The Hub Overview page appears. Here, you can see initiatives, content, and the members of the community. You will create an initiative that you will customize.
- On the ribbon, click New and choose Initiative.
Some options will appear on your screen that you can use to give your initiative a name or to browse templates. You will choose a template to use.
- Click Browse Templates.
You will filter the search for available templates to narrow down the results.
- Under Published By, check the box for Esri.
- Under Templates, in the search box, type onemap and press Enter.
The OneMap initiative appears.
- Click Activate Initiative.
Next, you must give your initiative a name. Consider how people may find this site and choose a name that reflects your organization.
- For Give Your Initiative a Name, type the name you chose and click Go.
Activating the initiative takes about a minute. During this time, a site is being configured with a home page and several other pages that have been found to be the most used on data-sharing portals around the world.
These pages include the following:
- Home—A landing page that leads with impact and helps visitors gain a quick understanding of your jurisdiction.
- About—Introduce your organization’s vision, goals, and objectives on this page. You can also include a way for visitors to use this page to contact you.
- Contributors—Highlight those departments, agencies, or other organizations who have contributed data to your site here. You can configure this page to filter available data by contributor and link to their pages.
- Open Data—Visitors to your site can search and browse all the data you’ve curated in the hub.
- Foundation Data—Help others understand the value of your foundation. Give your data context by carefully considering where it might fit in the decision-making process by assigning it themes or categories. See Essential Guides for OneMap Administrators for tips on how you might do this based on global examples. You may want to copy the Foundation Data page to reflect each data theme your organization identifies.
- Learn—Teach others how to use the data that you provide. Is there something specific they should know? You can also link to GIS technical guides here.
- Featured Topics—Share data by topic here. Topics that are relevant to your organization might be different than Foundational Data themes. For example, a Climate Change topic may house both Environmental- and Infrastructure-related data themes.
While your OneMap site is being configured, take a moment to consider how you will make it yours. It is recommended that you start with an image that represents your organization.
Find a banner image for the home page
Now that you have created the hub initiative, you will customize the home page banner image to match your organization and the intended purpose of the hub. You will search on Unsplash to find an image that is free to download and use in your hub initiative.
- Close the Get Started window.
- Open a web browser tab and go to Unsplash.
- In the search box, type mapping and press Enter.
- Choose an image that you like and click it to enlarge it.
- Right-click the image and choose Copy image address.
Note:
You can use an image you select from the Unsplash website, or another site, or one you have on hand. The tutorial will use the Unsplash image with this URL: https://images.unsplash.com/photo-1504697570352-47c3bbc09af9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80
Before you leave the image, you’ll use a color picker to grab some of the colors from the image. These will help you brand your site. Your organization may already have colors they want to use. No matter which colors you choose, you will need the hexadecimal code, or hex code, of the color to update the site. A hex code is one way of identifying a specific color.
For this example, you will use a Chrome plug-in called ColorZilla to choose colors from the photo you picked and find their hex codes.
- Open a Google Chrome web browser tab and search for Colorzilla.
- Click the first result and click Add to Chrome and click Add extension.
- Next to the address bar, click the Extensions button and click ColorZilla.
You can now choose an option from the ColorZilla menu to identify the hex code of colors from content in the current Chrome page or from content outside the Chrome browser.
- Point to the image to see how the hex code displays.
If using an image you selected, click several areas in the image to grab different colors and record their hex codes. Note that hex codes start with a # symbol. The tutorial will use three hex codes: #7CA8AF, #014165, and #7A8082.
- Return to the hub site.
After launching the site, it will be in edit mode.
You can tell you’re in edit mode when the menu options to customize the hub appear on the side.
Note:
If you aren’t in edit mode, click the edit button on the far left of the page to begin editing.
- Point to the image on the top of the home page to make a menu appear. On the menu, click the edit button to edit the image.
- On the Layout Row panel, under Appearance, for Background Image, paste the URL you copied from Unsplash, over the current URL.
The image updates on the main page.
- Point to the Our OneMap text and click the edit button.
- Change the text to reflect your organization’s name, while also removing the generic OneMap text.
You’ve updated the first image and text that people will see when they visit your site.
Modify the hub theme
Next, you’ll update the theme of the page. The theme refers to colors for elements, text, and buttons throughout the site.
- On the front page of the hub site, in the side panel, click the back arrow until you see Customize.
- Under Customize, click Theme.
To customize the theme for the hub, you will enter the different colors that you extracted from the home page image.
- In the Theme panel, set your selected colors or use the following parameters:
- For Global Nav Background Color, type or copy and paste #7ca8af.
- For Global Nav Text Color, type #7a8082.
- For Header Background Color, type #014165.
- For Body Link Color, type #014165.
- On the ribbon, click Save.
- In the Theme panel, click the Customize back arrow.
- In the Customize panel, click Header.
A header appears across the top of your site (below the global navigation bar) and on all pages and views attached to your site. The header contains your site's title, logo and menu links.
In the Header section, you can update the logo at the top of the page by copying and pasting an image URL or uploading an image you already have. Uploaded images must be under 3 MB in size.
- If you have an image URL or file that you can upload for the header, add it now.
Alternatively, you can leave the logo provided in the template.
Now the hub site reflects the overall theme of your organization.
You have created a hub site from the OneMap template, modified its theme, and added a home page image that suits the organization's style and branding. Next, you will add content to the hub page.
Enhance your website by adding content
Now you are ready to enhance your hub site more by adding content. The hub is a collaborative space and the content is what makes it valuable to your partners and the GIS community.
Add content to a hub section
Next, you will modify the Making an impact section of the hub. This part of your site is a good place to share success stories demonstrating the value of your efforts. For example, you can add cards that link to featured stories, apps, or engaging initiatives from you and your partners.
- On the front page of your site, scroll down and find the Making an impact section.
- Point to the area where there are several apps and click the edit button.
The Layout Gallery panel appears.
In the panel provides two ways to select the items you want to share: Dynamic (referencing content from a group) or Manual. In either case, the content that is shown is sourced from your ArcGIS Online organization. You can register other's apps within your organization or reference ones that you have created. Ensure that the items are shared correctly so your audience can see them.
- Click Manual.
The Gallery of the OneMap template is populated with seven apps. You will add a few more.
- In the Content panel, click Select Content.
The Add Content window appears. You can filter the source locations and the types of content.
Note:
The apps shown in your window may be different than what the image shows.
- Add some items from your organization.
The items are added to the gallery below the existing items. You can delete and rearrange the items in the Gallery pane by using the Remove Content and Sort Content buttons.
Highlight partners with a custom component
With some simple front-end development skills, you can create custom components for your OneMap site. At the bottom of the front page, there is a custom component to list your partners. Partners may include data providers, data consumers, funders, and champions. Promoting your partners is one way to recognize their important role and help reciprocate the benefits of their participation.
- On the front page of the hub, scroll to the bottom and find the Our Partners section.
In the OneMap template, there are sample partner logos that do not yet link to websites. Next, you'll see how to change the logos and set the links.
- To view the HTML code, click the row of apps.
- Click </>Edit in HTML.
The HTML window appears. The HTML at the top determines the style, for example, notice in the <style> tag that scrolling is enabled.
Under <div class=”scrollmenu”> you’ll notice a list of items. These are what is displayed in the Our Partners gallery.
Things to take note of are the href=”#” and the img src = text.
In HTML, href refers to a link. You will replace the # after href with the link to a partner’s website.
Img src points to a URL of an image that shows who the partner is. This could be an image of their logo, or an image you’ve created. If you have hosted images, they can be referenced here. If you don’t have a place to host images, you can upload them to ArcGIS Online.
Note:
If you don’t have images, you can use any image by right-clicking the image online and choosing Copy Image Address.
- Optionally, replace one or more # with your own partner links and update the img src with your partner images or logos.
The tutorial will update the link for the first provided image.
- Replace the first #, in line 24, with www.esri.com.
That sets the link for the first logo to the Esri homepage.
- Click Apply to save your changes in the Our Partners gallery. On the ribbon, click Save.
You’ve successfully highlighted some partners on your hub site.
Update a page in the hub template
Now that you’ve updated the front page, you will manage the other pages within the OneMap template. This template has several pages you can customize with out-of-the-box, no-code, or low-code features. You can also represent different topics or themes of the site with more than one page. You will make a copy of the OneMap Foundation Data page.
- In the Customize panel, click the number of pages button (6 pages for this hub).
- Click the OneMap Foundation Data page to open it.
A page with the title Transportation Data opens.
- On the ribbon, click the Options button and choose Clone Layout.
The page will be copied with any changes you have applied to that point. Your cloned page will be copied from the previous page with _1 (and subsequent numbers if copied more than once).
- On the ribbon, click Pages.
The cloned page is listed with the other pages.
Now that you’ve cloned the OneMap Foundation Data page, you will give it a unique name and a findable URL.
- Click the cloned page to open it and click Page Info.
- For Page Info, type a unique name. For this example, the name Transportation data will be used.
Next, you will edit the page URL to match the updated page name.
- Click Edit URL Settings and type the name of your page.
The page slug is the text that is at the end of the URL for your page, so it is important to change the page slug after you change a page name.
- In the Edit Page URL window, click Save. On the ribbon, click Save to save the page.
Tip:
Your hub site is currently an unpublished draft. Click the down arrow next to Save to see the options to preview or publish it.
Each component, including the title and hero image (the large image placed at the top of a webpage) of the OneMap Foundation Data page, can be modified in the same way as the main page. In exploring the OneMap Foundation Data page, consider what elements you could modify to showcase both your organization and the data theme itself. For example, you may choose to update statistics on the data behind your page. Or, you may choose to update the gallery with relevant applications or other sites that give context to your theme.
You have modified the OneMap template to make it your own. You have updated the home page image, modified the hub’s theme, and cloned a page. You can apply these skills to modify the remaining hub pages to match the style of your organization and partners.
