forked from Esri/Viewer
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
105 lines (93 loc) · 5.24 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
<!DOCTYPE html>
<html>
<head>
<title></title> <!-- Define the versions of IE that will be used to render the page. See Microsoft documentation for details. Optional. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- End Responsive -->
<!-- Use protocol relative urls that way if the browser is viewing the page via HTTPS the js/css file will be requested using the HTTPS protocol -->
<link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/calcite/calcite.css">
<link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
<!-- Load any application specific styles -->
<link rel="stylesheet" href="css/styles.css">
<!--[if IE 8]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body class="calcite app-loading no-touch">
<!-- Loading Indicator -->
<div class="loading-indicator">
<div class="loading-message" id="loading_message"></div>
</div>
<!-- Map -->
<!-- The ArcGIS API for JavaScript provides bidirectional support. When viewing the application in an right to left (rtl) language like Hebrew and Arabic the map needs to remain in left-to-right (ltr) mode. Specify this by setting the dir attribute on the div to ltr. -->
<div id="mapDiv" dir="ltr"></div>
<!-- Panel Content -->
<div id="panelContent">
<div id="panelPages"></div>
</div>
<!-- Panel Top -->
<div id="panelTop" class="bg rounded shadow">
<!-- Panel Title -->
<div id="panelTitle">
<div class="fc" id="panelText">
</div>
<div id="panelSearch">
<div id="panelGeocoder"></div>
</div>
<div id="panelMenu" class="icon-menu icon-color"></div>
</div>
<!-- Panel Tools -->
<div id="panelTools">
<!--Tools are created programatically-->
</div>
</div>
<script type="text/javascript">
var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
var dojoConfig = {
// The locationPath logic below may look confusing but all its doing is
// enabling us to load the api from a CDN and load local modules from the correct location.
packages : [{
name : "application",
location : package_path + '/js'
}, {
name : "config",
location : package_path + '/config'
}, {
name : "myCustomPackage", // Specify the name of your custom tool package
location : package_path + '/myCustomTools' // In this case, we have the tool package installed as a sub=folder in the viewer's HTTP location
}]
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.11/"></script>
<script type="text/javascript">
require(["application/template", "application/main", "myCustomPackage/CustomTool"], function(Template, Main) {
// create the template. This will take care of all the logic required for template applications
var myTemplate = new Template();
var myApp = new Main();
myTemplate.startup().then(function(config) {
myApp.on('found-custom-tool',function(e)
{
// Any logic can be specified here to determine how to require and load a custom tool module. The main point is that we have a way to add custom tool configuration, and a way to add it to the UI at an appropriate time in the application startup with as few hooks into the basic viewer's application code as possible.
// This shows an example that creates a tool from the name found in the tools config (in defaults.js) creating a tool from a custom module package - which must be declared in the packages config, and required beforehand:
var toolClass = require("myCustomPackage/"+e.toolConfig.name); // using this approach of 'require'-ing a module in dojo works for modules that are already loaded.
var tool = new toolClass();
// The custom toolClass module is responsible for calling the toolbar.createTool() method inside of it's startup function, and populating/controlling the content of the domNode that is returned by the toolbar's createTool method (i.e., the panel that is displayed when the tool is selected).
e.toolList.push(tool.startup(myApp,e.toolConfig,e.toolbar));
// The module can change the label used by the viewer with something other than the tool name in the config by setting the following value from it's own nls package (e.g., inside its startup function):
// config.i18n.tooltips[toolConfig.name] = this.i18n.toolName;
});
myApp.startup(config);
}, function(error) {
// something went wrong. Let's report it.
myApp.reportError(error);
});
});
</script>
</body>
</html>