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

routes generated

Browse Source
This commit is contained in:
jeanz6 2022-08-17 11:32:42 +02:00
parent 10901d73fd
commit 86ddf74d86
3 changed files with 236 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
functions.js
View File

@ -104,79 +104,117 @@ async function createDb(){
//console.log(lasttime) //console.log(lasttime)
return lasttime; return lasttime;
} }
var buffer_for_i = 0;
async function getAllCoordinates(){ async function getAllCoordinates(){
var db2 = await createDb() var db2 = await createDb()
const current_route = db2.all const all_coordinates = db2.all
// coordinates in this schema 49.123/8.2311 // coordinates in this schema 49.123/8.2311
var coordinates = Object.values(current_route) var coordinates = Object.values(all_coordinates)
// parse to string for split and then split by / // parse to string for split and then split by /
var coordinate_string = coordinates.toString() var coordinate_string = coordinates.toString()
var between_string = coordinate_string.split("/") var between_string = coordinate_string.split("/")
var final_string = between_string.toString() var final_string = between_string.toString()
//comma string looks now like this : 49.1212,8.1231,49.1231, ... //comma string looks now like this : 49.1212,8.1231,49.1231, ...
const comma_string = final_string.split(',') var comma_string = final_string.split(',')
// create new Array and put string back in to array for using paths/polylines with leafleat // create new Array and put string back in to array for using paths/polylines with leafleat
var route0 =[]; var newArray =[];
var route1 = [] // use for loop for iterating over string and put it in the right order
// use for loop for iterating over string and put it in the right order for (var i = 0; i < comma_string.length; i++) {
//route 0
for (var i = 0; i < comma_string.length; i++) { var increment = i+1;
//console.log(comma_string[i]) newArray.push([comma_string[i], comma_string[increment]])
if (comma_string[i] == "00"){ increment = increment+1
console.log("00 gefunden") i = i+1
buffer_for_i = i +2;
//console.log(buffer_for_i)
break;
} }
route0.push([comma_string[i], comma_string[i+1]]) // its only for converting the string array to a float array, because leaflethjs wants only a float array
i = i+1 (function(elem) {
} var callee = arguments.callee;
// its only for converting the string array to a float array, because leaflethjs wants only a float array return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
(function(elem) { : parseFloat(elem);
var callee = arguments.callee; })
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); }) newArray = newArray.map(function(elem) {
: parseFloat(elem); return elem.map(function(elem2) {
}) return parseFloat(elem2);
route0 = route0.map(function(elem) { });
return elem.map(function(elem2) {
return parseFloat(elem2);
}); });
}); console.log(newArray)
//console.log("route0")
//console.log(route0) //console.log(newArray)
//route 1 return newArray;
for (var i = buffer_for_i; i < comma_string.length; i++) {
console.log(buffer_for_i)
if (comma_string[i] == "00"){
//console.log("00 gefunden")
//console.log(buffer_for_i)
break;
}else if(comma_string[i] == "11"){
noroutes = 1;
//console.log("Ende gefunden")
} }
route1.push([comma_string[i], comma_string[i+1]])
i = i+1
} async function getAllRoutes(){
//console.log("route1") var buffer_for_i = 0;
//console.log(route1) var db2 = await createDb()
// its only for converting the string array to a float array, because leaflethjs wants only a float array const current_route = db2.all
(function(elem) { // coordinates in this schema 49.123/8.2311
var callee = arguments.callee; var coordinates = Object.values(current_route)
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); }) // parse to string for split and then split by /
: parseFloat(elem); var coordinate_string = coordinates.toString()
}) var between_string = coordinate_string.split("/")
route1 = route1.map(function(elem) { var final_string = between_string.toString()
return elem.map(function(elem2) { //comma string looks now like this : 49.1212,8.1231,49.1231, ...
return parseFloat(elem2); const comma_string = final_string.split(',')
}); // create new Array and put string back in to array for using paths/polylines with leafleat
}); var route0 =[];
var route1 = []
//console.log(route) // use for loop for iterating over string and put it in the right order
return [route0, route1]; //route 0
} for (var i = 0; i < comma_string.length; i++) {
//console.log(comma_string[i])
if (comma_string[i] == "00"){
console.log("00 gefunden")
buffer_for_i = i +2;
//console.log(buffer_for_i)
break;
}
route0.push([comma_string[i], comma_string[i+1]])
i = i+1
}
// its only for converting the string array to a float array, because leaflethjs wants only a float array
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
route0 = route0.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
//console.log("route0")
//console.log(route0)
//route 1
for (var i = buffer_for_i; i < comma_string.length; i++) {
console.log(buffer_for_i)
if (comma_string[i] == "00"){
//console.log("00 gefunden")
//console.log(buffer_for_i)
break;
}else if(comma_string[i] == "11"){
noroutes = 1;
//console.log("Ende gefunden")
}
route1.push([comma_string[i], comma_string[i+1]])
i = i+1
}
//console.log("route1")
//console.log(route1)
// its only for converting the string array to a float array, because leaflethjs wants only a float array
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
route1 = route1.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
//console.log(route)
return [route0, route1];
}
async function createRouteObject(){ async function createRouteObject(){
var currentime = await getCurrentTime() var currentime = await getCurrentTime()
@ -191,4 +229,88 @@ async function createlistitem() {
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+"")); li.appendChild(document.createTextNode("Last travelled route on: " +currentime+""));
ul.appendChild(li); ul.appendChild(li);
} }
async function clearMap() {
for(i in map._layers) {
if(map._layers[i]._path != undefined) {
try {
map.removeLayer(map._layers[i]);
}
catch(e) {
console.log("problem with " + e + map._layers[i]);
}
}
}
}
async function allRoutes(number_of_ze_route) {
//color theming
var color = ["blue","red","green","purple","gray","yellow"];
var i = Math.floor(Math.random() * 5) ;
let current = await prepare();
const current_route = current[number_of_ze_route];
clearMap()
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
polyline = L.polyline(current_route, {color: color[i]}).addTo(map);
var currentime = await getCurrentTime();
// does stuff ??
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Route "+ (number_of_ze_route + 1) + " was travelled on: " + currentime + "" ));
ul.appendChild(li);
//important for maps
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds());
return currentime;
}
async function showRoutes(){
var len_of_Routes = await getAllRoutes();
var len = len_of_Routes.length ;
console.log("Gotten all routes");
console.log(len);
var i = 0;
/* Doesnt work yet
var btn = [];
console.log("Beginning while with i = " + i)
while (i < len){
console.log("this is i: " + i)
console.log("this is len: " + len)
btn[i] = document.createElement("button");
btn[i].innerHTML = ("Route " + (i + 1));
btn[i].onclick = function () {
console.log("i is " + i)
console.log("setting allroutes with i as " + (i-1));
allRoutes((i-1));
};
document.body.appendChild(btn[i]);
console.log("Button generated with i = "+ i)
i = i + 1;
}
*/
// WORKS
console.log("this is i: " + i)
console.log("this is len: " + len)
let btn0 = document.createElement("button");
btn0.innerHTML = ("Route 1");
btn0.onclick = function () {
allRoutes((0));
};
let btn1 = document.createElement("button");
btn1.innerHTML = ("Route 2");
btn1.onclick = function () {
allRoutes((1));
};
i = i + 1;
document.body.appendChild(btn0);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(btn1);
//*/
}

