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)
return lasttime;
}
var buffer_for_i = 0;
async function getAllCoordinates(){
var db2 = await createDb()
const current_route = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(current_route)
// 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, ...
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 = []
// use for loop for iterating over string and put it in the right order
//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;
var db2 = await createDb()
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
}
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);
// 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);
})
newArray = newArray.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")
console.log(newArray)
//console.log(newArray)
return newArray;
}
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 getAllRoutes(){
var buffer_for_i = 0;
var db2 = await createDb()
const current_route = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(current_route)
// 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, ...
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 = []
// use for loop for iterating over string and put it in the right order
//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(){
var currentime = await getCurrentTime()
@ -191,4 +229,88 @@ async function createlistitem() {
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+""));
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>
<body>
<button onclick="showBike()"> Locate your Bike!</button>
<button onclick="displayRoute()"> Show last travelled route</button>
<div>
<button onclick="showBike()"> Locate your Bike!</button>
<button onclick="displayLastRoute()"> Show last travelled route</button>
</div>
<!-- <button onclick="createlistitem()"> create route</button> -->
<ul id="list">
@ -34,7 +36,8 @@
</div>
</li>
</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>
@ -58,20 +61,25 @@
<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;
}
html, body {
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
align-items:flex-start;
font-family: 'Roboto', sans-serif;
background: #d4d1d1;
background: #bb753b;
overflow: hidden;
}
@ -132,4 +140,11 @@ html, body {
flex-direction: column;
flex-grow: 2;
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()
async function prepare(){
console.log("prepare")
var route = getAllCoordinates('coordinates');
console.log(route);
var route = getAllRoutes('coordinates');
return route;
}
async function displayRoute() {
//color array
let color = ["blue","red","green","purple","gray","yellow"];
var i = 0;
let current_route = await prepare();
console.log("after prepare");
console.log(current_route);
console.log("Current_route");
console.log(current_route);
const current_route0 = current_route[0];
const current_route1 = current_route[1];
console.log("Route 0");
// this is test
console.log(current_route0);
console.log("Route 1");
console.log(current_route1);
async function displayLastRoute() {
clearMap()
//color theming
let color = ["blue","red","green","purple","cyan","yellow"];
var i = Math.floor(Math.random() * 5) ;
let current = await prepare();
console.log("Length:")
console.log(current.length);
var len = current.length - 1;
const current_route = current[len];
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
polyline0 = L.polyline(current_route0, {color: color[i]}).addTo(map);
polyline1 = L.polyline(current_route1, {color: color[i+1]}).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("Last travelled route on: " +currentime+""));
li.appendChild(document.createTextNode("Last travelled route on: " + currentime + "" ));
ul.appendChild(li);
//important for maps
map.fitBounds(polyline0.getBounds());
map.fitBounds(polyline0.getBounds());
map.fitBounds(polyline1.getBounds());
map.fitBounds(polyline1.getBounds());
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds());
return currentime;
}
async function showBike(){
var current_cord = await getCurrentCoordinate()
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);