function loadData() {
    console.log($(location).attr('hash').substr(1));
    $.getJSON($(location).attr('hash').substr(1), function (data) {
        var images = {};
        var tiles = {
            "openstreetmap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxNativeZoom: 19,
                maxZoom: 24,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),
            "esri sat": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                maxNativeZoom: 19,
                maxZoom: 24,
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
            }),
            "google sat": L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                maxNativeZoom: 20,
                maxZoom: 24,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            })
        };
        var map = L.map("mainMap", {layers: [tiles.openstreetmap]});

        function styleTrack(feature) {
            var styles = {};
            styles.color = data.colors[feature.properties.activity_type];
            return styles;
        }

        var highlighted = null;

        function onClick(e) {
            var start = e.target.feature.geometry.properties.start_timestamp;
            var end = e.target.feature.geometry.properties.end_timestamp;
            var changed = highlighted !== e.target.feature;
            $.each(images, function (timestamp, board) {
                    if ((timestamp >= start && timestamp < end) && changed) {
                        board.image.first().addClass("highlight");
                    } else {
                        board.image.removeClass("highlight");
                        highlighted = null;
                    }
                }
            );
            if (changed) {
                highlighted = e.target.feature;
            }
        }

        var coords = [];

        function onEachFeature(feature, layer) {
            layer.setStyle(styleTrack(feature));
            layer.on('click', onClick);
            if (feature.coordinates.length > 1) {
                coords = coords.concat(feature.coordinates.map(function (p) {
                    return [p[1], p[0], 0.1];
                }));
            }
        }

        var track = L.geoJSON(data['track'], {
            //style: styleTrack,
            onEachFeature: onEachFeature
        }).addTo(map);

        map.fitBounds(track.getBounds());

        var heat = L.heatLayer(coords);
        L.control.layers(tiles, {"heatmap": heat}).addTo(map);

        var list = $("<ul />");
        var current = {
            "pos": data["boards"][1].coordinate.coordinates
        };
        console.log(current);
        var marker = L.marker([current.pos[1], current.pos[0]]).addTo(map);
        $.each(data["boards"], function (index, entry) {
            //console.log(index, entry);
            var item = $("<li>", {class: entry.extra_data.activity_type});
            var container = $("<div>", {class: "board"});
            var image = $("<img>", {src: entry.image.replace("static/progress/", "")});
            image.attr("data-time", entry.timestamp);
            image.hover(function () {
                marker.setLatLng([entry.coordinate.coordinates[1], entry.coordinate.coordinates[0]]);
            }, function () {
                marker.setLatLng(current.pos.coordinates[1], current.pos.coordinates[0]);
            });
            image.click(function (e) {
                current.board = image;
                current.pos = entry.coordinate;
            });
            images[entry.timestamp] = {image: image, coordinate: entry.coordinate};
            image.appendTo(container);
            container.appendTo(item);
            item.appendTo(list);
        });
        current.board = images[data["boards"][1].timestamp];
        list.appendTo(".sequence");
    });
}

$(document).ready(function () {
    loadData();
});