-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (101 loc) · 5.3 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<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>Meteorite Landings Map</title>
<meta name="description"
content="Explore the fascinating world of meteorites with this interactive map that shows the locations, dates, names and sizes of meteorite landings around the world fell or found from 861 AD to 2013. Learn about the origin, composition, and impact of these cosmic rocks that have fallen to Earth.">
<meta name="keywords" content="meteorite landings, fallen meteorites, meteorite data">
<!-- does noy cause problems -->
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.0/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<script defer src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script defer src="https://unpkg.com/leaflet.markercluster@1.5.0/dist/leaflet.markercluster.js"></script>
<script defer src="app/index.js"></script>
</head>
<body>
<div id="main-container">
<header>
<h1 id="title-top">Meteorite Landings Map</h1>
<h2>Please allow some time for approximately 32000 objects to be processed and rendered on
the map</h2>
</header>
<form class="form">
<div id="fields-wrapper">
<div id="mass-low-label-wrap" class="label-wrap">
<label for="mass-low">Lower mass value (Kg):</label>
<div id="mass-low-input-wrap" class="input-wrap">
<input id="mass-low" type="number" name="mass-low" placeholder="0.001Kg" step="0.0001" min="0"
max="60000">
</div>
</div>
<div id="mass-high-label-wrap" class="label-wrap">
<label for="mass-high">Higher mass value (Kg):</label>
<div id="mass-high-input-wrap" class="input-wrap">
<input id="mass-high" type="number" name="mass-high" placeholder="60000Kg" step="0.0001"
min="0.0001" max="60000">
</div>
</div>
<div id="year-from-label-wrap" class="label-wrap">
<label for="year-from">From Year:</label>
<div id="year-from-input-wrap" class="input-wrap">
<input id="year-from" type="number" name="year-from" placeholder="860" step="1" min="860"
max="2013">
</div>
</div>
<div id="year-to-label-wrap" class="label-wrap">
<label for="year-to">To Year:</label>
<div id="year-to-input-wrap" class="input-wrap">
<input id="year-to" type="number" name="year-to" placeholder="2013" step="1" min="860"
max="2013">
</div>
</div>
</div>
<div id="submit-wrap">
<label for="submit"></label>
<input type="submit" id="submit" value="Submit">
</div>
</form>
<main>
<div id="map">
<div id="attribution"><a href="https://leafletjs.com/" target="_blank">Leaflet</a>
<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a>
</div>
</div>
<div id="advert">
<p>Use the filters at the top of the page to display only the desired meteorites.</p>
<p>Zoom in a location or click on a cluster bubble to break the clusters.</p>
<p>
Click on a marker to explore the fascinating world of
meteorites with this interactive map that shows the locations, dates, names and sizes of meteorite
landings around the world fell or found from 861 AD to 2013. Learn about the origin, composition,
and impact of these cosmic rocks that have fallen to Earth.
</p>
</div>
<div id="data-source">
<p>Data source <a href="https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"
target="_blank">data.nasa.gov</a>
</p>
</div>
</main>
</div>
<footer class="footer" aria-label="Footer">
<div id="footer-content">
<ul>
<li>
<a href="pages/about">About</a>
</li>
</ul>
</div>
</footer>
</body>
</html>