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

added showbikeFunction

Browse Source
This commit is contained in:
Jens Wölpert 2022-07-19 16:26:53 +02:00
parent 47c2fab741
commit 36e529bbbd
4 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
execution.js
View File

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

44
functions.js
View File

@ -12,11 +12,11 @@
initIPFS() initIPFS()
async function createDb(db_name){ async function createDb(db_name){
// Create database instance // Create database instance
//const ipfsOptions = { repo: '/orbitdb/createdb1', }
const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', }
const ipfs = await Ipfs.create(ipfsOptions) const ipfs = await Ipfs.create()
const orbitdb = await OrbitDB.createInstance(ipfs) const orbitdb = await OrbitDB.createInstance(ipfs)
// Create IPFS instance // Create IPFS instance
const db = await orbitdb.keyvalue(db_name) const db = await orbitdb.keyvalue(db_name)
@ -24,7 +24,10 @@ initIPFS()
console.log(address) console.log(address)
console.log(db.address.toString()) console.log(db.address.toString())
await db.put('2022-07-01T10:49:07', '49.41185089/8.67646861') 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:12', '49.41166303/8.67652893')
await db.put('2022-07-01T10:49:20','49.41123636/8.67652849')
await db.put(' 2022-07-01T10:49:25','49.41084041/8.67651128')
await db.put('2022-07-01T10:49:31','49.41049801/8.67656948')
let csv = "./new.csv" let csv = "./new.csv"
const value = db.all const value = db.all
//console.log(value) //console.log(value)
@ -35,8 +38,7 @@ initIPFS()
} }
async function loadRoute(db_name){ async function loadRoute(db_name){
const ipfsOptions = { repo: '/orbitdb/los', } const ipfs = await Ipfs.create()
const ipfs = await Ipfs.create(ipfsOptions)
const orbitdb = await OrbitDB.createInstance(ipfs) const orbitdb = await OrbitDB.createInstance(ipfs)
const db = await orbitdb.keyvalue(db_name) const db = await orbitdb.keyvalue(db_name)
@ -54,13 +56,20 @@ async function connectDB(dbname){
const route2 = db_route2.all const route2 = db_route2.all
console.log(route2); console.log(route2);
} }
async function getActualCoordinates(){ async function getCurrentCoordinate(){
var db_conn = await createDb('coordinates')
const currentCoordinate = db_conn.all
console.log(currentCoordinate)
var latest_coord_string = (currentCoordinate[Object.keys(currentCoordinate)[Object.keys(currentCoordinate).length - 1]])
var latest_coordinate_str = latest_coord_string.split("/")
latest_coordinate_str[0] = parseFloat(latest_coordinate_str[0])
latest_coordinate_str[1] = parseFloat(latest_coordinate_str[1])
console.log(latest_coordinate_str)
return latest_coordinate_str;
} }
async function getAllCoordinates(dbname){
// creater db with name db2 async function getAllCoordinates(dbname){
var db2 = await createDb(dbname) var db2 = await createDb(dbname)
const all_coordinates = db2.all const all_coordinates = db2.all
// coordinates in this schema 49.123/8.2311 // coordinates in this schema 49.123/8.2311
@ -80,9 +89,18 @@ for (var i = 0; i < comma_string.length; i++) {
newArray.push([comma_string[i], comma_string[increment]]) newArray.push([comma_string[i], comma_string[increment]])
increment = increment+1 increment = increment+1
i = i+1 i = i+1
} }
console.log(newArray); (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(newArray)
return newArray; return newArray;
} }

20
index.html
View File

@ -8,11 +8,13 @@
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script> crossorigin=""></script>
<script src="jquery-csv.js"> </script> <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="jquery-csv.js"> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Track your bike</title> <title>Track your bike</title>
</head> </head>
<body> <body>
<button onclick="showBike()"> Locate your Bike!</button>
<ul> <ul>
<li> <li>
<div class="wrapper"> <div class="wrapper">
@ -99,13 +101,21 @@
<script type="text/javascript" src="map.js"></script> <script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="execution.js"></script> <script type="text/javascript" src="execution.js"></script>
<script type="file" src="new.csv"></script>
<script> <script>
var csv = './new.csv' //v//ar csv = './new.csv'
var data = $.csv.toObjects(csv);
console.log(data) // var data = $.csv.toObjects(csv);
//console.log(data)
//const res = d3.csvParse(csv);
//console.log(res);
</script>
</script> </script>
<style> #map { height: 1000px; width: 1000px; }</style> <style> #map { height: 600px; width: 600px; margin: auto }</style>
<style> <style>
/* /*
* { * {

37
map.js
View File

@ -1,19 +1,32 @@
var map = L.map('map').setView([49.416075235, 8.6722049], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var map = L.map('map').setView([49.41607523, 8.672200499], 19);
zoom: 44, L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 44,
attribution: '© OpenStreetMap' attribution: '© OpenStreetMap'
}).addTo(map);
}).addTo(map) // helper function for displayRoute()
async function prepare(){
var allcoordinates = getAllCoordinates('coordinates');
//L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); return allcoordinates;
//var marker = L.marker([49.41607523,8.67220049]).addTo(map); }
//var polyline = L.polyline(newArray, {color: 'red'}).addTo(map);
//map.fitBounds(polyline.getBounds());
async function displayRoute() {
var allcoordinates = await prepare();
console.log(allcoordinates);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
var polyline = L.polyline(allcoordinates, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds());
}
async function showBike(){
var current_cord = await getCurrentCoordinate()
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker(current_cord).addTo(map)
.bindPopup(' Your BIKE!')
.openPopup();
}