-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
298 lines (283 loc) · 15.4 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
290
291
292
293
294
295
296
297
298
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Possibility for electricity autarky in Europe</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<script src='style.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="map.css">
</head>
<body>
<div id='map'></div>
<div class='map-overlay' id='features'>
<h2>Renewable electricity autarky</h2>
<div id='pd'>
<p>
Hover over an area for details.<br>
Zoom to switch administrative levels.<br>
Click on
<a class="tooltip">
<i onclick="showInfo()" class="fas fa-info-circle"></i>
<span class="tooltiptext">About the map</span>
</a>
for more information.<br>
</p>
</div>
<div id='buttons'>
<a class="tooltip">
<i onclick="showInfo()" class="fas fa-info-circle"></i>
<span class="tooltiptext">About the map</span>
</a>
<a class="tooltip" href="https://doi.org/10.1016/j.esr.2019.100388" target="_blank">
<i class="fas fa-book-open"></i>
<span class="tooltiptext">Read publication</span>
</a>
<a class="tooltip" href="https://doi.org/10.5281/zenodo.3244984" target="_blank">
<i class="fas fa-database"></i>
<span class="tooltiptext">Download data</span>
</a>
<a class="tooltip" href="https://www.iass-potsdam.de/en/research-group/energy-transition-dynamics" target="_blank">
<i class="fas fa-user-circle"></i>
<span class="tooltiptext">Research group</span>
</a>
<a class="tooltip" href="https://github.com/timtroendle/possibility-for-electricity-autarky-map/issues/new" target="_blank">
<i class="fas fa-flag"></i>
<span class="tooltiptext">Report an issue</span>
</a>
</div>
</div>
<div class='map-overlay' id='legend'>
<h2>Autarky is</h2>
</div>
<div class='map-overlay' id="info" onclick="hideInfo()">
<div id="infotext">
<h1>Can sun and wind provide all electricity needed in your European country, region, or municipality?</h1>
<p>
This map visualises the possibility for renewable electricity autarky in Europe —
for all municipalities, all regions, all countries, and all of Europe.
No matter where you live, here you can find out whether enough electricity from
sun and wind can be generated in your region.
</p>
<h2>But what does it mean to be autarkic?</h2>
<p>
Possibility for autarky means being able to fulfil local electricity demand with
100% renewable electricity from solar and wind power generated locally.
It makes it possible for entire communities to produce their own electricity — for
example using solar systems on the roofs and community wind farms — and then consume it.
</p>
<h2>Can Europe be powered by sun and wind alone?</h2>
<p>
The potential of solar and wind energy is large enough to supply Europe with 100%
renewable electricity. In many cases at regional or municipal level, autarky is
possible using renewable electricity only. However, some densely populated
metropolis will not be able to supply themselves with 100% renewable electricity.
A possible solution for these places is to import electricity from the surrounding
region.
</p>
<h2>What does the map show me?</h2>
<p>
The map shows the potential for renewable electricity autarky in Europe for
individual countries, regions and municipalities. The potential shown is based on
technical and some social constraints: for example, we do not allow electricity to be
produced in nature conservation areas and we also prohibit open field solar
systems on arable land. Therefore, we call this potential the “technical-social
potential”. You can find more information in our scientific article (information below).
</p>
<p>
We use different colours to represent the possibility for electricity autarky.
We consider autarky here as impossible only if local electricity
demand exceeds the technical potential:
<ul>
<li>
Autarky is likely possible (dark green), when the potential exceeds demand.
</li>
<li>
Autarky may be possible (light green), when demand exceeds the potential,
but technical potential is more than twice the demand.
</li>
<li>
Autarky is likely impossible (light red), when demand exceeds the potential,
and technical potential is less than twice the demand.
</li>
<li>
Autarky is impossible (dark red), when demand exceeds technical potential.
</li>
</ul>
</p>
<h2>How do I use the map?</h2>
<p>
You can zoom in and out to find out about the potential of renewable electricity
generation and whether an area can supply itself with it.
Depending on the area you look at, you will notice that the colour of the area may
change: from dark green — areas in which autarky is likely — to dark red
— areas in which autarky is not possible. If you hoover over the area of your
choice, you will receive further information in the top right box: You will
see whether electrical autarky is possible. You can also see how many people
live there, how much electricity they need, and the potential to generate
electricity from sun and wind. Have fun trying it out!
</p>
<h2>Where do I get more information about the project?</h2>
<p>
The data is taken from the peer-reviewed article:
<a href=https://doi.org/10.1016/j.esr.2019.100388>
Tröndle, T., Pfenninger, S., Lilliestam, J., 2019. Home-made or imported:
on the possibility for renewable electricity autarky on all scales in Europe.
Energy Strategy Reviews 26.
</a>. <strong>If you make use of the data in academic work, please cite the article.</strong>
You can find out more about us and the research of our working group
Energy Transition Dynamics at the Institute for Advanced Sustainability Studies (IASS) Potsdam
<a href=https://www.iass-potsdam.de/en/research-group/energy-transition-dynamics>
on our website
</a>.
</p>
<p>
Did you find an issue in the data? Please
<a href="https://github.com/timtroendle/possibility-for-electricity-autarky-map/issues/new">
report it.
</a>
</p>
<p>
© 2018-2020 Tim Tröndle, Institute for Advanced Sustainability Studies Potsdam and Institute for Environmental Decisions, ETH Zürich
</p>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGltdHJvZW5kbGUiLCJhIjoiY2pxYXRvcHp0M2NidTN4cDMxdXdmZ2VpZSJ9.Yt-BUdLmsq9d4wjDxEWd_g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/timtroendle/cjqhsfrmz0nb82rqcsk6z8po6'
});
map.addControl(new mapboxgl.ScaleControl({unit: 'metric'}));
map.on('load', function() {
styleMap(map);
map.on('mousemove', function(e) {
var unit = map.queryRenderedFeatures(e.point, {
layers: ['continental', 'national', 'regional', 'municipal']
});
if (unit.length > 0) {
var potential = unit[0].properties.total_potential_twh_per_year
var energy_unit = "TWh/yr"
var demand = unit[0].properties.demand_twh_per_year
var statement = unit[0].properties.our_rating
if (potential < 0.1 | demand < 0.1) {
potential = potential * 1000
demand = demand * 1000
energy_unit = "GWh/yr"
}
document.getElementById('pd').innerHTML =
'<p>in <strong>' + unit[0].properties.name + '</strong> ' +
statement + '.</p>' +
'<p><strong>' + unit[0].properties.population_sum.toLocaleString('en', {maximumFractionDigits : 0}) + '</strong> inhabitants<br>' +
'<strong>' + demand.toLocaleString('en', {maximumFractionDigits : 1}) + '</strong> ' + energy_unit + ' electricity demand<br>' +
'<strong>' + potential.toLocaleString('en', {maximumFractionDigits : 1}) + '</strong> ' + energy_unit + ' generation potential<br>';
} else {
document.getElementById('pd').innerHTML = `
<p>
Hover over an area for details.<br>
Zoom to switch administrative levels.<br>
Click on
<a class="tooltip">
<i onclick="showInfo()" class="fas fa-info-circle"></i>
<span class="tooltiptext">About the map</span>
</a>
for more information.<br>
</p>`;
}
});
var hoveredStateContinentId = null;
var hoveredStateNationId = null;
var hoveredStateRegionId = null;
var hoveredStateMunicipalityId = null;
// When the user moves their mouse over the state-fill layer, we'll update the
// feature state for the feature under the mouse.
map.on("mousemove", "continental", function(e) {
if (e.features.length > 0) {
if (hoveredStateContinentId) {
map.setFeatureState({source: 'continental', sourceLayer: 'continentaltechnicalsocialpotential', id: hoveredStateContinentId}, { hover: false});
}
hoveredStateContinentId = e.features[0].id;
map.setFeatureState({source: 'continental', sourceLayer: 'continentaltechnicalsocialpotential', id: hoveredStateContinentId}, { hover: true});
}
});
map.on("mouseleave", "continental", function() {
if (hoveredStateContinentId) {
map.setFeatureState({source: 'continental', sourceLayer: 'continentaltechnicalsocialpotential', id: hoveredStateContinentId}, { hover: false});
}
hoveredStateContinentId = null;
});
map.on("mousemove", "national", function(e) {
if (e.features.length > 0) {
if (hoveredStateNationId) {
map.setFeatureState({source: 'national', sourceLayer: 'nationaltechnicalsocialpotential', id: hoveredStateNationId}, { hover: false});
}
hoveredStateNationId = e.features[0].id;
map.setFeatureState({source: 'national', sourceLayer: 'nationaltechnicalsocialpotential', id: hoveredStateNationId}, { hover: true});
}
});
map.on("mouseleave", "national", function() {
if (hoveredStateNationId) {
map.setFeatureState({source: 'national', sourceLayer: 'nationaltechnicalsocialpotential', id: hoveredStateNationId}, { hover: false});
}
hoveredStateNationId = null;
});
map.on("mousemove", "regional", function(e) {
if (e.features.length > 0) {
if (hoveredStateRegionId) {
map.setFeatureState({source: 'regional', sourceLayer: 'regionaltechnicalsocialpotential', id: hoveredStateRegionId}, { hover: false});
}
hoveredStateRegionId = e.features[0].id;
map.setFeatureState({source: 'regional', sourceLayer: 'regionaltechnicalsocialpotential', id: hoveredStateRegionId}, { hover: true});
}
});
map.on("mouseleave", "regional", function() {
if (hoveredStateRegionId) {
map.setFeatureState({source: 'regional', sourceLayer: 'regionaltechnicalsocialpotential', id: hoveredStateRegionId}, { hover: false});
}
hoveredStateRegionId = null;
});
map.on("mousemove", "municipal", function(e) {
if (e.features.length > 0) {
if (hoveredStateMunicipalityId) {
map.setFeatureState({source: 'municipal', sourceLayer: 'municipaltechnicalsocialpotential', id: hoveredStateMunicipalityId}, { hover: false});
}
hoveredStateMunicipalityId = e.features[0].id;
map.setFeatureState({source: 'municipal', sourceLayer: 'municipaltechnicalsocialpotential', id: hoveredStateMunicipalityId}, { hover: true});
}
});
map.on("mouseleave", "municipal", function() {
if (hoveredStateMunicipalityId) {
map.setFeatureState({source: 'municipal', sourceLayer: 'municipaltechnicalsocialpotential', id: hoveredStateMunicipalityId}, { hover: false});
}
hoveredStateMunicipalityId = null;
});
});
map.getCanvas().style.cursor = 'default';
map.fitBounds([[-15.8, 30], [37, 72]]);
var layers = ['likely possible', 'maybe possible', 'likely impossible', 'impossible'];
var colors = [COLOR_LIKELY_POSSIBLE, COLOR_MAYBE_POSSIBLE, COLOR_LIKELY_IMPOSSIBLE, COLOR_IMPOSSIBLE];
for (i = 0; i < layers.length; i++) {
var layer = layers[i];
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
function showInfo() {
document.getElementById("info").style.display = "block";
}
function hideInfo() {
document.getElementById("info").style.display = "none";
}
</script>
</body>
</html>