-
Notifications
You must be signed in to change notification settings - Fork 0
/
desc.html
106 lines (94 loc) · 5.13 KB
/
desc.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
<!DOCTYPE html>
<html>
<head>
<title>Shadow Analysis Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/slider.css" />
<link rel="stylesheet" type="text/css" href="css/L.Control.Locate.css">
<link href="css/main.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/leaflet.ie.css" />
<link rel="stylesheet" href="css/L.Control.Locate.ie.js" />
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 headerdesc">
<p>
This demo uses several open-source libraries, and data which is open and free. Leaflet.js draws the underlying map and provides the navigation, with map tiles supplied from the Norwegian Mapping Authorities.
<h6> Terrain shadows </h6>
A DTM of 50x50m from the Norwegian Mapping Authorities are loaded into the browser by threejs, which makes WebGL easier to handle. The sun's position is found using SunCalc.js and drawn in the 3D scene by threejs. The 3D world in WebGL is then oriented to align with the underlying map. CSS-transforms is used to keep the alignment correct during zooming and panning.
<h6> Building shadows </h6>
Buildings and their shadows are drawn on the HTML5 canvas element by the OSMBuildings library. The data is supplied from OpenStreetMap. However, a more accurate version of Trondheim, Norway exists, but is not shown because the data used is not publicly available (FKB-Bygning).
</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row" id="vendors">
<div class="col-lg-4">
<a href="http://leafletjs.com/"><img src="images/leaflet-logo.png" class="img-responsive logosize" /></a>
</div>
<div class="col-lg-4">
<a href="http://labs.kartverket.no/"><img src="images/kartverket_logo.jpg" class="img-responsive logosize" ></a>
</div>
<div class="col-lg-4">
<a href="http://threejs.org/"><img src="images/threejs-logo.png" class="img-responsive logosize img-circle" ></a>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-lg-offset-5">
<a href="https://github.com/spohner/Shadow-Analysis-Demo"><img src="images/github.png" class="img-responsive githublogo"></img></a>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Shadow Visualization Demo</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About the project <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Short Description</a></li>
<li><a href="shadowviz_steffenp.pdf">Paper (PDF)</a></li>
<li><a href="about.html">Developed by</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/three.min.js" type="text/javascript"></script>
<script src="js/L.Control.Locate.js" type="text/javascript"></script>
<script src="js/leaflet_canvas_layer.js" type="text/javascript"></script>
<script src="js/leaflet_tileloader_mixin.js" type="text/javascript"></script>
<script src="js/SunCalc.js" type="text/javascript"></script>
<script src="js/WebGLLayer.js" type="text/javascript"></script>
<script src="js/TrackballControls.js" type="text/javascript"></script>
<script src="js/TerrainLoader.js" type="text/javascript"></script>
<script src="js/bootstrap-slider.js" type="text/javascript"></script>
<script src="js/OSMBuildings-Leaflet.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>