Layout Template

This template provides a starting point for creating your Web application. This easily configurable template allows you to define the map, title and subtitle for the site. You've downloaded the Chrome template which was designed to have a clean, fresh look and rounded corners. This read-me file explains how to setup and configure the template to run on your web server. We've also provided a few tips on how to personalize the template by adding a company logo, customizing the content in the sidebar and adding an overview map.

Table of Contents

Install the Web application
Configure the application
Personalize the application

Add a logo
Modify the sidebar content

Using ArcGIS.com
Using HTML

Add an overview map

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.

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.

Test the page using the following URL: http://localhost/Chrome/index.html.

Top

Configure the application

Now let's configure the application to use a different map, title or subtitle.

Every saved map on ArcGIS.com has a unique identifier. To find the map id, navigate to ArcGIS.com, and find the map you want to display. If it is one of your maps, make sure it's shared with everyone (public). View the map details and copy the ID from the URL in the top of your browser. The section you need to copy is highlighted in yellow in the image below.

Open the index.html file in a text editor. You can edit this file to set the following application properties:
- webmap:unique identifier for the ArcGIS.com map.
- title:if not specified the ArcGIS.com map's title is used
- subTitle:if not specified the ArcGIS.com web map's summary is used
- bingMapsKey:if the map uses data from Bing Maps, enter your Bing Maps Key
- sidebarContent: by default the sidebar content contains the map's description. To define your own content set this value to "custom". See the Modify the Sidebar section for more details.

To modify the map, replace the string for webmap with your map's id.

