summary-viewer-template/index.html at master · Esri/summary-viewer-template · GitHub

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
<!DOCTYPE html>
<html>

<head>
    <title>Summary Viewer</title>
    <meta charset="utf-8">
    <meta name="fragment" content="!">
    <!-- Mobile -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <!-- End Mobile -->
    <!--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="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    <!--Load any application specific styles-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--<link rel="stylesheet" type="text/css" href="css/counter.css">-->
    <!-- Application specific javascript files -->
    <script type="text/javascript" src="js/c.js"></script>
</head>

<body class="claro  app-loading">
    <!-- Loading Indicator -->
    <div class="loading-indicator">
        <div class="loading-message" id="loading_message"></div>
    </div>
    <!-- Map -->
    <div id="mapDiv" dir="ltr"></div>
    <!-- Panel Title -->
    <div class="panelTitle  bg rounded shadow">
        <div id="panelLogo"><img id="logo" src="images/logo.png" style="max-width: 100%; max-height:100%" alt="Logo" />
        </div>
        <div id="panelMain">
        </div>
        <div id="panelFilter">
            <select id="selFilter">
            </select>
        </div>
    </div>
    <!-- Panel Bottom -->
    <div id="bgBottom" class="panelBottom bg shadow"></div>
    <div class="panelBottom">
        <!--Panel Container -->
        <div id="panelContainer">
            <div id="panel0" class="col">
                <div id="title0" class="titleCounter">
                </div>
                <div id="counter0" class="counter"></div>
                <div id="units0" class="units"></div>
            </div>
            <div id="panel1" class="col line">
                <div id="title1" class="titleCounter">
                </div>
                <div id="counter1" class="counter"></div>
                <div id="units1" class="units"></div>
            </div>
            <div id="panel2" class="col line">
                <div id="title2" class="titleCounter">
                </div>
                <div id="counter2" class="counter"></div>
                <div id="units2" class="units"></div>
            </div>
            <div id="panel3" class="col line">
                <div id="title3" class="titleCounter">
                </div>
                <div id="counter3" class="counter"></div>
                <div id="units3" class="units"></div>
            </div>
        </div>
    </div>
    <!-- Panel Bottom Nav -->
    <div class="panelBottomNav">
        <ul id="pages" class="navigation">
        </ul>
    </div>
    <!-- Panel Message -->
    <div id="panelMessage">
        <span id="msgText"></span>
        <img id="msgClose" src="images/close.png" alt="Close" />
    </div>
    <!-- Panel Basemaps -->
    <div id="panelBasemaps" class="panelBasemaps bg rounded shadow">
        <div id="basemapTitle"><img id="basemap" src="images/basemaps.png" title="Switch base map" alt="Switch base map" /></div>
        <div id="basemapContent">
            <div id="basemapGallery"></div>
        </div>
    </div>
     <script type="text/javascript">
    var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    var dojoConfig = {
        async: true,
        // 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: "arcgis_templates",
            location: package_path + '/..'
        }]
    };
    var urlLocale = location.search.match(/locale=([\w\-]+)/) ? RegExp.$1 : null;
    if (urlLocale) {
        dojoConfig.locale = urlLocale;
    }
    </script>
    <script type="text/javascript" src="https://js.arcgis.com/3.22/"></script>
    <script type="text/javascript">
    require([
        "config/templateConfig",
        "application/template",
        "application/main"
    ], function(
        templateConfig,
        Template,
        Main
    ) {
        // create the template. This will take care of all the logic required for template applications
        var myTemplate = new Template(templateConfig);
        // create my main application. Start placing your logic in the main.js file.
        var myApp = new Main();
        // start template
        myTemplate.startup().then(function(config) {
            // The config object contains the following properties: helper services, (optionally)
            // i18n, appid, webmap and any custom values defined by the application.
            // In this example we have one called theme.
            myApp.startup(config);
        }, function(error) {
            // something went wrong. Let's report it.
            myApp.reportError(error);
        });
    });
    </script>
</body>

</html>