-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
118 lines (92 loc) · 5.68 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link type="text/css" rel="stylesheet" href="global.css" />
<link type="text/css" rel="stylesheet" href="contrib/leaflet.css" />
<link type="text/css" rel="stylesheet" href="contrib/jquery-ui.css">
<script type="text/javascript" src="contrib/gl-matrix.js" ></script>
<script type="text/javascript" src="contrib/jquery.js"></script>
<script type="text/javascript" src="contrib/jquery-ui.js"></script>
<script type="text/javascript" src="contrib/webgl-debug.js"></script>
<script type="text/javascript" src="contrib/poly2tri.js"></script>
<script type="text/javascript" src="contrib/leaflet.js"></script>
<script type="text/javascript" src="tile.js"></script>
<script type="text/javascript" src="mapLayer.js"></script>
<script type="text/javascript" src="buildings.js"></script>
<script type="text/javascript" src="skydome.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="sun.js"></script>
<script type="text/javascript" src="shaders.js"></script>
<script type="text/javascript" src="vicinityMap.js"></script>
<script type="text/javascript" src="glu.js" ></script>
<script type="text/javascript" src="math.js" ></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="helpers.js"></script>
<script type="text/javascript" src="uiElements.js"></script>
<!-- <script type="text/javascript" src="combined.js"></script> -->
<title>OSM Street View</title>
</head>
<body > <!-- style ="padding: 0px; margin: 0px;" -->
<div id="dummy" style="background-color:white" >
<div id="canvasContainer" >
<canvas id="webGlCanvas" style="left:0px; right:0px; top:0px; bottom: 0px; width:100%; height:100%; background:black" ></canvas>
</div>
<div id="toolbarDiv" style="position:fixed; left:10px; top:10px; z-index:1; height:52px">
<img id="btnFullScreen" src="" alt="fullscreen mode">
</div>
<div id="mapDiv" class="toolWindow" style=""> </div>
<!--<div id="divSunPos" class="toolWindow" style="display:none; overflow-y:auto">
<div style="padding-left:20px; padding-right:20px">
<h3>Sonnenposition</h3>
Verschieben sie die Regler, um die Position der Sonne und damit den Schattenfall anzupassen.<br><br>
Tag: <span id="lblDay" ></span>
<div id="slider-day" style="width:100%; margin-bottom:20px"></div>
Zeit: <span id="lblTime" ></span>
<div id="slider-time" style="width:100%; margin-bottom:20px"></div>
</div>
</div> -->
<div id="divUsageNotes" style="">
<div style="padding-left:20px;padding-right: 20px">
<h3>OSM Street View</h3>
<p>Click on any location on the map to see a 3D view of the world as seen from that position.
Then click and drag the 3D view with your mouse to look around.</p>
<p>Here are some location suggestions:
<select id="sampleLocations">
<option value="dummy">-- select one --</option>
<option value='{"lat":51.4979, "lng":-0.1203, "yaw":303, "pitch":7 }'>London (House of Parliament)</option>
<option value='{"lat":40.7683, "lng":-73.9794, "yaw":261, "pitch":14}'>New York City (Central Park)</option>
<option value='{"lat":38.9001, "lng":-77.0364, "yaw":187, "pitch":0 }'>Washington DC(The White House)</option>
<option value='{"lat":36.1132, "lng":-115.1727, "yaw":284, "pitch":12}'>Las Vegas (The Bellagio)</option>
<option value='{"lat":52.509344, "lng":13.375242, "yaw":299, "pitch":15}'>Berlin (Potsdamer Platz)</option>
<option value='{"lat":52.5184, "lng":13.3725, "yaw":104, "pitch":10}'>Berlin (Bundestag)</option>
<option value='{"lat":51.3429, "lng":12.3820, "yaw":343, "pitch":11}'>Leipzig (Main Station)</option>
<option value='{"lat":52.1394, "lng":11.6396, "yaw":203, "pitch":17}'>Magdeburg (Universitätsplatz)</option>
</select>
</p>
<p>Buildings missing or inaccurate? <a href="howToEdit.html" target="_blank">Add them yourself</a>!</p>
</div>
</div>
<div id="divSettings" style="">
<div style="padding-left:20px; padding-right:20px; padding-bottom:20px">
<h3>Settings</h3>
<h4>Map Style</h4>
<select id="tileSetSelection">
<!--<option value="dummy"> == select one == </option>-->
<option value="MapLayer.TileSets.OSM">OSM default style</option>
<option value="MapLayer.TileSets.MapQuestOpen" >MapQuest Open Map</option>
<option value="MapLayer.TileSets.MapQuestOpenSatUS">MapQuest Open Aerial (US only)</option>
<!-- <option value="MapLayer.TileSets.OsmBrightMagdeburg">OSM Bright (Magdeburg only)</option>-->
</select>
<h4>Eye Height</h4>
<div id="slider-height" style="width:95%" > </div>
</div>
</div>
<div id="divDisclaimer" style="position:fixed; bottom:10px; font-size:80%; font-style:italic">
The map and building geometry are ©OpenStreetMap contributors and are <a href="http://www.openstreetmap.org/copyright">licensed</a> under the Creative Commons BY-SA (map) and Open Database License (buildings) licenses. For administrative questions on this page please contact the <a href="mailto:rbuch703@gmail.com">webmaster</a>. </div>
</div>
<span id="errorLog" style="color:#F00"></span>
</body>
</html>