ranking-template/index.html at master · Esri/ranking-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
142
143
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <!-- Responsive -->
  <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 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/nouislider.min.css">

  <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/themes/calcite/esri/esri.css">
  <!-- Load any application specific styles -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/main.min.css">
</head>

<body class="calcite app-loading">
  <div class="loading-indicator">
    <div class="loading-message" id="loading_message"></div>
  </div>
  <div class="container-fluid">
    <div class="row container-row">
      <div id="sidebar" class="hidden-xs col-sm-4 fgcolor">
        <div class="row title-row">
          <h1 id="panelTitle" class="repeat-title"></h1>
          <!--class="hide"-->
          <toolbar id="toolbar">
            <span id="socialToolbar" class="social-icons hide">
              <button id="facebookShare" type="button" class="btn btn-link share-btn nav-btn">
                <span id="facebook" class="fa fa-facebook-official" aria-hidden="true"></span>
              </button>
              <button id="twitterShare" type="button" class="btn btn-link share-btn nav-btn">
                <span id="twitter" class="fa fa-twitter" aria-hidden="true"></span>
              </button>
              <button id="linkShare" type="button" class="btn btn-link share-btn nav-btn">
                <span class="fa fa-link" aria-hidden="true"></span>
              </button>
            </span>
            <!--btn-link -->
            <button id="toggleInfo" type="button" class="hide btn btn-link info-btn nav-btn">
              <span class="fa esri-icon-description" aria-hidden="true"></span>
            </button>
          </toolbar>
        </div>
        <!--end row-->
        <div id="titleHeader" class="title-header panel-nav">
          <div id="description-text">
            <div id="description"></div>
            <div id="legendDiv"></div>
          </div>
          <div class="closeNav">
            <button id="closeInfo" type="button" class="btn btn-default btn-lg disabled  btn-block">
            </button>
          </div>
        </div>
        <div id="popupContainer" class="swiper-container panel-nav">
          <div id="slideWrapper" class="swiper-wrapper swiper-wrapper-horizontal">
            <!--https://github.com/nolimits4web/swiper/-->
          </div>
        </div>
        <nav id="slideNav" class="navbar-fixed-bottom hide panel-nav">
          <button id="next" class="swiper-button-next navcolor esri-icon-right"></button>
          <div id="pageLabel" class="swiper-pagination-label navcolor"></div>
          <div class="swiper-pagination navcolor"></div>
          <button id="prev" class="swiper-button-prev navcolor esri-icon-left"></button>
        </nav>


      </div>
      <!--End Sidebar-->
      <div class="col-xs-12 col-sm-8 map-container">
        <div id="mapDiv"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var webgl = location.search.match(/webgl=([\w-]+)/) ? (RegExp.$1).toLowerCase() === "false" ? 0 : 1 : 1;
    var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": webgl
      },
      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="js/swiper.min.js"></script>
  <script type="text/javascript" src="js/nouislider.min.js"></script>
  <script type="text/javascript" src="https://js.arcgis.com/3.27/"></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>