<!DOCTYPE html>
<html>

<head>
    <meta name="google-adsense-account" content="ca-pub-5690943574589834">

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-G2E35NNEHC"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-G2E35NNEHC');
    </script>
    <title>Timeline Viewer Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        .custom-div-icon .circle {
            background-color: #ff7800;
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 20px;
            width: 20px;
            height: 20px;
            font-size: 12px;
        }

        .custom-div-icon .circle.selected {
            background-color: #ff0000;
            /* Highlight color */
        }

        #main-container {
            display: flex;
            height: 100vh;
            overflow: visible;
        }

        #controls {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            height: 100%;
            gap: 10px;
            overflow: visible;
        }

        #map {
            flex-grow: 1;
        }

        .flatpickr-input {
            max-width: 150px;
        }

        .highlighted-date {
            background-color: gray !important;
            color: white !important;
        }

        .flatpickr-day.selected {
            background-color: blue !important;
            border-color: blue !important;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
            flex-shrink: 1;
            flex-basis: 50%;
        }

        .hflex {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        #donate {
            justify-content: space-between;
        }

        #lists {
            display: flex;
            flex-grow: 1;
        }

        #listDays,
        #listPoints {
            flex-grow: 1;
        }

        .bold-label {
            font-weight: bold;
        }

        .flex-grow {
            flex-grow: 1;
        }

        button {
            display: inline-block;
            padding: 5px 30px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            background: Gray;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        button:hover {
            background: blue;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0,
    </style>
</head>

<body>
    <div id="main-container">
        <div id="controls">

            <div id="donate" class="hflex">
                <label>Please support me :)</label>

                <form action="https://www.paypal.com/donate" method="post" target="_top">
                    <input type="hidden" name="business" value="5LCKL3YCAELRL" />
                    <input type="hidden" name="no_recurring" value="0" />
                    <input type="hidden" name="item_name"
                        value="Please support me in my purpose to help people around the world! I thank you from the bottom of my heart." />
                    <input type="hidden" name="currency_code" value="USD" />
                    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0"
                        name="submit" title="PayPal - The safer, easier way to pay online!"
                        alt="Donate with PayPal button" />
                    <img alt="" border="0" src="https://www.paypal.com/en_IL/i/scr/pixel.gif" width="1" height="1" />
                </form>
            </div>

            <a href="#bottom" class="button">How to use?</a>

            <input type="file" id="fileInput" />

            <input type="text" id="calendar" class="flatpickr-input" />
            <br />
            <div class="hflex">
                <button id="setViewArea">Fit all points</button>
                <input type="checkbox" id="chkSetViewArea" checked>Auto fit on change
            </div>

            <button id="showAll">Show All</button>
            <button id="showContainedPathsAll">Show Contained (All)</button>
            <button id="showContainedPathsSome">Show Contained (Any)</button>
            <button id="showIntersectingPaths">Show Intersecting</button>
            <div class="hflex">
                <input type="checkbox" id="chkKeepPoints">Keep current filter
            </div>

            <div class="hflex">
                <b>Total distance:</b>
                <div id="distance"></div>
            </div>

            <div id="lists">
                <div class="flex-column">
                    <label class="bold-label">Days</label>
                    <select id="listDays" multiple></select>
                </div>
                <div class="flex-column">
                    <label class="bold-label">Points</label>
                    <select id="listPoints" multiple></select>
                </div>
            </div>

        </div>
        <div id="map" style="height: 100%;"></div>
    </div>

    <div id="bottom">
        <h1>Quick start:</h1>
        <h2>1. Get timeline file from:</h2>
        <b>Android:</b> Settings -> Location -> Location Services -> Timeline -> Export Timeline<br />
        <b>iOS:</b> Google Maps -> Settings -> Personal Content -> Export Timeline data<br />
        <b>Google Takeout:</b> https://takeout.google.com/ -> Choose Location History (Timeline) -> Export
        <h2>2. Click "Choose File", choose your json file, and enjoy! If you want to load multiple json files, you can
            zip them together and load the zip file!</h2>
        <h1>General explanation:</h1>

        If you saved your location history on your phone, you used to be able to view it with Google Maps.<br />
        This year Google remove this feature from their app, but it's still possible to export the data to a json file
        (see above).<br />
        In this website you can load this data file, and view your historical locations on a map!<br />
        <br />
        After you upload the file, the available days will be marked with a green color.<br />
        You can see specific days by selecting them either in the calendar or in the listbox.<br />
        If you want to select multiple days, you can currently do it only in the listbox, not in the calendar.<br />
        You can also filter the listbox according to the current view, or just show all available days.<br />

        <h1>Button usage:</h1>
        <b>Fit all points</b> - Fits all points that are on the map</br>
        <b>Auto fit on change</b> - auto fit all points that are on the map whenever they change</br>
        <b>Show All</b> - show all available days in the listbox</br>
        <b>Show Contained (All)</b> - show days in the listbox for which all points are contained in the current map
        view</br>
        <b>Show Contained (Any)</b> - show days in the listbox for which any point is contained in the current map
        view</br>
        <b>Show Intersecting</b> - show days in the listbox for which any path between two points intersects with the
        current map view</br>
        <b>Keep current filter</b> - Add the new filter to the previous one

        <h1>Feel free to email me at yakir.dorani@gmail.com</h1>

        &copy; 2024 Yakir Dorani. All rights reserved. Unauthorized use and/or duplication of this material without
        express and written permission from this site’s author and/or owner is strictly prohibited.
    </div>
    <script src="script.js"></script>
</body>

</html>