summaryrefslogtreecommitdiff
path: root/chaski/ilztal.live/geolocation
diff options
context:
space:
mode:
Diffstat (limited to 'chaski/ilztal.live/geolocation')
-rw-r--r--chaski/ilztal.live/geolocation/index.html179
-rw-r--r--chaski/ilztal.live/geolocation/mapview.html94
-rw-r--r--chaski/ilztal.live/geolocation/view.html77
3 files changed, 350 insertions, 0 deletions
diff --git a/chaski/ilztal.live/geolocation/index.html b/chaski/ilztal.live/geolocation/index.html
new file mode 100644
index 0000000..052a9fa
--- /dev/null
+++ b/chaski/ilztal.live/geolocation/index.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<html class="no-js" lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>geolocation tracker test</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+ <!-- Place favicon.ico in the root directory -->
+
+ </head>
+ <body>
+ <!--[if lt IE 8]>
+ <p class="browserupgrade">
+ You are using an <strong>outdated</strong> browser. Please
+ <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+ your experience.
+ </p>
+ <![endif]-->
+
+ <button id = "initialise">Start Tracking</button><br/>
+ <p id = "status"></p>
+ <a id = "map-link" target="_blank"></a>
+
+ <p>
+ Latitude: <span id="latitude"></span><br>
+ Longitude: <span id="longitude"></span><br>
+ Altitude: <span id="altitude"></span><br>
+ Accuracy: <span id="accuracy"></span><br>
+ Speed: <span id="speed"></span><br>
+ Angle: <span id="angle"></span><br>
+ </p>
+
+ <input id="note" placeholder="enter note here">
+ <button id="submit-note">Submit</button>
+
+ <p>
+ <button id="download">Download Log</button>
+ <button id="reset">Reset History</button>
+ </p>
+ <p id="error"></p>
+ </body>
+ <script>
+
+ /* TODO:
+ / - how to push things to rocket? (probably just http post for now …)
+ / - how to rate-limit new positions (either count dates, or option in geolocation?)
+ / - how to get closest point on path?
+ */
+
+ let lat = document.getElementById("latitude");
+ let long = document.getElementById("longitude");
+ let speed = document.getElementById("speed");
+ let acc = document.getElementById("accuracy");
+ let angle = document.getElementById("angle");
+ let alt = document.getElementById("altitude");
+
+ let status = document.querySelector('#status');
+ let mapLink = document.querySelector('#map-link');
+
+ function resetDisplay () {
+ lat.innerText = "-";
+ long.innerText = "-";
+ speed.innerText = "-";
+ acc.innerText = "-";
+ angle.innerText = "-";
+ alt.innerText = "-";
+ }
+
+ function init() {
+
+ mapLink.href = '';
+ mapLink.textContent = '';
+
+ resetDisplay();
+
+ if(!navigator.geolocation) {
+ status.textContent = 'Error: Geolocation API is not supported!';
+ } else {
+ status.textContent = 'Initialising …';
+ trackPosition();
+ }
+
+ }
+ var errcount = 1;
+ var geolog = [];
+
+ function trackPosition() {
+ function success(position) {
+ const latitude = position.coords.latitude;
+ const longitude = position.coords.longitude;
+ errcount = 0;
+
+ status.textContent = '';
+ mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+ mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+
+ lat.innerText = position.coords.latitude;
+ long.innerText = position.coords.longitude;
+ alt.innerText = position.coords.altitude;
+ acc.innerText = position.coords.accuracy;
+ speed.innerText = position.coords.speed;
+ angle.innerText = position.coords.heading;
+
+ document.getElementById("error").innerText = JSON.stringify(position.coords);
+
+ let datapoint = {
+ timestamp: new Date().toISOString(),
+ data: {
+ latitude: position.coords.latitude,
+ longitude: position.coords.longitude,
+ altitude: position.coords.altitude,
+ accuracy: position.coords.accuracy,
+ altitudeAccuracy: position.coords.altitudeAccuracy,
+ heading: position.coords.heading,
+ speed: position.coords.speed
+ }
+ };
+
+ geolog.push(datapoint);
+ fetch(
+ "https://ilztal.live/geoloc/push",
+ { method: "POST", body: JSON.stringify(datapoint)}
+ ).then(() => console.log("pushed position"))
+ .catch(e => console.log("some error: ", e))
+ }
+
+ function error() {
+ status.textContent = "("+errcount+") Error: Getting Location failed, retrying …";
+ resetDisplay();
+ errcount += 1;
+ setTimeout(trackPosition, 3000);
+ }
+
+ navigator.geolocation.watchPosition(success, error);
+ }
+
+ function downloadHistory () {
+ let json = JSON.stringify(geolog);
+ let a = document.createElement("a");
+ console.log("attempting download!", geolog);
+ a.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(json));
+ a.setAttribute("download","history.json");
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ }
+
+ document.getElementById("initialise").addEventListener('click', init);
+
+ document.getElementById("submit-note").onclick = (a) => {
+ let input = document.getElementById("note");
+ let text = input.value;
+ console.log("submitting note:", text);
+ geolog.push(text);
+ fetch("https://ilztal.live/geoloc/push",
+ {method:"POST", body: JSON.stringify({
+ //ty: "note",
+ timestamp: new Date().toISOString(),
+ data: text
+ })}
+ ).then(() => input.value = "")
+ .catch(e => {
+ document.getElementById("error").innerText = "error:" + e;
+ console.log("error occurred");
+ });
+ };
+
+ document.getElementById("download").onclick = (a) => downloadHistory();
+
+ document.getElementById("reset").onclick = (a) => geolog = [];
+
+ </script>
+
+
+ </body>
+</html>
diff --git a/chaski/ilztal.live/geolocation/mapview.html b/chaski/ilztal.live/geolocation/mapview.html
new file mode 100644
index 0000000..bb62f62
--- /dev/null
+++ b/chaski/ilztal.live/geolocation/mapview.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html class="no-js" lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Position view</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+ <!-- Place favicon.ico in the root directory -->
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
+ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+ crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
+ integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
+ crossorigin=""></script>
+
+ </head>
+ <body>
+ <!--[if lt IE 8]>
+ <p class="browserupgrade">
+ You are using an <strong>outdated</strong> browser. Please
+ <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+ your experience.
+ </p>
+ <![endif]-->
+
+ <div align="justify">
+ <div id="MapID2" style="height:100vh; margin-left: auto; margin-right:auto; width:80%"></div>
+ </div>
+ <script>
+ var mymap = L.map('MapID2');
+ L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA', {
+ attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+ maxZoom: 18,
+ id: 'mapbox/streets-v11',
+ accessToken: 'pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA'
+ }).addTo(mymap);
+ var marker = L.marker([0,0]).addTo(mymap);
+ marker.bindPopup("Hello Train!");
+
+ mymap.setView([0,0], 16);
+ function updateMap(pos) {
+ if (pos === null) {
+ console.log("no data yet?");
+ return;
+ }
+ mymap.setView(pos);
+ mymap.scrollWheelZoom.disable();
+ marker.setLatLng(pos);
+ }
+ updateMap([48.13716,11.57540]);
+
+ function fetchUpdate () {
+ fetch("https://ilztal.live/geoloc/history")
+ .then((data) => {
+ let text = data.text().then(text => {
+ let hist = JSON.parse(text);
+ console.log(hist)
+
+ let latlngs = hist.filter(e => e.data.latitude !== undefined).map((e) => [e.data.latitude, e.data.longitude]);
+
+ console.log(latlngs);
+ let polyline = L.polyline(latlngs, {color: "red"}).addTo(mymap);
+
+ mymap.fitBounds(polyline.getBounds())
+
+ for (idx in hist) {
+ if (hist[idx].data.latitude === undefined) {
+ console.log(hist[idx].data, idx, 1+parseInt(idx))
+ let nidx = 1+parseInt(idx);
+ if (hist[nidx] !== undefined && hist[nidx].data.latitude !== undefined) {
+ let marker = L.marker([hist[nidx].data.latitude, hist[nidx].data.longitude])
+ .addTo(mymap);
+ marker.bindPopup(hist[idx].data);
+ }
+ }
+ }
+ });
+
+ })
+ .catch((e) => {
+ console.log("some error!", e);
+ setTimeout(fetchUpdate, 3000);
+ })
+ }
+
+ fetchUpdate()
+ </script>
+
+ </body>
+</html>
diff --git a/chaski/ilztal.live/geolocation/view.html b/chaski/ilztal.live/geolocation/view.html
new file mode 100644
index 0000000..58b4c76
--- /dev/null
+++ b/chaski/ilztal.live/geolocation/view.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html class="no-js" lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Position view</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+ <!-- Place favicon.ico in the root directory -->
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
+ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+ crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
+ integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
+ crossorigin=""></script>
+
+ </head>
+ <body>
+ <!--[if lt IE 8]>
+ <p class="browserupgrade">
+ You are using an <strong>outdated</strong> browser. Please
+ <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+ your experience.
+ </p>
+ <![endif]-->
+
+ <div align="justify">
+ <div id="MapID2" style="height:60vh; margin-left: auto; margin-right:auto; width:80%"></div>
+ </div>
+ <script>
+ var mymap = L.map('MapID2');
+ L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA', {
+ attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+ maxZoom: 18,
+ id: 'mapbox/streets-v11',
+ accessToken: 'pk.eyJ1IjoiZmVsaXg4MTgyOTMiLCJhIjoiY2p6a2h6cjdyMGpicjNvbzlzZ3UwNmloMCJ9.a4t1KM9Gid-q29ultM7HgA'
+ }).addTo(mymap);
+ var marker = L.marker([0,0]).addTo(mymap);
+ marker.bindPopup("Hello Train!");
+
+ mymap.setView([0,0], 16);
+ function updateMap(pos) {
+ if (pos === null) {
+ console.log("no data yet?");
+ return;
+ }
+ mymap.setView(pos);
+ mymap.scrollWheelZoom.disable();
+ marker.setLatLng(pos);
+ }
+ updateMap([48.13716,11.57540]);
+
+ function fetchUpdate () {
+ fetch("https://ilztal.live/geoloc/current")
+ .then((data) => {
+ let text = data.text().then(text => {
+ let pos = JSON.parse(text);
+ console.log(pos)
+ updateMap(pos.pos);
+ });
+
+ setTimeout(fetchUpdate, 3000);
+ })
+ .catch((e) => {
+ console.log("some error!", e);
+ setTimeout(fetchUpdate, 3000);
+ })
+ }
+
+ fetchUpdate()
+ </script>
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-07 23:11:06 +0000