-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
49 lines (49 loc) · 4.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta property="og:title" content="Milky Way Planner">
<meta property="og:description" content="Is tonight a good night to photograph the Milky Way?">
<meta property="og:image" content="https://travisdoesmath.github.io/milky-way-planner/preview-image.png">
<meta property="og:url" content="https://travisdoesmath.github.io/milky-way-planner/">
<script src="static/js/d3.v6.min.js"></script>
<script src="static/js/suncalc.js"></script>
<script src="static/js/luxon.min.js"></script>
<script>
var DateTime = luxon.DateTime;
</script>
<script src="static/js/tz.js"></script>
<link href="static/css/style.css" rel="stylesheet">
</head>
<body>
<div class="column" id="body">
<h1 class="title">Milky Way Planner</h1>
<h3>Altitude of Galactic Center and Moon</h3>
<svg id="chartSvg"></svg>
<legend></legend>
<div id="inputs">
<input id="date" type="date">
<input type="number" id="latitude" min="-90" max ="90">
<input type="number" id="longitude" min="-180" max ="180">
<div id="tzInfo"></div>
<div id="locationButton"></div>
</div>
<h3>About</h3>
<p>This chart shows how high in the sky (or the <em>altitude</em>) of the galactic center and Moon at a given time. The chart starts at noon (local to the entered latitude and longitude) and ends at noon the following day.</p>
<p>While the Milky Way can always be seen in a dark enough sky, the galactic center is not always visible. The galactic center is also the more visually interesting section of the Milky Way, so when planning to take photos of the Milky Way, it is worthwhile to plan when the galactic center will be visible.</p>
<p>Like all celestial objects, the center of the Milky Way appears to rise from the east and set in the west, reaching its heighest point (or <em>transit</em>) when it passes through the arc of the sky running North to South.</p>
<p>There is also an approximation of what angle the galaxy will appear at when the galactic center is visible. For more precise estimation, I suggest using <a href="http://stellarium.org/">Stellarium</a>.</p>
<h3>How to Use</h3>
<p>The date and latitude and longitude coordinates can all be edited. The planner will estimate the timezone based on the latitude and longitude coordinates. You may also get your current location coordinates by pressing the "Get My Location" button, if your browser supports it (but to be frank, I only tested this on Chrome, and at this point, I would be shocked if it worked on anything less than a very modern browser).</p>
<p>Ideally, you are looking for times during the night sky where the galactic center is visible, but after the moon has set and before it has risen.</p>
<p>This page does not account for weather or light pollution, so double check that you are considering a place with dark enough skies, and double check the weather before you go out to take photos!</p>
<h3>More</h3>
<p>All the code for this page is available at my <a href="https://github.com/travisdoesmath/milky-way-planner">github repo</a>. Libraries used are <a href="https://d3js.org/">D3.js</a>, <a href="https://moment.github.io/luxon/index.html">Luxon</a>, <a href="https://github.com/darkskyapp/tz-lookup-oss/">tz-lookup</a>, and a modified version of <a href="https://github.com/mourner/suncalc">SunCalc</a>. </p>
<p>If you would like to support me and <a href="https://travisdoesmath.github.io/">other projects like this</a>, please consider buying me a coffee:</p>
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="travisdoesmath" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff" ></script>
</div>
<!-- <script src="helpers.js"></script> -->
<script src="static/js/main.js"></script>
<img src="preview-image.png" style="display:none">
</body>
</html>