This template provides a starting point for creating your Web application. This easily configurable template allows you to define options for displaying a group. This read-me file explains how to setup and configure the template to run on your web server. We have also provided a few tips on how to personalize the template by adding a company logo and customizing the content.

Table of Contents

Install the Web application

These instructions assume that you have a Web server like Internet Information Services(IIS) installed and setup on your machine. If you are using another Web server, the general installation steps will be the same, but you will need to check your Web server's documentation for specific information on deploying and testing the application.

  1. Copy the contents of the zip file into your web server's root directory. In IIS, the default location for the web server's root folder is c:\inetpub\wwwroot.
  2. If your application edits the features in a feature service, enables the elevation chart, contains secure services or web maps that aren't publicly shared or generates requests that exceed 2000 characters you may need to setup and use a proxy page. One example where you may exceed the URL length is by using complex polygons as an input to a task. Another example is by specifying a spatial reference using well-known text (wkt). View the Using the proxy page help topic for details on installing and configuring a proxy page. After setting up the proxy, set the proxyUrl option in index.html to point to your proxy.
  3. Test the page using the following URL: http://localhost/[template name]/index.html, where [template name] is the name of the folder where you extracted the zip contents.

Top

Configure the application

Now let's configure the application to use a different group and modify configuration options.

  1. Every group on ArcGIS.com has a unique identifier (id). To find the group's id, navigate to ArcGIS.com, and find the group you want to display. If it is one of your groups, make sure it's shared with everyone (public).

    To find the group's id:

  2. Open the "/config/options.js" file in a text editor. The "/config/options.js" file is located in the config folder in the root directory of this application.
  3. To modify the group, replace the string for id with your group's id.
    	"group":"4a6f9fdc83ce44b6985115e4bd73cacd"
    
  4. By default, the application displays the ArcGIS.com group's title as the application's home heading, the group's summary as the application's home snippet and the group's description as the application's home side content. You can overwrite these by setting the following properties:
    	"homeHeading":"This is a custom title for your home page",
    	"homeSnippet":"This is a custom summary for home map",
    	"homeSideContent":"This is a custom description for your home page",
    
  5. By default, the application displays the ArcGIS.com map's title as the application's title and the map's summary as the application's subtitle. You can overwrite these by setting the following properties:
    	"mapTitle":"This is a custom title for your map",
    	"mapSnippet":"This is a custom subtitle",
    	"mapItemDescription":"This is a custom description",
    
  6. You can edit this file to set the following application properties:
  7. Save the file then test your application and note that it now displays your group and if specified your custom properties.

Top

Personalize the application

In this section, you will see how to personalize the application by adding a logo, adding custom HTMl to the footer, creating an Addthis.com account and developing a custom theme.

Top

You can personalize your site by adding a custom logo to the application's header next to the map title.

  1. First make sure your image is 75 pixels high. It can be any width up to 940 pixels.
  2. Copy your custom logo to the images subdirectory.
  3. Open "/config/options.js" in a text editor.
  4. Find the property of code that has siteBannerImage and add your image's title and extension.
    	"siteBannerImage":"images/yourNewLogo.png",
    
  5. Run the application. The custom logo should appear to the top navigation of the application's header.
    custom_logo

Top

Add custom HTML to the footer

You can insert HTML into many of the config values to further customize the template. However, the HTML needs to be escaped in order to be used in the config JSON.

  1. Create your custom HTML.
  2. Copy your custom HTML from a text editor.
  3. Escape the HTML by using either the JavaScript String Escape or JavaScript String encoding tools.
  4. Open "/config/options.js" in a text editor.
  5. Paste escaped HTML into the config value.
    	"footerDescription":"<div class=\"footerSmall\"><a href=\"\/about-esri\/contact.html\">Contact Us<\/a>&nbsp;| <a rel=\"nofollow\" href=\"\/legal\/privacy.html\">Privacy<\/a>&nbsp;| <a rel=\"nofollow\" href=\"\/legal\/index.html\">Legal<\/a>&nbsp;| <a href=\"\/site\/sitemap.html\">Site Map<\/a><\/div>",
    
  6. Run the application and the custom HTML should appear.
    custom_html

Top

Setup an AddThis account for analytics

You can create an account for the sharing plugin to get real-time analytics, weekly email reports, alerts, and more.

  1. Go to AddThis.com and navigate to the register page.
  2. After registering, go to your account settings.
    addthis_account
  3. Navigate to the profile page under account settings
  4. Copy your "Profile ID" from the page.
    addthis_profile_id
  5. Open "/config/options.js" in a text editor.
  6. Paste Addthis.com account ID into the config value.
    	"addThisProfileId":"Account Id",
    
  7. Run the application. The application will now be using your AddThis account.

Top

Create a new custom theme

You can personalize your site by creating a unique color scheme. This requires knowledge of CSS.

  1. Open css/themes.css in a text editor.
  2. Scroll to the bottom where the custom theme classes are defined.
  3. Change wherever it says ".custom" and name it what you would like to give your theme.
  4. Fill in all the empty CSS styles with how you'd like the theme styled.
  5. Save the file.
  6. Open "/config/options.js" in a text editor.
  7. Find the property of code that has "theme" and add the title of your theme.
    	"theme":"yourtheme",
    
  8. Use the CSS Generator to create CSS3 compatible styles such as rounded borders, shadows, and background gradients.
  9. Run the application and the custom theme should appear.

Top

Configure the template to work with your ArcGIS Portal

You can use this template with your organization's ArcGIS Portal by setting a few configuration options.

  1. Open "/config/options.js" in a text editor.
  2. Locate the options for "sharingurl" and "mobilePortalUrl".
    	"sharingurl":"http://www.arcgis.com/",
    	"mobilePortalUrl":"arcgis://www.arcgis.com/",
    
  3. Change these settings to point to your portal's URL instead of using ArcGIS.com's URL.
    	"sharingurl":"http://www.myorg.com/",
    	"mobilePortalUrl":"arcgis://www.myorg.com/",
    
  4. Save the file.
  5. Run the application and the template should be using your portal.

Top