micodus_server/html/engine.js

/*
*/

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: '&copy; <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");
});