-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (95 loc) · 5.03 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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celestial Cartography</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./celestial_objects_geoJSON.js" type="text/javascript"></script>
<script src="./des_dr2_footprint-geojson.js" type="text/javascript"></script>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<!-- <div id="northMap", style="height: 500px"></div> -->
<!-- <div id="left-container", class="container">
<h1>
Heyo! Thanks for coming here to take a look at my work so far.
</h1>
<p>
Here we show the 2MASS Redshift Survey as a map. You can choose which range of redshifts you want to see,
and you can zoom into and out of the map. In this case, I simply used some images as maps, either from the 2MASS
redshift survey directly or from dr. Jenna's plots. Ideally, we would create layers rather than base maps
to allow stacking multiple ranges of redshifts, rather than having to choose only one range (so, for example, the
ability to check multiple boxes of small ranges rather than choose only one, as it is now).
</p>
<p>
Usage:
<ul>
<li>Use your mouse's scroll or the widget on the top left to zoom in and out</li>
<li>Hover over the layers widget on the top right and select a redshift range to view</li>
<li>Click on any of the markers to view more information</li>
</ul>
</p>
</div>
<select id="selection-menu" onchange="change_div(this.value)">
<option value="northpole" selected>North Pole</option>
<option value="southpole">South Pole</option>
<option value="primemeridian">Meridian</option>
<option value="antimeridian">Anti-meridian</option>
<option value="offaxis">Off Axis</option>
<option value="antioffaxis">Anti-Off Axis</option>
</select>
<div id="right-container", class="container">
<div id="northpoleMap" class="map"></div>
<div id="southpoleMap" class="map"></div>
<div id="primemeridianMap" class="map"></div>
<div id="antimeridianMap" class="map"></div>
<div id="offaxisMap" class="map"></div>
<div id="antioffaxisMap" class="map"></div>
</div> -->
<div id="centre-container" class="container">
<h1>
Hello, thanks for coming to see what I've got so far!
</h1>
<p>
</p>
<p>
Usage:
<ul>
<li>Use your mouse's scroll or the widget on the top left to zoom in and out</li>
<li>Use the menu on the top right to choose with section of the sky you want to see</li>
<li>Use the (other) menu on the top right to select other all-sky backgrounds or to see some astrophysical phenomena</li>
<li>Click on the markers or the polygon for more info on it</li>
</ul>
</p>
<p>
Notes:
<ul>
<li>The published version of this page does not have great zoom abilities. This is because I could not (yet) set up enough images on the cloud</li>
<li>I chose completely random objects to demostrate the markers</li>
</ul>
</p>
<select id="selection-menu" onchange="change_div(this.value)">
<option value="northpole" selected>North Pole</option>
<option value="southpole">South Pole</option>
<option value="primemeridian">Meridian</option>
<option value="antimeridian">Anti-meridian</option>
<option value="offaxis">Off Axis</option>
<option value="antioffaxis">Anti-Off Axis</option>
</select>
<div id="northpoleMap" class="map"></div>
<div id="southpoleMap" class="map"></div>
<div id="primemeridianMap" class="map"></div>
<div id="antimeridianMap" class="map"></div>
<div id="offaxisMap" class="map"></div>
<div id="antioffaxisMap" class="map"></div>
</div>
</body>
</html>