-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathesri_readme.html
160 lines (157 loc) · 12.9 KB
/
esri_readme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html>
<head>
<title>Layout Template - Read Me</title>
<style>
.selector{color:red;}
.heading{
background-color:#D8E0E2;
background-repeat:repeat-x;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
color:black;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
letter-spacing:1.1px;
margin:15px 0 10px;
padding:3px 10px;
text-align:center;
}
</style>
</head>
<body>
<a name="top"></a>
<p>This template provides a starting point for creating your Web application. This easily configurable template allows you to define the map, title and links for the site. This read-me file explains how to setup and configure the template to run on your web server.</p>
<div class="heading">Table of Contents</div>
<ul>
<li><a href="#deploy">Install the Web application</a></li>
<li><a href="#configure">Configure the application</a></li>
<li><a href="#options">Specify map options</a></li>
</ul>
<a name="deploy"></a>
<h3 class="heading">Install the Web application</h3>
<p>These instructions assume that you have a Web server like <a href="http://www.iis.net/">Internet Information Services(IIS)</a> 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.
<ol>
<li>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 <code>c:\inetpub\wwwroot</code>. </li>
<li>If your application edits 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. Common situations where you may exceed the URL length are, using complex polygons as input to a task or specifying a spatial reference using well-known text (wkt).
View the <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#ags_proxy">Using the proxy page</a> help topic for details on installing and configuring a proxy page. After setting up the proxy set the <code>proxyurl</code> option in index.html to point to the location of your proxy. </li>
<li> 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.
</li>
</ol>
<a href="#top">Top</a>
<a name="configure"></a>
<h3 class="heading">Configure the application</h3>
<p>Now let's configure the application to use a different map, title or subtitle.
<ol>
<li>Every saved map on ArcGIS.com has a unique identifier. To find the map id, navigate to <a href="http://www.arcgis.com/">ArcGIS.com</a>, 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.</li><br />
<img src="documentation/findmapid.png"/><br /><br />
<li>Open the index.html file in a text editor. You can edit this file to set the following application properties:
<ul>
<li><b>webmap:</b> Unique identifier for the ArcGIS.com map.</li>
<li><b>appid:</b> Unique identifier for the ArcGIS.com map app. No need to specify if a webmap id has been given.</li>
<li><b>title:</b> If not specified the ArcGIS.com map's title is used</li>
<li><b>description:</b> By default the application uses the description for the web map from ArcGIS.com. Add custom text here if you want to replace the default description.
<li><b>bingmapskey:</b> If the map uses data from Bing Maps, enter your Bing Maps Key</li>
<li><b>Theme:</b> Specify a color theme for the application. Valid values are: gray|purple|blue|green|orange.</li>
<li><b>bitlyUrl</b> The application using the bitly service to create a short url to use when sharing links to the application via twitter, email and facebook. If you want to use
this service you will need to sign up for a key and login at <a target="_blank" href="http://bitly.com/a/sign_up?rd=/pages/tools">bitly.com</a>. Once you have the login and key enter your values here.
</li>
<li><b>basemapgroup:</b> Specify the title and owner of an ArcGIS Online group that contains the basemaps to display in the Basemap Gallery. The Basemap Gallery lets users of the application choose a new basemap for the current map. All operational layers will persist - only the basemap will change. </li>
</ul><br />
<li>To modify the map, replace the string for webmap with your map's id. For example:</li>
<pre>
function init(){
//The ID for the map from ArcGIS.com
webmap = "<span class="selector">dbd1c6d52f4e447f8c01d14a691a70fe</span>";
</pre>
<li>If your map contains data from Bing Maps, enter your <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/ve_getting_started.htm">Bing Maps key</a>.
<pre>
bingmapskey = "<span class="selector">Enter your Bing Maps Key here</span>";
</pre></li>
<li>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.</li>
<pre>
title = "<span class="selector">This is a custom title for your map</span>";
subtitle = "<span class="selector">This is a custom subtitle</span>";
</pre>
<li>In order to execute a print task, you need to specify a link to your print service. You may also want to update the list of printLayouts to add/remove any layouts you'd like to display in the print button's drop down list. </li>
<pre>
printtask:"<span class="selector">http://<link to your print service>/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task</span>",
</pre>
<li>Save the file then test your application and note that it now displays your map and if specified your custom title and subtitle.</li>
</ol>
</p>
<a href="#top">Top</a>
<a name="options"></a>
<h4 class="heading">Specify Map Options</h4>
<ol>
<li>When creating a new map you can specify optional parameters that define various map options like whether pan arrows or a slider are displayed, if popups defined in ArcGIS.com display and if the map supports
continous pan across the dateline. View the API reference for the <a href="http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi_start.htm#jsapi/map.htm">Map</a> class for more details. Note: continous pan across the dateline is only supported if the map's spatial reference is WGS84 or Web Mercator. </li><br />
<li>To change the map options in your application open the layout.js file
search for mapOptions then add or remove map options.</li><br />
<li>You may set "true" to display or "false" to hide the following items (positions are shown in the image below):
<ul>
<li><b>displaytitle:</b> Map title on the top.</li>
<li><b>displaylegend:</b> Legend on the left panel.</li>
<li><b>displaysearch:</b> Search textbox on the menu bar. An input address will be located using the <b>addressToLocations</b> method in the <b>esri.tasks.Locator</b> class. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/locator.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displaylayerlist:</b> Layer list on the menu bar.</li>
<li><b>displaybookmarks:</b> Bookmarks on the menu bar.</li>
<li><b>displaydetails:</b> Details tab panel. When true, details will appear in the details pane if the web map’s description has been set.</li>
<li><b>displaytimeslider:</b> Timeslider under the map. Only visible when time-sensitive layers are included in the map.</li>
<li><b>displayprint:</b> Print button on the menu bar. The current map view will be printed using the <b>esri.tasks.PrintTask</b> class. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/printtask.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displayslider:</b> Zoom-in and zoom-out buttons to the upper-left corner of map.</li>
<li><b>displaymeasure:</b> Measure tool on the menu bar. A measurement widget using the <b>esri.dijit.Measurement</b> class will be activated. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/measurement.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displaybasemaps:</b> Basemap gallery on the menu bar. A basemap gallery using the <b>esri.dijit.BasemapGallery</b> class will be activated. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/basemapgallery.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displayoverviewmap:</b> Overview map button to the upper-right corner of map. An overview map using the <b>esri.dijit.OverviewMap</b> class will be activated. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/overviewmap.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displayeditor:</b> Editor on the menu bar. An editor using the <b>esri.dijit.editing.Editor</b> class will be activated. <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/editor.htm" target="blank">[ArcGIS Javascript API Reference]</a></li>
<li><b>displayelevation:</b> Elevation widget. When selecting a feature or using "measure" to draw a polyline or polygon, an elevation profile will show up in the bottom window. When a point feature is selected, an elevation value will show up in the infowindow. It is created with the following line in layout.js.<pre>dijit.byId('bottomPane').set('content','<div id="profileChartPane" dojotype="apl.ElevationsChart.Pane"></div>');</pre>
<b>Note:</b> The elevation profile is generated using information from an Elevations Server Object Extension. This Server Object Extension is hosted on a sample server and uses sample data and is not meant to be used in a production enviroment.</li>
<li><b>showelevationdifference:</b> Used when the elevation chart is displayed to control what is displayed when users mouse over or touch the chart. When true, elevation gain/loss will be shown from the first location to the location under the cursor/finger.</li>
<li><b>displayscalebar:</b> Scale bar to the lower-left corner of map.</li>
<li><b>displayshare:</b> Share button on the menu bar.</li>
<li><b>leftPanelVisibility:</b> Show or hide the left panel.</li>
</ul>
</li>
<br />
<img src="documentation/whereis.png" width=850 height=614/>
<br />
<br />
<li>Modify sharing URL to point to your sharing service URL if you are using the portal. The default value is <i>http://www.arcgis.com/sharing/content/items</i>. For an organization you can specify the organizational url as follows: <i>http://MyOrg.arcgis.com/sharing/content/items</i></li>
<pre> sharingurl: "<span class="selector">Sharing URL</span>",</pre>
<li>Specify a group in ArcGIS.com that contains the basemaps to display in the basemap gallery. For example:</li>
<pre> title:'<span class="selector">ArcGIS Online Basemaps</span>',<br /> owner:'<span class="selector">esri</span>'</pre>
<li>Specify the url to a geometry service.</li>
<pre> geometryserviceurl:"<span class="selector">geometry service URL</span>",</pre>
<li>Specify the url for a locator service and the single line field name.</li>
<pre> placefinder: {
"url": "<span class="selector">http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer</span>",
"singlelinefieldname": "<span class="selector">SingleLine</span>"
},
</pre>
<li>Set link text and url parameters if you want to display clickable links in the upper right-corner of the application. ArcGIS.com. Enter link values for the link1 and link2 and text to add links. For example:</li>
<pre>
link1: {
url: '<span class="selector">http://www.arcgis.com</span>',
text: '<span class="selector">ArcGIS Online</span>'
},
link2: {
url: '<span class="selector">http://www.esri.com</span>',
text: '<span class="selector">ESRI</span>'
},
</pre>
<li>Specify the width of the panel that holds the editor, legend, details. For example:</li>
<pre>leftpanewidth: <span class="selector">228</span>,</pre>
<li>Restrict the map's extent to the initial extent of the web map. When true users will not be able to pan/zoom outside the initial extent.</li>
<pre>constrainmapextent: <span class="selector">true</span>|<span class="selector">false</span>,</pre>
<li>Provide an image and url for a logo that will be displayed as a clickable image in the lower right corner of the map. If nothing is specified then the esri logo will appear.</li>
<pre>
customlogo: {
image: '<span class="selector">image name</span>',
link: '<span class="selector">image URL</span>'
},
</pre>
<li>Embed = true means the margins will be collapsed to just include the map no title or links</li>
<pre> embed: <span class="selector">true</span>|<span class="selector">false</span></pre>
<ol>
</body>
</html>