var map = L.map('map').setView([40.721, -73.974], 17);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// // add a marker in the given location, attach some popup content to it and open the popup
// L.marker([51.5, -0.09]).addTo(map)
//     .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
//     .openPopup();


function parsexml(text) {
    parser = new DOMParser()
    xmlDoc = parser.parseFromString(text, "text/xml");
    nodelist = xmlDoc.getElementsByTagName('trkpt');
    r = [];
    for(i = 0; i < nodelist.length; i++) {
        e = nodelist[i]
        r[i] = L.latLng(e.getAttribute('lat'), e.getAttribute('lon'));
    }
    return r;
}

function handleFile(evt) {
    var file = evt.target.files[0]; // FileList object
    var reader = new FileReader();
    reader.onload = function() {
        console.log(this.result);
        var polyline = L.polyline(parsexml(this.result),
                                  {color: 'red'}).addTo(map);
        map.fitBounds(polyline.getBounds());
    }
    reader.readAsText(file);
}

document.getElementById('files').addEventListener('change', handleFile, false);