-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
258 lines (247 loc) · 11.5 KB
/
index.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ===== ADDITION: To prevent conflict between map zoom and page zoom on mobile devices ===== -->
<meta name="viewport" content="user-scalable=no" />
<title>Parks Are Cool!</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/document.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/floatingpane.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "esriTemplate",
location: location.pathname.replace(/\/[^/]+$/, '')
}, {
name: "utilities",
location: location.pathname.replace(/\/[^/]+$/, '') + '/javascript'
}, {
name: "apl",
location: location.pathname.replace(/\/[^/]+$/, '') + '/apl'
}]
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4">
</script>
<script type="text/javascript">
dojo.require("esri.layout");
</script>
<!-- ADDITION - Commented out JS because it was not included with the template download -->
<!--script type="text/javascript" src="../../templateConfig.js"></script-->
<script type="text/javascript" src="javascript/layout.js">
</script>
<script type="text/javascript">
dojo.require("utilities.App");
var i18n;
dojo.ready(function(){
i18n = dojo.i18n.getLocalization("esriTemplate","template");
var defaults = {
//The ID for the map from ArcGIS.com
webmap: "f8c9308cbddc4c55afeb50b68572fd76",
//Modify this to point to your sharing service URL if you are using the portal
sharingurl: "",//for example: "http://www.arcgis.com",
//The id for the web mapping application item that contains configuration info - in most
////When editing you need to specify a proxyurl (see below) if the service is on a different domain
//Specify a proxy url if you will be editing, using the elevation profile or have secure services or web maps that are not shared with everyone.
proxyurl: "proxy/proxy.ashx",
//proxyurl: "proxy/proxy.php",
//cases this will be null.
appid: "",
//set to true to display the title
displaytitle: true,
//Enter a title, if no title is specified, the webmap's title is used.
title: "Parks Are Cool!",
//Enter a description for the application. This description will appear in the left pane
//if no description is entered the webmap description will be used.
description: "",
//specify an owner for the app - used by the print option. The default value will be the web map's owner
owner: 'Hillsborough County',
//Specify a color theme for the app. Valid options are gray,blue,purple,green and orange
theme: 'blue',
//Optional tools - set to false to hide the tool
//set to false to hide the zoom slider on the map
displayslider: true,
displaymeasure: true,
displaybasemaps: true,
displayoverviewmap: true,
displayeditor: false,
displaylegend: true,
displaysearch: true,
displaylayerlist: true,
displaybookmarks: true,
displaydetails: false,
displaytimeslider: false,
displayprint: true,
//i18n.viewer.main.scaleBarUnits,
//The elevation tool uses the measurement tool to draw the lines. So if this is set
//to true then displaymeasure needs to be true too.
displayelevation: false,
//This option is 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.
showelevationdifference: false,
displayscalebar: true,
displayshare: false,
//if enabled enter bitly key and login below.
//The application allows users to share the map with social networking sites like twitter
//and facebook. The url for the application can be quite long so shorten it using bit.ly.
//You will need to provide your own bitly key and login.
bitly: {
key: "",
login: ""
},
//Set to true to display the left panel on startup. The left panel can contain the legend, details and editor. Set to true to
//hide left panel on initial startup. 2
leftPanelVisibility: true,
//If the webmap uses Bing Maps data, you will need to provide your Bing Maps Key
bingmapskey: "",
//specify a group in ArcGIS.com that contains the basemaps to display in the basemap gallery
//example: title:'ArcGIS Online Basemaps' , owner:esri
basemapgroup: {
title: '',
owner: ''
},
//Enter the URL to a Geometry Service
helperServices:{ //geometry, route, printTask, geocode
geometry:{
url: location.protocol + "//tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
},
printTask: {
url: location.protocol + "//utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
},
geocode:[
{
url: location.protocol + "//geocode.arcgis.com/arcgis/rest/servcies/World/GeocodeServer"
}
]
},
//Set the label in the nls file for your browsers language
printlayouts: [{
layout: 'Letter ANSI A Landscape',
label: i18n.tools.print.layouts.label1,
format: 'PDF'
}, {
layout: 'Letter ANSI A Portrait',
label: i18n.tools.print.layouts.label2,
format: 'PDF'
}, {
layout: 'Letter ANSI A Landscape',
label: i18n.tools.print.layouts.label3,
format: 'PNG32'
}, {
layout: 'Letter ANSI A Portrait',
label: i18n.tools.print.layouts.label4,
format: 'PNG32'
}],
//Specify the geocoder options. By default uses the geocoder widget with the default locators. If you specify a url value then that locator will be used.
placefinder: {
"url": "",
"countryCode":"",
"currentExtent":false,
"placeholder": "",
"singlelinefieldname":""
},
//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
//url:'http://www.esri.com',text:'Esri'
link1: {
url: 'http://www.hillsboroughcounty.org/facilities.aspx',
text: 'Facilities Search'
},
link2: {
url: 'http://www.hillsboroughcounty.org/FormCenter/Email-Forms-2/Parks-Recreation-and-Conservation-Genera-59',
text: 'Submit a Comment'
},
//specify the width of the panel that holds the editor, legend, details
leftpanewidth: 228,
//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.
constrainmapextent: true,
//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.
customlogo: {
image: '',
link: ''
},
//embed = true means the margins will be collapsed to just include the map no title or links
embed: false
};
var app = new utilities.App(defaults, defaults.proxyurl,i18n);
app.init().then(function(options){
initMap(options);
});
});
</script>
</head>
<body class="claro">
<div id="bc" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false"
style="width:100%; height:100%;padding:0;">
<!-- Header Section-->
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<!--Title dynamically generated -->
<div id="nav" style='display:none;'>
<!-- links are dynamically generated-->
<ul>
<li id="link1List"></li>
<li>|</li>
<li id="link2List"></li>
</ul>
</div>
</div>
<!--End Header-->
<!-- Main Content Section (map, toolbars, left panel)-->
<div id="mainWindow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"
style="width:100%;height:100%;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%;height:100%;padding:0;">
<!-- Toolbar (Search Basemap Measure)-->
<div id="toolbarContainer_bv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"top"'>
<div data-dojo-type="dijit.Toolbar">
<div id="webmap-toolbar-left">
<!--Toolbar buttons (Legend, Details, Edit) created dynamically-->
</div>
<div id="webmap-toolbar-right">
<!--create the search tool-->
</div>
<div id="webmap-toolbar-center">
<!--Basemap,measure,share,time and layer list tools added if enabled-->
</div>
</div>
</div>
<!--End Toolbar-->
<!--Left Panel-->
<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'"
style="height:100%;padding:0;display:none;"></div>
<!--End Left Panel-->
<!-- Map Section -->
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"' dir="ltr">
<div id="logo" class="logo" style="display:none;">
<!--If a logo is specified in config section then the logo will be added
to the map-->
</div>
<!-- Right panel for "build a visit" -->
<div id="visit">
<div id="visitDiv"></div>
</div>
<!--Floating window that contains the measure dijit-->
<div id="floater">
<div id="measureDiv"></div>
</div>
<!--Floating window contains the time slider-->
<div id="timeFloater" style='display:none;'></div>
</div>
<!--end Map section-->
</div>
</div>
<div id="bottomPane" dojotype="dijit.layout.ContentPane" region="bottom"
gutters="false" style="display:none;margin:10px 5px;width:auto;height:275px;background-color:white;"></div>
<!-- End Main Content section-->
</div>
</body>
</html>