-
Notifications
You must be signed in to change notification settings - Fork 15
/
ghspop.html
71 lines (62 loc) · 2.5 KB
/
ghspop.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Global Human Settlement Layer</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="./Qgis2threejs.css">
</head>
<body>
<div id="webgl"></div>
<!-- popup -->
<div id="popup" style="display:none;">
<div id="closebtn">×</div>
<div id="popupbar"></div>
<div id="popupbody">
<div id="popupcontent"></div>
<div id="pageinfo">
<h1>Current View URL</h1>
<div><input id="urlbox" type="text"></div>
<h1>Usage</h1>
<div id="usage"></div>
<h1>About</h1>
<div id="about">This page was created by <a href="https://twitter.com/tjukanov" target="_blank">@tjukanov</a>. The visualisation uses data from European Comission <a href="http://ghsl.jrc.ec.europa.eu/ghs_pop.php" target="_blank">GHS POPULATION GRID</a> and was made with <a href="http://www.qgis.org/" target="_blank">QGIS</a> and <a href="https://github.com/minorua/Qgis2threejs" target="_blank">Qgis2threejs</a> plugin,
and uses the following library:
<ul>
<li>three.js <a href="http://threejs.org/" target="_blank">http://threejs.org/</a> <a href="./threejs/LICENSE" target="_blank" class="license">(LICENSE)</a></li>
<li>dat-gui <a href="https://code.google.com/p/dat-gui/" target="_blank">https://code.google.com/p/dat-gui/</a> <a href="./dat-gui/license.txt" target="_blank" class="license">(LICENSE)</a></li>
<li id="lib_proj4js" style="display: none;">Proj4js <a href="http://trac.osgeo.org/proj4js/" target="_blank">http://trac.osgeo.org/proj4js/</a> <a href="./proj4js/LICENSE.md" target="_blank" class="license">(LICENSE)</a></li>
</ul>
</div>
</div>
</div></div>
<!-- footer -->
<div id="footer"></div>
<script src="./threejs/three.min.js"></script>
<script src="./Qgis2threejs.js"></script>
<script src="./threejs/OrbitControls.js"></script>
<script>
var option = Q3D.Options;
option.bgcolor = 0x000000;
</script>
<script src="./proj4js/proj4.js"></script>
<script src="./ghspop.js"></script>
<script>
if (typeof proj4 !== "undefined") document.getElementById("lib_proj4js").style.display = "list-item";
var container = document.getElementById("webgl");
// initialize application
var app = Q3D.application;
app.init(container);
// load the project
app.loadProject(project);
app.addEventListeners();
app.start();
</script>
<script src="./dat-gui/dat.gui.min.js"></script>
<script src="./dat-gui_panel.js"></script>
<script>
// initialize dat-gui panel
Q3D.gui.init();
</script>
</body>
</html>