62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
/*
|
|
*/
|
|
|
|
let map;
|
|
let point;
|
|
|
|
const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
|
|
|
|
const socket = new WebSocket("wss://geo.paulbsd.com/ws");
|
|
|
|
function create_location(coords,text) {
|
|
point = L.marker(coords, {
|
|
color: 'red',
|
|
fillColor: '#f03',
|
|
fillOpacity: 0.5,
|
|
radius: 50
|
|
}).addTo(map).bindPopup(text);
|
|
point.getPopup().autoPan=false;
|
|
point.openPopup();
|
|
}
|
|
|
|
function create_map(coords) {
|
|
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);
|
|
}
|
|
|
|
function update(data) {
|
|
const coords = [data.latitude,data.longitude];
|
|
const speed = data.speed/10;
|
|
let section = parseInt(data.direction/45 + 0.5);
|
|
section = section % 8;
|
|
console.log(arrows[section]);
|
|
const text = `time: ${data.time}<br/>latitude: ${data.latitude}<br/>longitude: ${data.longitude}<br/>height: ${data.height}<br/>speed: ${speed}<br/>direction: ${arrows[section]} ${data.direction}`;
|
|
if (!map) {
|
|
create_map(coords);
|
|
} else {
|
|
map.setView(coords);
|
|
map.flyTo(coords);
|
|
}
|
|
if (!point) {
|
|
create_location(coords, text);
|
|
} else {
|
|
point.setLatLng(coords);
|
|
point.setPopupContent(text);
|
|
}
|
|
}
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
const data = JSON.parse(event.data);
|
|
update(data);
|
|
});
|
|
|
|
socket.addEventListener("open", (event) => {
|
|
socket.send("ping");
|
|
});
|