|
|
@@ -0,0 +1,50 @@
|
|
|
+"use strict";
|
|
|
+
|
|
|
+let p = undefined;
|
|
|
+window.addEventListener("DOMContentLoaded", () => {
|
|
|
+ p = new Puzzeltocht();
|
|
|
+});
|
|
|
+
|
|
|
+class Puzzeltocht {
|
|
|
+
|
|
|
+ constructor() {
|
|
|
+ if ("geolocation" in navigator) {
|
|
|
+ console.log("Geolocation API available");
|
|
|
+ } else {
|
|
|
+ console.log("Geolocation API not available");
|
|
|
+ document.getElementById("unsupported").style.display = "block";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (window.isSecureContext) {
|
|
|
+ console.log("Secure context available");
|
|
|
+ } else {
|
|
|
+ console.log("Secure context not available");
|
|
|
+ document.getElementById("unsupported").style.display = "block";
|
|
|
+ }
|
|
|
+
|
|
|
+ navigator.geolocation.getCurrentPosition((pos) => Puzzeltocht.updateLocation(pos));
|
|
|
+ navigator.geolocation.watchPosition((pos) => Puzzeltocht.updateLocation(pos));
|
|
|
+
|
|
|
+ console.log("puzzeltocht initialised");
|
|
|
+ }
|
|
|
+
|
|
|
+ static updateLocation(pos) {
|
|
|
+ let l = document.getElementById("location");
|
|
|
+ let lat = pos.coords.latitude;
|
|
|
+ let long = pos.coords.longitude;
|
|
|
+ let ts = new Date();
|
|
|
+ ts.setTime(pos.timestamp);
|
|
|
+ l.innerText = "positie: " + lat + ", " + long + ", " + pos.coords.accuracy + " (updated " + ts.toUTCString() + ")";
|
|
|
+ Puzzeltocht.updateMap(pos);
|
|
|
+ }
|
|
|
+
|
|
|
+ static updateMap(pos) {
|
|
|
+ let img = document.getElementById("map");
|
|
|
+ let lat = pos.coords.latitude;
|
|
|
+ let long = pos.coords.longitude;
|
|
|
+ let url = "https://staticmap.openstreetmap.de/staticmap.php?center=";
|
|
|
+ url = url + lat + "," + long + "&zoom=18&size=256x256&maptype=mapnik";
|
|
|
+ url = url + "&markers=" + lat + "," + long + ",lightblue1";
|
|
|
+ img.src = url;
|
|
|
+ }
|
|
|
+}
|
Harry de Boer