-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (205 loc) · 10.4 KB
/
Copy pathindex.html
File metadata and controls
205 lines (205 loc) · 10.4 KB
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
<!DOCTYPE html>
<!-- html start: __________________________________________________________ -->
<html>
<!-- head start:_________________________________________________________ -->
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<link rel="icon"
href="./img/icon/icon.png"
sizes="192x192">
<!-- title: ___________________________________________________________ -->
<title id="title">Local warming from tropical deforestation</title>
<!-- styles: __________________________________________________________ -->
<link rel="stylesheet"
type="text/css"
href="./css/leaflet.css"
media="all">
<link rel="stylesheet"
type="text/css"
href="./css/nouislider.min.css"
media="all">
<link rel="stylesheet"
type="text/css"
href="./css/site.css"
media="all">
<!-- scripts: _________________________________________________________ -->
<script src="./js/leaflet.js"
charset="utf-8">
</script>
<script src="./js/nouislider.min.js"
charset="utf-8">
</script>
<script src="./js/site.js"
charset="utf-8">
</script>
<script src="./js/home.js"
charset="utf-8"
defer>
</script>
<!-- meta tags: _______________________________________________________ -->
<meta id="meta_title"
name="title"
content="Local warming from tropical deforestation">
<meta id="meta_desc"
name="description"
content="Local warming from tropical deforestation web visualisation">
<meta id="twit_card"
name="twitter:card"
content="summary_large_image">
<meta id="twit_title"
name="twitter:title"
content="Local warming from tropical deforestation">
<meta id="twit_desc"
name="twitter:description"
content="Local warming from tropical deforestation web visualisation">
<meta id="twit_img"
name="twitter:image"
content="img/icon/icon.png">
<meta id="og_type"
name="og:type"
content="website">
<meta id="og_title"
name="og:title"
content="Local warming from tropical deforestation">
<meta id="og_desc"
name="og:description"
content="Local warming from tropical deforestation web visualisation">
<meta id="og_img"
name="og:image"
content="img/icon/icon.png">
<!-- head end:___________________________________________________________ -->
</head>
<!-- body start: ________________________________________________________ -->
<body>
<!-- container start: _________________________________________________ -->
<div id="container"
class="container column">
<!-- header: ________________________________________________________ -->
<div id="header"
class="header row flex_justify flex_no_grow">
<a href="https://viewpoint-brazil.org/"
target="_new">
<img id="header_img"
class="header_image"
src='img/logo/viewpoint_logo.png'>
</a>
<div id="header_text"
class="header_text">
<span id="title_a">Local warming from tropical deforestation</span>
</div>
<!-- navigation links: ________________________________________ -->
<div id="header_navigation"
class="header_navigation">
<span id="link_home">Home</span> |
<a href="about.html"><span id="link_about">About</span></a>
</div>
</div>
<!-- content container: _____________________________________________ -->
<div id="content"
class="content row">
<!-- content: _____________________________________________________ -->
<div id="content_content"
class="content_content column">
<!-- language selection: ________________________________________ -->
<div id="content_language"
class="content_language row flex_end">
<!-- language select: _________________________________________ -->
<img id="language_img"
class="language_image"
title="Select language"
src='img/icon/language.png'>
<select id="language_select"
name="language_select"
onchange="load_text(document.getElementById('language_select').value);">
<option id="language_link_en"
class="language_link"
value="en"
selected>English (en)</option>
<option id="language_link_pt"
class="language_link"
value="pt">Português (pt)</option>
<option id="language_link_es"
class="language_link"
value="es">Español (es)</option>
<option id="language_link_fr"
class="language_link"
value="fr">Français (fr)</option>
<option id="language_link_id"
class="language_link"
value="id">Bahasa Indonesia (id)</option>
<option id="language_link_sw"
class="language_link"
value="sw">Kiswahili (sw)</option>
<option id="language_link_zh"
class="language_link"
value="zh">中文 (zh)</option>
</select>
</div>
<!-- map: _______________________________________________________ -->
<div id="content_map"
class="content_map row flex_start">
<!-- map overlay text: ________________________________________ -->
<div id="content_map_text"
class="content_map_text">
<div id="content_map_text_close_container"
class="content_map_text_close_container">
<a id="content_map_text_close"
class="content_map_text_close"
href="javascript:void(0)"
onclick="map_text_toggle()">×</a>
</div>
<div id="content_map_text_text"
class="content_text">
<h3>The relationship between forests and local temperatures</h3>
<p>Deforestation impacts local temperatures primarily by eroding the cooling impact of forest trees' evapotranspiration and by changing the land's albedo (<a href='https://doi.org/10.3389/ffgc.2019.00047' target='_blank'>Baker and Spracklen 2019</a>, <a href='https://doi.org/10.1371/journal.pone.0213368' target='_blank'>Prevedello et al 2019</a>). The deforestation-induced temperature change varies depending on the initial and post-deforestation tree cover and the forest type. While research is ongoing into the relationship between deforestation and local temperatures, this map provides an indication of how deforestation can affect local temperatures.</p>
<h3>How to use this map</h3>
<p>This interactive map shows the local warming induced by tropical deforestation. The warming is shown as an average value per administrative area e.g. a region, district or province.</p>
<p>You can explore the impact on local temperature of different levels of forest loss using the slider bar in the bottom left corner.</p>
<p>You can switch between the larger and smaller administrative areas using the map view options in the right-hand corner.</p> <p>To change the base map, click on the globe to switch between underlying mapping options.</p>
<p>To change languages, select English or Portuguese using the options in the bottom left corner.</p>
<h3>Legend</h3>
<p>Number of data points: The number of pixels within the selected mapping unit with data available. Results are only shown for mapping units with more than 250 pixels with available data.</p>
<p>∆T (˚C): Local warming induced by deforestation. Temperature is shown in degrees Celsius. This value will vary depending on the percentage deforestation selected using the deforestation slider in the bottom left corner.</p>
<p>∆T/forest loss (˚C/%p): Change in temperature in degrees Celsius per percentage-point forest loss. This is the change in temperature caused by one percentage point change in forest cover (relative to the 2020 baseline forest cover for that mapping unit). The value in brackets is the uncertainty range of the value (+/- standard deviation).</p>
<p>Forest cover 2020 (%): this is the average percentage of the area of the selected mapping unit that was covered by forest in 2020.</p>
</div>
</div>
</div>
<!-- slider: ____________________________________________________ -->
<div id="content_slider_container"
class="content_slider_container row flex_start">
<div id="content_slider"
class="content_slider leaflet-control">
<div id="content_slider_text"
class="content_slider_text">
<span id="content_slider_title"
class="content_slider_title">Deforestation percentage:</span>
<span id="content_slider_value"
class="content_slider_value"></span>
</div>
<div id="content_slider_slider"
class="content_slider_slider"></div>
</div>
</div>
<!-- content end: _________________________________________________ -->
</div>
</div>
<!-- footer: ________________________________________________________ -->
<div id="footer"
class="footer row_wrap flex_end flex_no_grow">
<div id="footer_uol_logo"
class="footer_item footer_item_hide">
<a href="https://leeds.ac.uk/"
target="_new"><img class="footer_logo"
src="./img/logo/uol_logo.png"></a>
</div>
</div>
<!-- container end: ___________________________________________________ -->
</div>
<!-- body end: __________________________________________________________ -->
</body>
<!-- html end: ____________________________________________________________ -->
</html>