-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
162 lines (161 loc) · 5.9 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Family Tree Map</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<script
async
defer
src="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css"
/>
<link
href="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css"
rel="stylesheet"
type="text/css"
/>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="flex-parent viewport-full">
<div class="flex-child viewport-full" id="map-container">
<div id="map"></div>
</div>
<div class="flex-child viewport-full scroll-auto" id="family-tree">
<div class="flex-parent flex-parent--column h-full bg-white">
<div class="flex-child flex-child--grow px12 py12">
<h1 class="txt-xl txt-bold mb6">Family Tree Map</h1>
<p>
Select a GEDCOM file to see the birth locations of people in your
family tree on a map. All of the information in your GEDCOM file
is kept in the browser except for birthplaces, which are mapped by
the
<a
class="link"
href="https://docs.mapbox.com/api/search/geocoding/"
>Mapbox Geocoding API</a
>. If you refresh the page you will need to select your GEDCOM
file again.
</p>
<p class="py12">
If you don't have a GEDCOM file, you can right click and save this
<a
class="link"
href="https://raw.githubusercontent.com/alulsh/family-tree-map/main/test/kennedy.ged"
download="kennedy.ged"
target="_blank"
>GEDCOM file for John F. Kennedy</a
>.
</p>
<hr class="txt-hr" />
<h2 class="txt-l txt-bold">GEDCOM file</h2>
<input
class="py6 my6"
type="file"
accept=".ged"
onchange="readGedcomFile(event)"
/>
<h2 class="txt-l txt-bold">Settings</h2>
<div class="grid grid--gut0 w300">
<div class="col">
<label class="align-middle" for="relevance" title="test"
><a
class="link"
href="https://docs.mapbox.com/help/how-mapbox-works/geocoding/#search-result-prioritization"
>Relevance</a
></label
><svg class="icon color-gray mx6 inline align-middle">
<use
href="#icon-question"
onmousemove="showTooltip(event, 'Adjust geocoding relevance');"
onmouseout="hideTooltip();"
/>
</svg>
<div
id="tooltip"
display="none"
style="position: absolute; display: none"
class="tooltip px6 py6 round txt-bold txt-s align-center w300 bg-darken75 color-white"
>
Only display locations equal to or greater than the selected
geocoding relevance score.
</div>
</div>
<div class="col align-r align-middle">
<div
class="flex-parent-inline flex-parent--center-cross py3 px3 round border border--darken25 w180"
>
<div
class="flex-child flex-child--grow range range--s range--gray"
>
<input
class="align-middle"
type="range"
name="relevance"
min="0"
max="1"
value="0.75"
step="0.01"
id="relevanceRange"
oninput="updateRelevance(value)"
/>
</div>
<output
class="flex-child flex-child--no-shrink w36 txt-mono"
for="relevance"
id="relevanceOutput"
>0.75</output
>
</div>
</div>
</div>
<div id="results">
<hr class="txt-hr" />
<h2 class="txt-l txt-bold mb6">Results</h2>
<table id="family-table">
<thead>
<tr>
<th>First names</th>
<th>Last names</th>
<th>Birth date</th>
<th>Birthplace</th>
<th>Relevance</th>
<th>Geocoded location</th>
</tr>
</thead>
</table>
</div>
</div>
<footer class="px12 py12 bg-gray-faint txt-s align-r">
<a class="link" href="https://github.com/alulsh/family-tree-map"
>Hosted on GitHub</a
>
</footer>
</div>
</div>
</div>
<script src="window-functions.js"></script>
<script src="family-tree.js"></script>
<script src="geocode.js"></script>
</body>
</html>