Site Design Layout as of 18 August 2015
Esri Open Data Revision of July 2015
The configuration settings on this page illustrate how the City of Rockville's ArcGIS Open Data site layout was configured. Some settings, such as names and URLs, have been generalized with placeholders to be modified for your organization. This layout is simple and quick to implement. The ability to administer data services and ArcGIS Online is assumed.
You will need the following:
- One or more publicly accessible data services, with at least one data category listed in the tag list for each
- One or more ArcGIS Online Groups shared publicly and designated as available for use in Open Data site, and having shared to the Group the datasets above
- Site name for display purposes
- Network accessible favicon image file (optional)
- Set of network accessible data catetory icon image files
- Prefix name for the site URL, e.g., "data" for data.accountname.opendata.arcgis.com
- Network accessible logo image file for the site header (optional)
- Codes to replace the header and title bar background colors (optional)
- Contact email for mailto tag (optional)
Open Data Site Management
Management of ArcGIS Open Data sites can be accessed through ArcGIS Online under My Organization. Once enabled, the Management site can be opened directly by the URL opendata.arcgis.com, signing in, and selecting Manage Sites from the account menu.
The management page has a Manage Sites tab where you can have one or more sites, and where it is convenient to create new test sites and leaving them set at Private until they are ready to publish or remove. There is also an Organization Info tab for supplying organizational details.
When working on the various configuration pages which make up a site, be sure to make use of the Save button found at the bottom of most of them.
Configure Site Tab
This is also the first page after clicking Create New Site on the ArcGIS Open Data Page.
- Site Name = [Select a Name]
- Browser Icon, optional (favicon) = http://domain/favicon.ico
- Site URL [prefix] = data (or other choice)
- Custom Domain = [ N/A unless you have one]
- Site is = Public (keep Private while in development)
- Set Extent = Map Navigation or Draw Extent
- Basemap Option = Default Basemaps or Custom Basemaps
Capabilities Tab
(your choices may vary)
- Charts = Enabled
- Enhanced Search = Enabled
- Locations Summary (beta) = Enabled
- Geohash Visualization (beta) = Enabled
- Smart Map Visualization (beta) = Enabled
- Local Projections (beta) = Disabled
- User Sign In (beta) = Disabled
- Comments (beta) = Disabled
Manage Data Tab
- Selected Open Data Groups = [Click Add on the left to include your ArcGIS Online Group(s)]
- Check (or UnCheck) box for "Only Groups in your Organization"
Design Layout Tab
Site Header Wizard Tab
- Site Name = [header text as desired; optional depending on logo image]
- Site Logo Image URL, optional = http://domain/image
Site Header Code Tab - Header HTML
Changes will disable Wizard generated code. Do not alter if default Header Wizard is sufficient.
Site Header Code Tab - Header CSS
The following CSS snippets were pulled from element inspection of the default site layout. Copy and paste the code (without the arrows and suggestions) in the Header CSS box in the Site Header Code tab. Make appropriate changes for the header and title bar. When done, click Save and then Preview Site.
#header {
position: relative;
width: 100%;
z-index: 202;
min-height: 60px!important; <--- edit min height to fit logo image
height: auto;
background: #fff; <--- edit header background color
box-shadow: 0 0 5px #555;
}
.header-image {
float: left;
height: 50px; <--- edit height to actual size of logo image
margin-bottom: 10px;
padding: 0 20px 0 0;
}
#title-bar-region {
position: relative;
width: 100%;
background-color: #Transparent; <--- edit title bar background color
z-index: 201;
box-shadow: -5px 0 5px #555;
font-family: "Avenir LT W01 65 Medium",Arial,sans-serif;
min-height: 50px;
}
#title-bar-region .search-nav-item {
cursor: pointer;
position: absolute;
left: 490px;
min-width: 200px;
color: #767676; <--- edit color of text ("SEARHCH WITHIN MAP") to contrast better with title bar background
font-size: 14px;
text-align: left;
white-space: nowrap;
}
Body Content Code Tab
These revisions will replace the Wizard code and disable the Body Content Wizard.
The HTML code for the body makes use of the site CSS to place category icons at established row and column positions. The positions shown worked well with the 100-pixel size icons chosen from the site Icons8.com.
Each icon represents a data category from the tags chosen for the datasets when they are registered with ArcGIS Online. The hyperlink for each category icon is composed to use its category as a keyword query (as opposed to the broader q query) so that it makes use only of tags and not titles or description, and the resulting list of datasets is ordered alphabetically by name.
Once the body is composed, revisit the first line with class="custom-layout" to set the min-height value to fit the body content.
To do this, modify then copy and paste the following code in the Body Content Code box, Layout HTML. When done, click Save and then Preview Site.
- Choose the col and row values to set the icon positions
- Compose the Open Data hyperlinks with category keywords (in the URL, accountname refers to the ArcGIS Online account)
- Set the icon image sources
- Compose the corresponding text hyperlinks, making use of the same Open Data hyperlinks and categories
- The last icon, with no keyword, will display all datasets
<div class="custom-layout" style="min-height:500px;">
<div class="col-1 row-1 sizex-10 sizey-2">
<h3>Body Title</h3>
<p>Body Text</p>
</div>
<div class="col-1 row-2 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category1&sort_by=name"><img src="http://domain/Category1.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category1&sort_by=name">Category1</a></h4></p></p>
</div>
<div class="col-3 row-2 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category2&sort_by=name"><img src="http://domain/Category2.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category2&sort_by=name">Category2</a></h4></p></p>
</div>
<div class="col-5 row-2 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category3&sort_by=name"><img src="http://domain/Category3.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category3&sort_by=name">Category3</a></h4></p></p>
</div>
<div class="col-7 row-2 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category4&sort_by=name"><img src="http://domain/Category4.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category4&sort_by=name">Category4</a></h4></p></p>
</div>
<div class="col-9 row-2 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category5&sort_by=name"><img src="http://domain/Category5.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?keyword=category5&sort_by=name">Category5</a></h4></p></p>
</div>
<div class="col-5 row-4 sizex-2 sizey-2">
<p><p align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?sort_by=name"><img src="http://domain/image.png" border="0" alt="highlight 1"></a><br><h4 align="center"><a href="http://prefix.accountname.opendata.arcgis.com/datasets?sort_by=name">All Data</a></h4></p></p>
</div>
</div>
Footer Wizard Tab
Make use of the Footer Wizard to provide a copyright and useful links for an email contact, the Esri Open Data help page for consumers, and an acknowledgment link to Icons8.com if used as a source of icons.
Replace the Wizard tab content with the following, modified for your organization.
<a href="mailto:recipient@domain.com?Subject=Open Data" target="_top">Contact</a> | <a href="http://doc.arcgis.com/en/open-data/consumer/find-data.htm" target="_blank">Help</a> | <a href="http://icons8.com/" target="_blank">Icons8