149 lines
3.8 KiB
HTML
Executable File
149 lines
3.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Quick Start - Leaflet</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="../include/leaflet/leaflet.css" />
|
|
<script src="../include/leaflet/leaflet.js"></script>
|
|
<script src="../include/leaflet/gpx/gpx.js"></script>
|
|
<script src="./js/GPXParser.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div>
|
|
<div class="contenta">
|
|
<h1>Participant Timeline</h1>
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<div class= "contenta">
|
|
<form action="Salchau/" method="POST" enctype="multipart/form-data">
|
|
<label for="fileupload">Wähle eine Datei aus:</label>
|
|
<input type="file" id="fileupload" name="fileupload">
|
|
<input type="submit" value="Datei hochladen">
|
|
</form>
|
|
<button id="clear">Clear</button>
|
|
<select name="ddParticipants" id="ddParticipants">
|
|
<option value="">Track</option>
|
|
<option value="">Waypoints</option>
|
|
<option value="">Beides</option>
|
|
</select>
|
|
</div>
|
|
</ul>
|
|
<div class="map-content">
|
|
<div class="contenta" id="map" style="height: 890px;width: 90% ;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var mymap = L.map('map').setView([53.052797857017,8.89316441712249], 20); //52.487646, 11.610097
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 22,
|
|
maxNativeZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(mymap);
|
|
|
|
//var gpx = 'mtb/OutputToolThorsten.gpx';
|
|
var gpx = 'Salchau/excon_999_BT_575_ohne_IPS_Empfang.gpx'; // excon_999_BT_575_ohne_IPS_Empfang.gpxmydata.gpx
|
|
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
|
|
mymap.fitBounds(e.target.getBounds());
|
|
}).addTo(mymap);
|
|
|
|
const xmlDoc = 'Datei';
|
|
const points = xmlDoc.getElemantByTagName('trkpt');
|
|
let coordinates = [];
|
|
|
|
for (let i = 0; i < point.length; i++) {
|
|
const lat = point[i].getAttribute('lat');
|
|
const lon = point[i].getAttribute('lon');
|
|
const time = point[i].getAttribute('time')
|
|
const ele = point[i].getAttribute('ele')
|
|
coordinates.push({lat: parseFloat(lat), lon: parseFloat(lon)});
|
|
}
|
|
|
|
</script>
|
|
<div class="contenta">
|
|
<h1>Timeline</h1>
|
|
</div>
|
|
<div class="content">
|
|
<canvas id="myChart" style="height: 500px; width:100%;max-width:100%"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
/*
|
|
document.getElementById('loadGpx').addEventListener('click',function(){
|
|
|
|
const gpxfile = 'Salchau/mydata.gpx';
|
|
|
|
fetch(gpxfile)
|
|
.then(response => {
|
|
if (!response.ok){
|
|
throw new Error('ne');
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(gpxText => {
|
|
const parser = new DOMParser();
|
|
|
|
const xmlDoc = 'Dtatei';
|
|
|
|
const trackpoint = xmlDoc.getElemantByTagName('wpt');
|
|
const points = [];
|
|
for (let i = 0; i< point.length; i++){
|
|
const time = point.getElemantByTagName('time')[0];
|
|
points.push({time});
|
|
}
|
|
|
|
const gpxData = points;
|
|
|
|
dokument.getElementById('output').textContent = JSON.stringify(gpxData, null, 2);
|
|
|
|
})
|
|
.catch(error =>{
|
|
console.error('',error);
|
|
});
|
|
});
|
|
|
|
*/
|
|
|
|
const xyValues = [
|
|
{x:50, y:7},
|
|
{x:60, y:8},
|
|
{x:70, y:8},
|
|
{x:80, y:9},
|
|
{x:90, y:9},
|
|
{x:100, y:9},
|
|
{x:110, y:10},
|
|
{x:120, y:11},
|
|
{x:130, y:14},
|
|
{x:140, y:14},
|
|
{x:150, y:15}
|
|
];
|
|
|
|
new Chart("myChart", {
|
|
type: "scatter",
|
|
data: {
|
|
datasets: [{
|
|
pointRadius: 4,
|
|
pointBackgroundColor: "rgb(123,0,255)",
|
|
data: xyValues
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {display: true},
|
|
scales: {
|
|
xAxes: [{ticks: {min: 0, max:800}}],
|
|
yAxes: [{ticks: {min: 0, max:16}}],
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|