-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
289 lines (239 loc) · 16.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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Coal Tracker</title>
<!-- the favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- jQuery, jQuery UI, and a Google-hosted jQueryUI theme -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- GMap api to enable satellite tiles -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBjJsS26aqbFWkWSzsg00U8tFLRUN9rr9U&callback=Function.prototype"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- A LeafletJS plugin to use Google maps basemaps -->
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/dist/Leaflet.GoogleMutant.js"></script>
<!-- Prunecluster clustering library -->
<script src="./libs/leaflet.prunecluster.js" type="text/javascript"></script>
<!-- DataTables core and plugins -->
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css"/>
<!-- Papa Parse for csv parsing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.7/papaparse.min.js"></script>
<!-- lodash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<!-- polyfill for URLSearchParams -->
<script type="text/javascript" src="https://unpkg.com/@ungap/url-search-params"></script>
<!-- mark.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<!-- Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57273261-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- please wait spinner -->
<div id="pleasewait"><img src="./images/spinner.gif" /></div>
<!-- main page container, holding the nav tabs and content -->
<div id="container" class="tab-wrapper">
<!-- nav bar right side -->
<!-- search forms: one shows on map tab, the other on table tab -->
<div class="searchwrapper">
<!-- this div needed as container for input w/button -->
<div>
<form role="form" id="search" class="search-form" data-type="nav">
<div class="form-inline">
<label class="hidden-xs" for="search-category">Search</label>
<select class="hidden-xs" id="search-category">
<option selected value="all">all data</option>
<option value="unit">unit names</option>
<option value="parent">companies</option>
<option value="location">locations</option>
<option value="year">start year</option>
</select>
<label class="hidden-xs" for="mapsearch">for</label>
<!-- <input id="autocomplete" class="form-control"></span> -->
<input id="mapsearch" type="text" class="form-control" data-type="nav" placeholder="project name, company, country..." autocomplete="off">
<a class="clear-search" title="click to clear the search"></span>clear<span class="hidden-xs hidden-sm"> search</span></a>
<div id="search-icon-wrapper">
<span class="glyphicon glyphicon-search"></span>
</div>
</div><!-- /input-group -->
</form>
</div>
</div>
<!-- company suggestions for company search -->
<div id="suggestions"></div>
<!-- navigation tabs. See below for tab content -->
<input class="tab" type="radio" id="map-tab" name="tabs" data-tab="map" checked>
<label class="tab" for="map-tab">Map</label>
<input class="tab" type="radio" id="table-tab" name="tabs" data-tab="map">
<label class="tab" for="table-tab">Table</label>
<input class="tab" type="radio" id="about-tab" name="tabs" data-tab="about">
<label class="tab" for="about-tab">About</label>
<!-- Restart button, positioned near nav, like a tab, but not a tab -->
<div class="nav-button-wrapper">
<a href="https://globalenergymonitor.org/projects/global-coal-plant-tracker/summary-tables/" target="_blank" id="summaries-button" title="Click for data summaries">
<span>Sum<span class="hidden-xs hidden-sm">marie</span>s</span>
</a>
<a id="reset-button" title="Reset the map">
<span><span class="hidden-xs hidden-sm">Restart</span><span class="visible-xs-inline-block visible-sm-inline-block glyphicon glyphicon-refresh"></span></span>
</a>
</div>
<!-- MAP TAB -->
<div class="content" id="map-content">
<div id="map" class="map"></div>
<!-- div to hold country 'results' -->
<div id="results-icon"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
<div id="country-results">
<div class="close" style="margin-top:-5px;">×</div>
<div id="results-title">
<h3></h3>
<div id="total-count"></div>
<div id="type-count"></div>
</div>
</div>
<!-- the layers icon and layer picker -->
<div data-panel="layers" class="layer-control">
<!-- basemaps: radio buttons, see initMapLayerControl() -->
<div id="layers-base">
<label><input type="radio" name="basemaps" data-baselayer="basemap" checked="checked"><span> Basemap</span></label>
<label><input type="radio" name="basemaps" data-baselayer="hybrid"><span> Hybrid</span></label>
<label><input type="radio" name="basemaps" data-baselayer="satellite"><span> Satellite</span></label>
</div>
<div id="status-layer-wrapper" style="display:none;">
<!-- a seperator between the basemap layers and the other layers, hidden until coal plants added to the map -->
<div class="leaflet-control-layers-separator"></div>
<!-- coal plant units (e.g. 'trackers') sybmolized by status type -->
<!-- tracker entries are shown/hidden by status depending on what is on the map -->
<div class="leaflet-control-layers-overlays">
<div class="leaflet-control-layers-group" id="leaflet-control-layers-group-0">
<span class="leaflet-control-layers-group-name">Coal plants: Status</span>
<div id="layer-control-clear">
<span id="select-all">select all</span> |
<span id="clear-all">clear all</span>
</div>
<!-- status checkboxes are generated at run time based on values in CONFIG.status_types. See drawMap() -->
<div id="status-layers"></div>
</div>
</div>
</div>
</div><!-- layer-control -->
</div><!-- map-content -->
<!-- TABLE TAB -->
<div class="content" id="table-content">
<div id="table" class="content-container table-container">
<h3><span>All records</span></h3>
<table class="table table-striped table-hover display nowrap" cellspacing="0" width="100%">
<thead></thead>
<tbody></tbody>
</table>
</div><!-- table wrapper-->
</div><!--table-content-->
<!-- ABOUT TAB -->
<div class="content" id="about-content">
<div class="content-container">
<h2>Frequently Asked Questions</h2>
<h3>Maps</h3>
<p><b>Q: How do I view a different country?</b><br>
A: If the country is adjacent to your current location, you can move the cursor over the country and click (note, the country click feature is not currently available on mobile devices). Alternatively, select Main Menu (upper right).</p>
<p style="margin-bottom: 0;"><b>Q: What do the colored dots mean?</b><br>
A: The colors indicate the status category:</p>
<ul style="margin-left:25px;">
<li><b>Announced:</b> Proposed plants that have been described in corporate or government plans but have not yet taken concrete steps such as applying for permits or acquiring land.</li>
<li><b>Pre-permit development:</b> Plants that are seeking environmental approvals and pursuing other developmental steps such as securing land and water rights. In India, this means that a "Terms of Reference" has been received from the Ministry of Environment and Forests.</li>
<li><b>Permitted:</b> All necessary environmental approvals have been received but the project has not yet begun construction.</li>
<li><b>Construction:</b> Site preparation and other activities are underway.</li>
<li><b>Shelved:</b> Progress has been halted for at least two years.</li>
<li><b>Cancelled:</b> A cancellation announcement has been made, or no progress has been observed for at least four years.</li>
<li><b>Operating:</b> The plant has been formally commissioned.</li>
</ul>
<p><b>Q: Can I change the status categories that the map is showing?</b><br>
A: Yes, go to the legend (upper right corner of the map) and click in the box next to a color.</p>
<p><b>Q: What do the numbers in the circles mean?</b><br>
A: The numbers tell the number of generating units at each location. To find information on each unit, click on the number, then select one of the colored dots.</p>
<p><b>Q: I've Zoomed In, but I don't see a power plant. Why?</b><br>
A: If a coal plant is still in the pre-construction phases (Announced, Pre-permit development, or Permitted), there may be no sign of activity. In other cases, only approximate location information could be found by researchers. Finally, in some geographies satellite photos are only updated every few years, so recent activity is not shown.</p>
<p><b>Q: How do I find out if a location is exact or approximate?</b><br>
A: Locations tend to be known with greater accuracy as plants move from early stages toward construction. To find out the coordinates of a location and whether a location is exact or approximate, click on the location dot, select the wiki page, and look under "Project Details."</p>
<h3>Tables</h3>
<p><b>Q: How can I filter a table so that only plants in a particular category, such as Construction, are listed?</b><br>
A: Type Construction into the Search line. Note: On iPad, do not click "Go" after typing a search term. Instead, simply hide the keyboard.</p>
<h3>Carbon Dioxide</h3>
<p><b>Q: How were the carbon dioxide figures derived?</b><br>
A: The tracker uses a calculation based on size of plant, type of combustion technology, and variety of coal. For details, see <a href="http://www.sourcewatch.org/index.php/Estimating_carbon_dioxide_emissions_from_coal_plants" target="_blank">"Estimating carbon dioxide emissions from coal plants"</a> (SourceWatch).</p>
<h3>Coverage</h3>
<p><b>Q: Does the tracker show all the operating plants in each country?</b><br>
A: The objective of the tracker is to provide information on coal-fired power plants in the developmental pipeline since 2010. Plants that entered operation or were cancelled before January 1, 2010, are not included.
</p>
<p><b>Q: What about small plants?</b><br>
A: The tracker covers units totaling 100 MW or more at a given location. So a single unit of 75 MW would not be included. But two 50 MW units would be included.
</p>
<p><b>Q: How do you define capacity?</b><br>
A: Capacity is measured in gross megawatts, prior to subtracting capacity used for plant operations.
</p>
<p><b>Q: What about coal-to-liquids and other synfuels plants?</b><br>
A: The tracker only includes coal-fired electrical generating plants.
</p>
<p><b>Q: Can you explain the difference between "units" and "plants?"</b><br>
A: The tracker provides separate data on each of the multiple facilities that typically exist at a particular location. Each of these facilities is referred to as a "unit." The entire collection of units at a given location is referred to as a "plant."</p>
<h3>Improving the Tracker</h3>
<p><b>Q: What if I find an error or a missing project?</b><br>
A: Please send information on errors or omissions to Ted Nace (ted AT tednace.com).</p>
<h3>Credits</h3>
<p><b>Q: Who built this tool?</b><br>
A: The tracker was designed and produced by Global Energy Monitor, a network of researchers seeking to develop collaborative informational resources on coal impacts and alternatives. To the extent possible, the information in the tracker has been verified by activists and researchers familiar with particular countries. The following people participated in plant-by-plant research: Elena Bixel (<a href="http://www.die-klima-allianz.de/" target="_blank">Klima Allianz</a>), Bob Burton (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), Gregor Clark (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), Joshua Frank (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), Ted Nace (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), Christine Shearer (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), Adrian Wilson (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>), and Aiqun Yu (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>). Additional wiki editing and fact checking was provided by Christine Law, Iris Shearer, Austin Woerner, and Yvette Zhu. The tracker architect and project manager was Ted Nace (<a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a>). Web/GIS programming was done by Tom Allnutt and Gregor Allensworth (<a href="https://www.greeninfo.org" target="_blank">GreenInfo Network</a>), with support from Tim Sinnott (<a href="https://www.greeninfo.org" target="_blank">GreenInfo Network</a>).</p>
<p>
<b>Q: How do I cite this data?</b><br>
A: Please cite as Global Energy Monitor, Global Coal Plant Tracker, with the date you accessed the data.
</p>
</div><!-- content-container -->
</div><!-- #about-content -->
</div><!-- container -->
<!-- modal to display individual tracker data when user clicks on a given tracker point -->
<div class="modal" id="tracker-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Tracker info</h4>
</div>
<div class="row">
<div class="modal-body">
<div class="col-md-6">
<p><b>Unit Name: </b><span data-name="unit"></span></p>
<p><b>Plant: </b><span data-name="plant"></span></p>
<p><a data-name="wiki_page" target="_blank">Wiki Page</a></p>
<p><b>Owner: </b><span data-name="owner"></span></p>
<p><b>Parent: </b><span data-name="parent"></span></p>
<p><b>Capacity (MW): </b><span data-name="capacity"></span></p>
</div>
<div class="col-md-6">
<p><b>Status: </b><span data-name="status"></span></p>
<p><b>Sub-national unit: </b><span data-name="subnational"></span></p>
<p><b>Country: </b><span data-name="country"></span></p>
<p><b>Region: </b><span data-name="region"></span></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal">Close</button>
<button type="button" id="btn-zoom" class="btn btn-info pull-left" data-dismiss="modal" data-zoom="123,456">Zoom In</button>
<p>Published by <a href="https://globalenergymonitor.org/" target="_blank">Global Energy Monitor</a> | <a href="#" class="about-link" data-dismiss="modal">About</a></p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>