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, 0 insertions, 350 deletions
diff --git a/chaski/ilztal.live/geolocation/index.html b/chaski/ilztal.live/geolocation/index.html
deleted file mode 100644
index 052a9fa..0000000
--- a/chaski/ilztal.live/geolocation/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
-<!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
deleted file mode 100644
index bb62f62..0000000
--- a/chaski/ilztal.live/geolocation/mapview.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!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
deleted file mode 100644
index 58b4c76..0000000
--- a/chaski/ilztal.live/geolocation/view.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!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-08 06:02:17 +0000