function init(){
  //The ID for the map from ArcGIS.com
  webmap =  "dbd1c6d52f4e447f8c01d14a691a70fe";

If your map contains data from Bing Maps, enter your Bing Maps key.
```
bingMapsKey = "Enter your Bing Maps Key here";
 
```
By default, the application displays the ArcGIS.com map's title as the applications title and the map's summary as the subtitle. You can change this by setting the title and subtitle properties.

    title = "This is a custom title for your map";
    subtitle = "This is a custom subtitle";

Save the file then test your application and note that it now displays your map and if specified your custom title and subtitle.

Top

Personalize the application

In this section, you'll see how to personalize the application by adding a logo, moving the sidebar and modifying the sidebar content.

Top

Add a logo to the application

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

First copy your custom logo to the images subdirectory.
Open index.html in a text editor.

Find the section of code that has an id of "header" and add the code in red to this section.

<div id="header" dojotype="dijit.layout.ContentPane" region="top">
  <div id="logo"></div>
  <div id="title">
  </div>
  <div id="subtitle">
  </div>
</div>

Open the layout.css file from the css folder in a text editor. This file defines the look and formatting of the web application. In this step we'll add a new style rule that defines how the custom logo looks. Copy the code below and paste it at the bottom of the css file. Then modify the background url to match the name of your logo image. Modify the width to match the width of your custom logo.
```
#logo {
  float:left;
  width:65px;
  height:65px;
  margin:4px;
  background:url(../images/santabarbara.png) top left no-repeat;
}
```
The header area that contains the logo, title and subtitle has a default height of 80 pixels. If your image is large you may need to increase the height in order for it to display well. To increase the height, open the layout.css file and find the #header section. Try setting the header to the image height plus 8.We add 8 because if you look at the logo style you created in the last step a margin of 4px was specified to add a little extra space around the logo.
```
#header{
  border:solid 1px #999;
  height:80px;
```
Run the application and the custom logo should appear to the left of the title in the application header.

Top

Modify the sidebar content

The sidebar, section titled Map Info, displays the text you defined for the ArcGIS.com web map's description. Let's look at a few examples of how to modify this content.

Use ArcGIS.com to create sidebar content.

The default content for the sidebar comes from the map's description which is defined in ArcGIS.com. If this is a map you created, you can modify this content using the formatting tools in ArcGIS.com. ArcGIS.com has some great formatting tools that lets you add images, lists, hyperlinks and apply text formatting like setting the text color or making text bold. After saving the item your new content will display in the application.

Top

Use HTML to create sidebar content

An alternate approach is to build the sidebar content using HTML and CSS. There are lots of great online resources for learning HTML and CSS. w3schools.com has some basic tutorials and reference materials that can help you get started.

Before creating the HTML content for the sidebar, you will need to tell the application that you want to create custom content rather than using the map's description. In this section you will create a list of hyperlinks to other sites. Open index.html in a text editor and set the sidebarContent value to custom.
```
sidebarContent = "custom";
```
Find the section in index.html with the id of description. Your custom HTML content will go here.
```
  <div id="description">
    Add your HTML content here
  </div>
```
First we'll create the list. There are two types of HTML lists, ordererd lists (numbered) and unordered lists (bulleted). In this section we are creating a list of links, so we'll add a bulleted rather than numbered list. Bulleted lists are defined by adding a <ul> tag to the page with each item in the list defined using a <li> tag.
```
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
 
```

Now let's convert the link text to an HTML hyperlink. HTML hyperlinks are created using the <a> tag.

  <ul>
    <li><a href="http://www.esri.com/">ESRI</a></li>
    <li><a href="http://www.arcgis.com/home/">ArcGIS.com</a></li>
    <li><a href="http://resources.arcgis.com/">ArcGIS Resource Center</a></li>
  </ul>

The href attribute defines the link destination. The text for the link goes between the <a> open and closing tags.

Save and run the application and you will see the new links in the sidebar section. If you click the hyperlink note that it opens in the same page as the application. The <a> has a target attribute that defines where the hyperlink will open. To open the link in a new window set the target attribute to _blank.
```
  <a href="http://www.esri.com/" target="_blank">ESRI</a>
```
Now let's change the appearance of the links and list items. We'll use css to perform this task. Open layout.css in a text editor and paste the following style rules at the bottom of the file.
```
li a:link {
  color:#0060A7;
  text-decoration:underline;
}
li a:active {
  color:#2679BC;
  text-decoration:underline;
}
li a:visited {
  color:#649CCD;
  text-decoration:underline;
}
li a:hover {
  color:#003366;
  text-decoration:underline;
}
ul li{
  padding-bottom:10px;
  list-style-type: none;
  list-style-image: url(../images/listbullet.png);
}
```
The style rules above define the color for the hyperlinks and how the color should change when you click or hover over the link. The list-style-image property defines a custom image to use for the bullet. The colors in the above properties are defined using a hexadecimal notation that defines a combination of red, green and blue color values. These values are written as a set of 3 double-digit numbers with a # sign at the beginning. If you'd like to modify the colors use a site like colorcombos.com to find the hex value for various colors.

Top

Add an overview map

The ArcGIS API for JavaScript has several dijits that you can use to add additional functionality to the application. Let's look at how to add the OverviewMap dijit to the application. The OverviewMap dijit shows the current extent for the map within the context of a larger area.

Open layout.js in the javascript folder in a text editor and add the line in red to the dojo.require section.

dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("dijit.layout.StackContainer");
dojo.require("esri.dijit.OverviewMap");

The overview map dijit can display in its own window or attach to a corner of the map. In this example we are going to attach it to the corner of the map. However the map currently has navigation displayed which adds an icon to the map corners. Let's turn this off so we can display the overview map icon in the corner instead.To turn off the navigation images, set the nav value to false in this section of code from layout.js.
```
mapOptions: {
  slider: true,
  nav: false
```
Next find the section of code that sets the map to response.map and paste the code in red beneath that line. This code checks to see if the map is loaded, if it is it runs a function that adds the overview map to the application.
```
map = response.map;

if(map.loaded){
  addOverviewMap();
}
else{
  dojo.connect(map,"onLoad",addOverviewMap);
}

if (bingMapsKey) {
```
Now add the addOverviewMap function to the very bottom of the layout.js file.
```
function addOverviewMap() {
  var overviewMapDijit = new esri.dijit.OverviewMap({
    map: map,
    attachTo: "top-right",
    visible: true
  });
  overviewMapDijit.startup();
}
```
The code above adds an overview map to the upper right corner of the map. You can modify this location by specifying one of the other options ("top-right","bottom-right","bottom-left"). The visible parameter is set to true which expands the overview map when the applciation is first displayed. You can use additional parameters to modify the color and opacity of the rectangle, set the width and height etc. View the API Reference for the OverviewMap for more information. The OverviewMap can also be displayed in the sidebar. See the Overview Map - External sample for details.

Top