forked from cheeaun/exploretrees-sg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (125 loc) · 6.88 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
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>ExploreTrees.SG - 🌳 Explore Trees in Singapore 🇸🇬</title>
<link rel="stylesheet" href="app.css">
<link rel="preconnect" href="https://api.tiles.mapbox.com" crossorigin>
<link rel="preconnect" href="https://api.maptiler.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
<link rel="dns-prefetch" href="https://api.tiles.mapbox.com" crossorigin>
<link rel="dns-prefetch" href="https://api.maptiler.com" crossorigin>
<link rel="dns-prefetch" href="https://www.googletagmanager.com" crossorigin>
<link rel="dns-prefetch" href="https://www.google-analytics.com" crossorigin>
<link id="preload" as="script" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js">
<link id="dummy-fetch" as="fetch" href="./data/trees.min.mp.ico" crossorigin>
<!-- metacrap: https://adactio.com/journal/9881 -->
<meta name="description" content="Explore trees in Singapore">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="ExploreTrees.SG">
<meta name="twitter:url" property="og:url" content="https://exploretrees.sg">
<meta name="twitter:title" property="og:title" content="ExploreTrees.SG">
<meta name="twitter:description" property="og:description" content="Explore trees in Singapore">
<meta name="twitter:image" property="og:image" content="https://i.imgur.com/Eh6GK0Q.png">
<!-- end metacrap -->
<div id="map"></div>
<div id="modal"></div>
<button id="layers-button" title="Explore Trees in Singapore">
<svg viewBox="0 0 576 512" width="24" height="24">
<path d="M508.505 36.17L381.517 92.576 207.179 34.463a47.992 47.992 0 0 0-34.674 1.674l-144 64A48 48 0 0 0 0 144v287.967c0 34.938 35.991 57.864 67.495 43.863l126.988-56.406 174.339 58.113a47.992 47.992 0 0 0 34.674-1.674l144-64A48 48 0 0 0 576 368V80.033c0-34.938-35.991-57.864-67.495-43.863zM360 424l-144-48V88l144 48v288zm-312 8V144l120-53.333v288L48 432zm480-64l-120 53.333v-288L528 80v288z"/>
</svg>
</button>
<div id="layers" hidden>
<div class="flex">
<h1>Explore Trees in Singapore <button class="close">×</button></h1>
<ul class="pills">
<li><a href="#type">Type</a></li>
<li><a href="#girth">Girth</a></li>
<li><a href="#age">Age</a></li>
<li><a href="#family">Family</a></li>
</ul>
<div class="legend type">
<table>
<tr>
<td width="16"><span class="circle" style="background-color: limegreen"></span></td>
<td>Tree 🌱</td>
<td class="right"><b id="total-trees"></b></td>
</tr>
<tr>
<td width="16"><span class="circle" style="background-color: orangered"></span></td>
<td>Flowering 🌸</td>
<td class="right"><b id="total-flowering"></b></td>
</tr>
<tr>
<td width="16"><span class="circle" style="background-color: aqua"></span></td>
<td>Heritage 🌳
<a href="https://www.nparks.gov.sg/gardens-parks-and-nature/heritage-trees" target="_blank" class="badge">?</a></td>
<td class="right"><b id="total-heritage"></b></td>
</tr>
<tr>
<td width="16"><span class="circle" style="background-color: magenta"></span></td>
<td colspan="2">Flowering + Heritage</td>
</tr>
</table>
</div>
<div class="legend girth">
<div class="gradient" style="background: linear-gradient(to right, yellow, green, orangered 100%)"></div>
<div class="label-left">0</div> <div class="label-right">> 1.5 meters</div>
<p class="info"><a href="https://en.wikipedia.org/wiki/Tree_girth_measurement" target="_blank">Wikipedia</a>: Girth is a measurement of the distance around the trunk of a tree measured perpendicular to the axis of the trunk.</p>
</div>
<div class="legend age">
<div class="gradient" style="background: linear-gradient(to right, yellow, orange 10%, lime 20%, orangered 30%, magenta 100%)"></div>
<div class="label-left">0</div> <div class="label-right">> 100 years</div>
</div>
<div class="legend family scrollable" id="legend-family"></div>
<div class="global-legend">
<span><img src="./assets/park-icon.png" id="park-icon" width="24" height="24" alt=""> Park</span>
<span><img src="./assets/hroad-icon.png" id="hroad-icon" width="24" height="24" alt=""> Heritage Road</span>
<span><img src="./assets/srgreenery-icon.png" id="srgreenery-icon" width="24" height="24" alt=""> Skyrise Greenery</span>
<span><img src="./assets/garden-icon.png" id="garden-icon" width="24" height="24" alt=""> Community Garden</span>
</div>
<div class="attribution">
Visualized by <a href="https://twitter.com/cheeaun">@cheeaun</a>. Available on <a href="https://github.com/cheeaun/exploretrees-sg" target="_blank">GitHub</a>.
<br>
Data from <a href="http://trees.sg" target="_blank">Trees.SG</a> <a href="https://www.nparks.gov.sg/" target="_blank">© National Parks Board</a>.
<br>
<a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a>
<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>
<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
</div>
<div id="rendering-mode" hidden>
Rendering in low-quality mode. <a href="/?#hq" onclick="return confirm('Warning: High-quality mode uses more data and computing resources that might CRASH your browser. Proceed?')">Try high-quality mode?</a>
</div>
</div>
</div>
<div id="card" hidden></div>
<img id="leaves" src="./assets/leaves.png" alt="" hidden>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>
<script src="app.js"></script>
<script>
const supportsFetch = 'fetch' in window;
const supportsWebGL = 'WebGLRenderingContext' in window;
const supportsClassList = 'classList' in document.documentElement;
if (!supportsFetch || !supportsWebGL || !supportsClassList){
alert("Sorry, this web site doesn't work on your web browser. Please use a newer modern browser.");
}
const _isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
const _hqHash = /#hq/.test(location.hash);
const _renderingMode = !_hqHash && _isTouch ? 'low' : 'high';
if (_renderingMode === 'high') {
document.getElementById('dummy-fetch').rel = 'preload';
}
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js');
});
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23235796-9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-23235796-9');
</script>