123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
// engine.js
|
|
|
|
const socket = new WebSocket("wss://trackme.ovh/ws");
|
|
const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
|
|
const CACHE_NAME = "trackme-v1";
|
|
const urlsToCache = [
|
|
"/",
|
|
"/leaflet/leaflet.js",
|
|
"/engine.js",
|
|
"/style.css",
|
|
];
|
|
const blueIconUrl = "marker-icon.png";
|
|
const purpleIconUrl = "marker-icon-alt.png";
|
|
|
|
let follow = true;
|
|
let userdata;
|
|
|
|
function userGPSsuccess(position) {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
trackerdata = [lat,lon];
|
|
}
|
|
|
|
function userGPSerror(err) {
|
|
trackerdata = [49,0];
|
|
}
|
|
|
|
function getPosition(pos) {
|
|
if (navigator.geolocation) {
|
|
return new Promise((resolve, _reject) => {
|
|
navigator.geolocation.getCurrentPosition(userGPSsuccess, userGPSerror);
|
|
resolve("Position fetched");
|
|
});
|
|
}
|
|
}
|
|
|
|
function createLocation(map, point, coords, text, iconUrl) {
|
|
let icon = new L.Icon.Default;
|
|
icon.options.iconUrl = iconUrl;
|
|
|
|
point = L.marker(coords, {
|
|
color: "red",
|
|
fillColor: "#f03",
|
|
fillOpacity: 0.5,
|
|
radius: 50,
|
|
icon: icon
|
|
}).addTo(map).bindPopup(text);
|
|
|
|
point.getPopup().autoPan = false;
|
|
point.openPopup();
|
|
}
|
|
|
|
function createMap(coords) {
|
|
let map = L.map("map", {
|
|
center: coords,
|
|
zoom: 15
|
|
});
|
|
L.tileLayer(`https://tile.openstreetmap.org/{z}/{x}/{y}.png`, {
|
|
maxZoom: 19,
|
|
attribution: `© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> / <a href="https://www.paulbsd.com">PaulBSD</a>`
|
|
}).addTo(map);
|
|
map.zoomControl.setPosition('bottomright');
|
|
|
|
return map;
|
|
}
|
|
|
|
function middle(trackercoords, usercoords) {
|
|
let mid = [0, 0];
|
|
for (let i in mid) {
|
|
mid[i] = Math.min(trackercoords[i], usercoords[i]) + Math.abs(trackercoords[i] - usercoords[i]);
|
|
}
|
|
return mid;
|
|
}
|
|
|
|
function update(map, trackerpoint, trackerdata) {
|
|
const coords = [trackerdata.latitude, trackerdata.longitude];
|
|
const speed = trackerdata.speed/10;
|
|
const section = parseInt(trackerdata.direction/45 + 0.5) % 8;
|
|
const text = `time: ${trackerdata.time}<br/>latitude: ${trackerdata.latitude}<br/>longitude: ${trackerdata.longitude}<br/>height: ${trackerdata.height}<br/>speed: ${speed}<br/>direction: ${arrows[section]} ${trackerdata.direction}°<br/>serial: ${trackerdata.serial}`;
|
|
if (map) {
|
|
if (follow) {
|
|
map.setView(coords);
|
|
map.flyTo(coords);
|
|
}
|
|
} else {
|
|
map = createMap(coords);
|
|
}
|
|
if (trackerpoint) {
|
|
trackerpoint.setLatLng(coords);
|
|
trackerpoint.setPopupContent(text);
|
|
} else {
|
|
createLocation(map, trackerpoint, coords, text, blueIconUrl);
|
|
}
|
|
}
|
|
|
|
function main() {
|
|
let map;
|
|
let trackerpoint;
|
|
let userpoint;
|
|
let pos;
|
|
|
|
let togglefollow = document.querySelector("#togglefollow");
|
|
togglefollow.addEventListener("click", function() {
|
|
follow = !follow;
|
|
if (follow) togglefollow.innerHTML = "Unfollow";
|
|
else togglefollow.innerHTML = "Follow";
|
|
});
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
const trackerdata = JSON.parse(event.data);
|
|
update(map, trackerpoint, trackerdata);
|
|
});
|
|
|
|
socket.addEventListener("open", (event) => {
|
|
socket.send("ping");
|
|
});
|
|
|
|
setInterval(getPosition, 1000, pos);
|
|
setInterval(function () { socket.send("ping") }, 1000);
|
|
}
|
|
|
|
main();
|