location-history-visualizer/index.html at d794872fb5e24c14e8a4d90f3dcb5b5af3eee8f5 · theopolisme/location-history-visualizer · GitHub

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
<!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>
                <p>Welcome to <b>Location History Visualizer</b>, a tool for visualizing your collected Google Timeline data with heatmaps. <i>Don't worry&mdash;all processing and visualization happens directly on your computer, so rest assured that nobody is able to access your Location History but you.</i></p>
                <p>First download your data:</p>
                <ul style="list-style: none; padding: 0;">
                    <li><strong>On Android:</strong> <span style="color: #34a853;">Phone settings</span> → <span style="color: #34a853;">Location</span> → <span style="color: #34a853;">Location Services</span> → <span style="color: #34a853;">Timeline</span> → <span style="color: #34a853;">Export Timeline data</span></li>
                    <li><strong>On iOS:</strong> <span style="color: #007aff;">Google Maps app settings</span> → <span style="color: #007aff;">Personal Content</span> → <span style="color: #007aff;">Export Timeline Data</span></li>
                </ul>
                <p>You should get a file ending in .json which you can upload here: <input name="file" type="file" id="file"></input></p>
                <p class="credit"><a target="_blank" href="https://github.com/Lucas-vdr-Horst/location-history-visualizer">This project</a> is just a fix for the newest json format. All actual credit goes to <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">the original</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>