forked from theopolisme/location-history-visualizer
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
91 lines (85 loc) · 5.34 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
<!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="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">
<!-- 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 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>Records.json</i> from inside that folder onto this page.</b> Let the visualization begin!</p>
<p class="fallback">Alternatively, select your <b>Records.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.</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.</p>
<div class="launch-form">
<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>
<p class="credit">An <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">open source</a> project.</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>
</body>
</html>