woelpert/biketrack-plainjs
2
0
Fork 0
Code Issues Pull Requests repo.project_board Releases Wiki Activity

added getAllCoordinates function

Browse Source
This commit is contained in:
Jens Wölpert 2022-07-18 16:53:53 +02:00
parent b61fd5b174
commit 47c2fab741
4 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
execution.js Normal file
View File

@ -0,0 +1,11 @@
(async () =>{
console.log( getAllCoordinates('route2'))
//var polyline = L.polyline(newArray, {color: 'red'}).addTo(map);
//map.fitBounds(polyline.getBounds());
//connectDB('route2')
})();

35
functions.js
View File

@ -23,8 +23,8 @@ initIPFS()
const address = db.address
console.log(address)
console.log(db.address.toString())
//await db.put('2022-07-01T10:49:07', '49.41185089/8.67646861')
//await db.put('2022-07-01T10:49:12', '49.41166303/8.67652893')
await db.put('2022-07-01T10:49:07', '49.41185089/8.67646861')
await db.put('2022-07-01T10:49:12', '49.41166303/8.67652893')
let csv = "./new.csv"
const value = db.all
//console.log(value)
@ -54,6 +54,37 @@ async function connectDB(dbname){
const route2 = db_route2.all
console.log(route2);
}
async function getActualCoordinates(){
}
async function getAllCoordinates(dbname){
// creater db with name db2
var db2 = await createDb(dbname)
const all_coordinates = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(all_coordinates)
// parse to string for split and then split by /
var coordinate_string = coordinates.toString()
var between_string = coordinate_string.split("/")
var final_string = between_string.toString()
//comma string looks now like this : 49.1212,8.1231,49.1231, ...
var comma_string = final_string.split(',')
// create new Array and put string back in to array for using paths/polylines with leafleat
var newArray =[];
// use for loop for iterating over string and put it in the right order
for (var i = 0; i < comma_string.length; i++) {
var increment = i+1;
newArray.push([comma_string[i], comma_string[increment]])
increment = increment+1
i = i+1
}
console.log(newArray);
return newArray;
}

83
index.html
View File

@ -8,10 +8,46 @@
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="jquery-csv.js"> </script>
<meta charset="utf-8">
<title>Track your bike</title>
</head>
<body>
<ul>
<li>
<div class="wrapper">
<div class="panel">
<div class="panel-header">
<h3 class="title">Statistics</h3>
<div class="routes">
<span>Route X</span>
</div>
</div>
<div class="panel-body">
<div class="categories">
<div class="category">
<span>kilometers traveled</span>
<span>2 Km</span>
</div>
<div class="category">
<span>traveled time</span>
<span>2 min</span>
</div>
</div>
<div class="chart">
<div class="operating-systems">
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="container d-flex justify-content-center">
<ul class="list-group mt-5 text-white">
@ -49,40 +85,10 @@
</ul>
</div>
</li>
</ul>
<div id="map"></div>
<div class="wrapper">
<div class="panel">
<div class="panel-header">
<h3 class="title">Statistics</h3>
<div class="routes">
<span>Route X</span>
</div>
</div>
<div class="panel-body">
<div class="categories">
<div class="category">
<span>kilometers traveled</span>
<span>2 Km</span>
</div>
<div class="category">
<span>traveled time</span>
<span>2 min</span>
</div>
</div>
<div class="chart">
<div class="operating-systems">
</div>
</div>
</div>
</div>
</div>
<script src="jquery-csv.js"> </script>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
@ -92,13 +98,16 @@
<script type="text/javascript" src="map.js"></script>
<script>
<script type="text/javascript" src="execution.js"></script>
var data = jQuery.csv.toObjects(csv);
<script>
var csv = './new.csv'
var data = $.csv.toObjects(csv);
console.log(data)
</script>
<style> #map { height: 800px; width: 1400px; }</style>
<style> #map { height: 1000px; width: 1000px; }</style>
<style>
/*
* {
box-sizing: border-box;
}
@ -196,8 +205,6 @@ html, body {
border-radius: 15px;
}
</style>
<style>
body{
background: #e68a43;
}
@ -238,7 +245,7 @@ ul{
margin-right: 10px;
}
*/
</style>
</body>
</html>

48
map.js
View File

@ -1,58 +1,18 @@
(async () =>{
var db2 = await createDb('route2')
const value = db2.all
console.log(value)
//loadRoute('route2')
//loadRoute('route2')
console.log(Object.keys(value))
console.log(Object.values(value))
var coordinates = Object.values(value)
var mystring = coordinates.toString()
console.log(mystring)
var hope = mystring.split("/")
console.log(typeof(hope))
//console.log(hope)
var my2string = hope.toString()
var comma = my2string.split(',')
console.log("this is comma:"+comma)
console.log(comma)
var newArray =[];
for (var i = 0; i < comma.length; i++) {
var plus = 1
//var newArray = [[]];
//newArray[i] += [comma[i], comma[i+plus] ]
var increment = i+1;
console.log(i)
console.log("increment" +increment)
newArray.push([comma[i], comma[increment]])
increment = increment+1
i = i+1
//newArray[i][i+plus] +=comma[i+plus]
}
console.log(newArray);
var map = L.map('map').setView([49.416075235, 8.6722049], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
zoom: 44,
attribution: '© OpenStreetMap'
}).addTo(map);
var polyline = L.polyline(newArray, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
//connectDB('route2')
})();
}).addTo(map)
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
//L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
var polyline = L.polyline(newArray, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
//var polyline = L.polyline(newArray, {color: 'red'}).addTo(map);
//map.fitBounds(polyline.getBounds());