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.
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.
c:\inetpub\wwwroot
. Now let's configure the application to use a different map, title or subtitle.
function init(){
//The ID for the map from ArcGIS.com
webmap = "dbd1c6d52f4e447f8c01d14a691a70fe";
bingMapsKey = "Enter your Bing Maps Key here";
title = "This is a custom title for your map"; subtitle = "This is a custom subtitle";
In this section, you'll see how to personalize the application by adding a logo, moving the sidebar and modifying the sidebar content.
TopYou can personalize your site by adding a custom logo to the application's header next to the map title.
<div id="header" dojotype="dijit.layout.ContentPane" region="top">
<div id="logo"></div>
<div id="title">
</div>
<div id="subtitle">
</div>
</div>
#logo {
float:left;
width:65px;
height:65px;
margin:4px;
background:url(../images/santabarbara.png) top left no-repeat;
}
#header{
border:solid 1px #999;
height:80px;
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.
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.
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.
sidebarContent = "custom";
<div id="description">
Add your HTML content here
</div>
<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>
<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.
<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>
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.
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.
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("dijit.layout.StackContainer");
dojo.require("esri.dijit.OverviewMap");
mapOptions: {
slider: true,
nav: false
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) {
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.