examples/route.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="../jstransit.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
</head>
<body>

<div>
    <label for="route">Alege traseul:</label>
    <select id="route">
    <option value="3307307" selected="selected">Bus 117: Piața Sfânta Vineri => Cartier Confort Urban</option>
    <option value="3307287">Bus 117: Cartier Confort Urban => Piața Sfânta Vineri </option>
    <option value="2207120">Tram 21: Pasaj Colentina => Piața Sfântul Gheorghe </option>
    <option value="1925788">Tram 32: Piața Unirii => Depoul Alexandria </option>
  </select>
  <h4>Încărcare cronometrare: <input type="file" id="timer-file-input" /></h4>
  <h3>Sumar traseu</h3>
  <div id="file-content"></div>
</div>

<div><canvas id="adjCanvas" width="0" height="180"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas></div>

<div style="height: 700px; width: auto; margin: 0;" id="mapid"></div>
<script src="../jstransit.js"></script>
<script src="../jstransit_times.js"></script>
<script>
    function readTimerFile(e) {
    var file = e.target.files[0];
    if (!file) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (e) {
        var timing = e.target.result;
        // read chosen route
        var r = document.getElementById("route");
        var routeID = r.options[r.selectedIndex].value;
        var overpass1 = 'http://overpass-api.de/api/interpreter?data=relation(';
        var overpass2 =');out body;>;out body;';
        var overpass_full = overpass1 + routeID + overpass2;
        // clear existing statistics, if any
        document.getElementById('adjCanvas').innerHTML = 'Your browser does not support the HTML5 canvas tag.';
        var element = document.getElementById("datatable");
        if (element != null) {
            element.parentNode.removeChild(element);
        }
        
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var xmlDoc = this.responseXML;
                var relation = xmlDoc.getElementsByTagName("relation")[0];
                var mapObjects = addTimedRelation(timing, relation, xmlDoc);
                platforms =mapObjects[1];
                lines = mapObjects[0];
                if (linesLayer != null){
                    console.log('aici');
                    myMap.removeLayer(linesLayer);
                    myMap.removeLayer(platformsLayer);
                }
                linesLayer = new L.featureGroup(lines).addTo(myMap);
                platformsLayer = new L.featureGroup(platforms).addTo(myMap);
                myMap.fitBounds(platformsLayer.getBounds());
            }
        };
        xhttp.open("GET", overpass_full, true);
        xhttp.send();
    };
    reader.readAsText(file);
}
document.getElementById('timer-file-input').addEventListener('change', readTimerFile, false);
var myMap = baseMap(L);
var platforms = [];
var lines = [];
var linesLayer, platformsLayer;
</script>
</body>
</html>