-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
138 lines (119 loc) · 4.84 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Where can you see from peaks?</title>
<meta property="og:title" content="Where can you see from peaks?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://khwong12.github.io/viewshed-peaks/" />
<meta property="og:image"
content="https://raw.githubusercontent.com/KHwong12/viewshed-peaks/master/img/opengraph-preview.png" />
<meta property="og:description"
content="An interactive map application to discover where you can see from the peaks in Hong Kong." />
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
<link rel="stylesheet" href="./styles/main.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script type="module" src="/app/main.ts"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxs-map-pin icon'></i>
<div class="logo_name">UrbanDataPalette</div>
<i class='bx bx-menu' id="collapse-button"></i>
</div>
<div id="contentDiv">
<h1>Visibility from Peaks - Where and How Much Can You See?</h1>
<p>
<b>NOTE: This application is best viewed on laptop/tablet. If you are viewing this application on mobile,
please rotate your screen to landscape mode.</b>
</p>
<p>
With numerous amount of hills and peaks in Hong Kong, have you ever investigated <b>where</b> you can see when
you reach the summit?
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 the 3D map, the peaks are labelled with their names and height.
</p>
<h3>How to Use</h3>
<ol>
<li>Drag and wander around the 3D map and investigate the topography Hong Kong.</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 selected point.</li>
<li>Drag the slider to set your desired visibility (1-20km) to simulate how far you can see from the point.</li>
</ol>
<h3>Selected Spots</h3>
<p>
No idea where to start? Take a glance at the following scenes.
</p>
<ul>
<li>
<span class="indicator" id="VICTORIA_HARBOUR">Victoria Harbour
</span>
(initial view)
</li>
<li>
<span class="indicator" id="VICTORIA_PEAK">Victoria Peak
</span>
</li>
<li>
<span class="indicator" id="KOWLOON_PEAKS">Eight Mountains of Kowloon (九龍群山)
</span>
</li>
<li>
<span class="indicator" id="TAI_MO_SHAN">Tai Mo Shan
</span>
</li>
<li>
<span class="indicator" id="SHARP_PEAK">Sharp Peak (蚺蛇尖)
</span>
</li>
</ul>
<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>
<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 made for practice and demonstration use. 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>,
<a href="https://developers.arcgis.com/javascript/" target="_blank">ArcGIS API for JavaScript</a>
and ☕.
<p>
Copyright Notice: Map from Lands Department
<img style="display:inline-block;max-width:16px;" src="https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg">
|
Aerial Photograph from Lands Department |
Earth Image from NASA Earth Observatory |
Satellite Imagery from USGS/NASA Landsat
</p>
</footer>
</div>
</div>
<div id="viewDiv">
<img style="display:none;" id="loading" src="https://i.stack.imgur.com/qq8AE.gif" />
</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>
</body>
</html>