-
Notifications
You must be signed in to change notification settings - Fork 17
/
map.html
76 lines (67 loc) · 3.62 KB
/
map.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
---
---
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ site.title }} | Map</title>
<meta name="description" content="{{ site.description }}">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<meta property="og:title" content="{{ site.title }}" />
<meta property="og:description" content="{{ site.description }}" />
<meta property="og:image" content="{{ site.url }}/preview.jpg" />
<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
<meta property="fb:app_id" content="193758347662800" />
<link rel="canonical" href="{{ site.url }}{{ page.url }}" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='/css/site.css' rel='stylesheet' />
</head>
<body class='fill-dark'>
<div id='map' class='map'></div>
<div id='loader-parent'>
<div class='loader'></div>
<div class='loader-text'>Loading...</div>
</div>
<div class='sidebar pin-topright z10 pad1'>
<div class='sidebar-inner fill-darken2 dark round pad2y'>
<header class='pad2x space-bottom1'>
<h3 class='space-bottom1'>WorldClim<br /> Global climate projections</h3>
<div class='quiet prose'>
<p>What areas are as hot as the marker is? What areas are as hot right now as the marker will be in 2050 or 2070? Drag the marker to explore.</p>
</div>
</header>
<div class='pad2x'>
<h4 id='location' class='space-bottom0 truncate block'></h4>
<div id='legend' class='legend mobile-cols clearfix'></div>
<small class='micro space-top1 block'>Mean monthly max temperature</small>
<small><a onclick="ClimateChangeProjections.embedBox.toggle()" style="cursor: pointer;">EMBED THIS MAP</a></small>
<div style="background-color: #eee; color: #333; word-break: break-all; padding: 2px 5px 5px; border-radius: 3px; display: none;" id="embed-box">
<code><iframe src="https://climatechange.codeforafrica.org/map.html" width="100%" height="600px"></iframe></code>
</div>
</div>
</div>
</div>
<a class='pin-bottomleft z1 pad1' target='_blank' href='https://codeforafrica.org/'>
<img src='/img/c4a-white-small.png' alt='Code for Africa' style="height: 30px;" />
</a>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<script src='/js/mapbox-sdk.min.js'></script>
<script src='/js/utilities.js'></script>
<script src='/js/site.js'></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','{{ site.google_analytics }}','auto');ga('send','pageview');
</script>
</body>
</html>