-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
110 lines (99 loc) · 4.05 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
<!DOCTYPE html>
<html>
<head>
<title>Peaks of Hong Kong</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Identify the visable area from peaks in Hong Kong">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Peaks in Hong Kong - Where and How Much Can You See?">
<meta itemprop="description" content="Identify the visable area from peaks with viewshed">
<meta itemprop="image" content="img/HKPeaks_Overview.png">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<!-- app's own css -->
<link rel="stylesheet" href="static/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<!-- app's own JavaScript -->
<script src="static/js/main.js"></script>
<script src="static/js/visibility.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<div id="queryDiv" class="esri-widget">
<h3>Settings</h3>
<div class="tooltip">
<label for="bufferNum">Visibility</label>
<div id="bufferNum"></div>
</div>
<br />
<button class="esri-button" id="clearGeometry" type="button">
Clear Results
</button>
</div>
<div id="contentDiv">
<h1>Peaks in Hong Kong - Where and How Much Can You See?</h1>
<p>
<b>NOTE:This application is best viewed on laptop/tablet with minimum width of 800px. Mobile version of this app is ongoing development.</b>
</p>
<p>
With numerous amount of hills and peaks in Hong Kong, have you ever investigated the visable area from the peaks?
This application allows you to view and check where and how much you could see from the peaks with given visible distance.
</p>
<p>
In this 3d map, the peaks are labelled with their Chinese and English names, as well as elevation.
</p>
<h3>How to Use</h3>
<ol>
<li>Drag and wander around the 3D map and investigate the topography.</li>
<li>Click on the peaks (or any other places you like). A red pin will appear on the place you clicked.</li>
<li>The application will then compute the visible area (<i>viewshed</i> in jargon) from that point. The white grids appears on the map shows the area visible from the centre.</li>
<li>Drag the slider to set your desired visibility (1-20km) to simulate how far you can see from the centre.</li>
</ol>
<h3>Current Visibility</h3>
<p>
Current visibility data are provided by <a target="_blank" href="https://www.hko.gov.hk/en/wxinfo/ts/display_element_vis.htm">Hong Kong Observatory</a>.
</p>
<div id="visibilityDiv"></div>
<h3>Spots</h3>
<p>
No idea where to start? Take a glance at the following scenes.
<img src="https://cdn.glitch.com/20272750-7169-4cf2-ad09-ccca0884dbf8%2Fmap.png?1564488208311" class="map-icon">
</p>
<ul>
<li>
<span class="indicator harbour">Victoria Harbour
</span>
(initial view)
</li>
<li>
<span class="indicator victoriapeak">Victoria Peak
</span>
</li>
<li>
<span class="indicator kowloonpeak">Eight Mountains of Kowloon (九龍群山)
</span>
</li>
<li>
<span class="indicator taimoshan">Tai Mo Shan
</span>
</li>
<li>
<span class="indicator sharppeak">Sharp Peak (蚺蛇尖)
</span>
</li>
</ul>
<footer>
Created by <a href="https://twitter.com/Kenneth_KHW" target="_blank">Kenneth Wong</a>.
<br />
Last modified on <span id="lastModified"></span>.
<br />
This application is for coding practice and testing demonstration only. Accuracy of data and results are not guaranteed.
<br />
Made and developed with
<a href="https://pro.arcgis.com/en/pro-app/" target="_blank">ArcGIS Pro</a> and
<a href="https://developers.arcgis.com/javascript/" target="_blank">ArcGIS API for JavaScript</a>.
</footer>
</div>
</body>
</html>