39
index.html
View File

@ -17,12 +17,14 @@
</head> </head>
<body> <body>
<button onclick="showBike()"> Locate your Bike!</button> <div>
<button onclick="displayRoute()"> Show last travelled route</button> <button onclick="showBike()"> Locate your Bike!</button>
<button onclick="displayLastRoute()"> Show last travelled route</button>
</div>
<!-- <button onclick="createlistitem()"> create route</button> --> <!-- <button onclick="createlistitem()"> create route</button> -->
<ul id="list"> <ul id="list">
@ -34,7 +36,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<div id="map"></div> <!-- The MAP-->
<div style="position: relative; float:left;" id="map"></div>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script> <script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
@ -58,20 +61,25 @@
<style> #map { height: 600px; width: 600px; margin: auto }</style> <style> #map { height: 600px; width: 600px; margin: auto }</style>
<style>
/* <!-- Buttons for Route-->
* { <div class="routes">
<button onclick="showRoutes()"> Show Routes </button>
</div>
<style>
/*
*{
box-sizing: border-box; box-sizing: border-box;
} }
html, body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items:flex-start;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background: #d4d1d1; background: #bb753b;
overflow: hidden; overflow: hidden;
} }
@ -132,4 +140,11 @@ html, body {
flex-direction: column; flex-direction: column;
flex-grow: 2; flex-grow: 2;
position: relative; position: relative;
} }
.routes {
float:right ;
position: bottom;
margin-right: 20%;
}
*/
</style>

43
map.js
View File

@ -8,45 +8,38 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// helper function for displayRoute() // helper function for displayRoute()
async function prepare(){ async function prepare(){
console.log("prepare") console.log("prepare")
var route = getAllCoordinates('coordinates'); var route = getAllRoutes('coordinates');
console.log(route);
return route; return route;
} }
async function displayRoute() {
//color array async function displayLastRoute() {
let color = ["blue","red","green","purple","gray","yellow"]; clearMap()
var i = 0; //color theming
let current_route = await prepare(); let color = ["blue","red","green","purple","cyan","yellow"];
console.log("after prepare"); var i = Math.floor(Math.random() * 5) ;
console.log(current_route); let current = await prepare();
console.log("Current_route"); console.log("Length:")
console.log(current_route); console.log(current.length);
const current_route0 = current_route[0]; var len = current.length - 1;
const current_route1 = current_route[1]; const current_route = current[len];
console.log("Route 0");
// this is test
console.log(current_route0);
console.log("Route 1");
console.log(current_route1);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map); //var marker = L.marker([49.41607523,8.67220049]).addTo(map);
polyline0 = L.polyline(current_route0, {color: color[i]}).addTo(map); polyline = L.polyline(current_route, {color: color[i]}).addTo(map);
polyline1 = L.polyline(current_route1, {color: color[i+1]}).addTo(map);
var currentime = await getCurrentTime(); var currentime = await getCurrentTime();
// does stuff ?? // does stuff ??
var ul = document.getElementById("list"); var ul = document.getElementById("list");
var li = document.createElement("li"); var li = document.createElement("li");
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+"")); li.appendChild(document.createTextNode("Last travelled route on: " + currentime + "" ));
ul.appendChild(li); ul.appendChild(li);
//important for maps //important for maps
map.fitBounds(polyline0.getBounds()); map.fitBounds(polyline.getBounds());
map.fitBounds(polyline0.getBounds()); map.fitBounds(polyline.getBounds());
map.fitBounds(polyline1.getBounds());
map.fitBounds(polyline1.getBounds());
return currentime; return currentime;
} }
async function showBike(){ async function showBike(){
var current_cord = await getCurrentCoordinate() var current_cord = await getCurrentCoordinate()
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);