forked from theopolisme/location-history-visualizer
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
90 lines (74 loc) · 5.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
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
<!DOCTYPE html>
<html>
<head>
<title>Location History Visualizer | Heatmap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Visualize your collected Google Location History data using an interactive heatmap directly in your browser.">
<link rel="stylesheet" href="index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
</head>
<body>
<div class="visualizer">
<!-- Shown before the heatmap is displayed -->
<div class="container">
<div class="content">
<!-- Intro, before data has been uploaded -->
<div id="intro" class="content-box">
<h2>Location History Visualizer</h2>
<p>Welcome to <b>Location History Visualizer</b>, a tool for visualizing your Google <a href="https://google.com/locationhistory" target="_blank">Location History</a> data. You can explore your location history over a specific time frame, for example during a roadtrip, which lets you recall all the places you have been to.</p>
<p><i>All processing and visualization happens directly on your computer, so your data stays under your control.</i></p>
<ol>
<li>To start, go to <a href="https://google.com/takeout" target="_blank">Google Takeout</a> to download your Location History data. On that page, select only "Location History", hit "Next" and, finally, click "Create export". This typically takes a few minutes. Once the archive has been created, download it and unzip it. Your data is in <code>Takeout/Location History/LocationHistory.json</code>.</li>
<li>Specify the <b>start and end date</b> that you want to see <i>(optional)</i>:<br/>
Start: <input type="date" id="fromDate"> End: <input type="date" id="toDate"></li>
<li><b>Drag and drop</b> <code>LocationHistory.json</code> onto this page or <b>select</b> it directly: <input name="file" type="file" id="file"></input></li>
</ol>
<p class="credit">This is an <a target="_blank" href="https://github.com/operte/location-history-visualizer">open source project</a> written in 2020.</p>
</div>
<!-- Shown in interim while processing is in progress -->
<div id="working" class="content-box hidden">
<h2>Processing data...</h2>
<div class="loading">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<p><span id="currentStatus">Waking up...</span></p>
<p>Your data is being read by your computer, which might take a while.</p>
<p><i>Why does it take so long?</i> Depending on how long Google's been tracking your location, you may have hundreds of thousands of location measurements, every one of which must be loaded, analyzed, and plotted. That's a lot of data.</p>
<p class="credit">This is an <a target="_blank" href="https://github.com/operte/location-history-visualizer">open source project</a> written in 2020.</p>
</div>
<!-- Content displayed once processing complete -->
<div id="done" class="content-box hidden">
<h2>Render complete!</h2>
<p>Successfully processed <span id="numberProcessed">a lot of</span> data points to generate your map.</p>
<div class="launch-button">
<button id="launch">Start exploring</button>
</div>
<p>Usage tips: <i>Zoom</i> by scrolling, double-clicking, or using the buttons in the upper lefthand corner. <i>Navigate</i> by clicking and dragging.</p>
<p class="credit">This is an <a target="_blank" href="https://github.com/operte/location-history-visualizer">open source project</a> written in 2020.</p>
</div>
</div>
</div>
<!-- The map, populated by leaflet.js -->
<div id="map"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.min.js"></script>
<script src="lib/prettysize.js"></script>
<script src="index.js"></script>
<!-- BEGIN GOOGLE ANALYTICS -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-165919121-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-165919121-1');
</script>
<!-- END GOOGLE ANALYTICS -->
</body>
</html>