-
Notifications
You must be signed in to change notification settings - Fork 230
/
index.html
110 lines (102 loc) · 7.23 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
<!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 href="../css/style.css" rel="stylesheet">
<link rel="stylesheet" href="index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
</head>
<body>
<div class="visualizer">
<!-- Fork me on GitHub -->
<a id="forkme" href="https://github.com/theopolisme/location-history-visualizer" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<!-- 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>
<div class="note">
<strong>Note:</strong> This tool only generates heatmaps. If you're looking for minute-by-minute analysis of your Location History, including accuracy information, location-based search, advanced filtering and measurement tools, and more, check out <strong><a href="/">Location History Visualizer Pro</a></strong>.
</div>
<p>Welcome to <b>Location History Visualizer</b>, a tool for visualizing your collected Google <a href="https://google.com/locationhistory" target="_blank">Location History</a> data with heatmaps. <i>Don't worry—all processing and visualization happens directly on your computer, so rest assured that nobody is able to access your Location History but you... and Google, of course.</i></p>
<p>To start off, you'll need to go to <a href="https://google.com/takeout" target="_blank">Google Takeout</a> to download your Location History data: on that page, deselect everything except Location History by clicking "Select none" and then reselecting "Location History". Then hit "Next" and, finally, click "Create archive". Once the archive has been created, click "Download". Unzip the downloaded file, and open the "Location History" folder within. <b>Then, drag and drop <i>LocationHistory.json</i> from inside that folder onto this page.</b> Let the visualization begin!</p>
<p class="fallback">Alternatively, select your <b>LocationHistory.json</b> file directly: <input name="file" type="file" id="file"></input></p>
<p class="credit">An <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">open source</a> project by the makers of <a href="/">Location History Visualizer Pro</a>.</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>This may take a while... sit back, get a cup of tea or something.</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 [latitude, longitude] pairs, every one of which must be loaded, analyzed, and plotted. That's a lot of dots.</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 heatmap. Please submit your email address to start exploring...</p>
<div class="email-form">
<input id="email" type="email" placeholder="Email address" />
<button id="launch">Launch heatmap</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. Hover over the menu in the lower lefthand corner to customize the heatmap rendering.</p>
<div class="disclaimer">By submitting your email address you agree to receive interesting communications from the Location History Visualizer team from time to time. If you're not interested, you can unsubscribe immediately.</div>
<p class="credit">An <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">open source</a> project by the makers of <a href="/">Location History Visualizer Pro</a>.</p>
</div>
</div>
</div>
<!-- Appear when heatmap is displayed -->
<div id="controls">
<div class="title">
Location History Visualizer
<span>(hover for additional controls)</span>
</div>
<div class="control-block">
<label for="radius">Point radius</label>
<input type="range" min="1" max="30" id="radius" class="control">
</div>
<div class="control-block">
<label for="blur">Blur radius</label>
<input type="range" min="1" max="25" id="blur" class="control">
</div>
<div class="control-block">
<label for="heatOpacity">Heat opacity</label>
<input type="range" min="0" max="1" step="0.05" id="heatOpacity" class="control">
</div>
<div class="control-block">
<label for="tileOpacity">Map opacity</label>
<input type="range" min="0" max="1" step="0.05" id="tileOpacity" class="control">
</div>
<div class="control-block actions">
<button id="reset">Reset to defaults</button>
</div>
</div>
<!-- The map, populated by leaflet.js -->
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.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="lib/leaflet.heat.min.js"></script>
<script src="lib/prettysize.js"></script>
<script src="lib/oboe-browser.min.js"></script>
<script src="index.js?v=3"></script>
<!-- BEGIN GOOGLE ANALYTICS -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55418641-9', 'auto');
ga('send', 'pageview');
</script>
<!-- END GOOGLE ANALYTICS -->
</body>
</html>