traque/static/utils.js

var evtsource;
var markers = [];
var self_marker;
var name;
var id;
var dbg;

var CircleIcon = L.Icon.extend({
    options: {
        iconSize:     [20, 20],
        iconAnchor:   [10, 10],
        popupAnchor:  [0, 0]
    }
});

var SelfIcon = L.Icon.extend({
    options: {
        iconSize:     [20, 30],
        iconAnchor:   [10, 15],
        popupAnchor:  [0, 0]
    }
});

var icons = [
    new CircleIcon({ iconUrl: '/icons/0.png' }),
    new CircleIcon({ iconUrl: '/icons/1.png' }),
    new CircleIcon({ iconUrl: '/icons/2.png' }),
    new CircleIcon({ iconUrl: '/icons/3.png' }),
    new CircleIcon({ iconUrl: '/icons/4.png' }),
    new CircleIcon({ iconUrl: '/icons/5.png' }),
    new CircleIcon({ iconUrl: '/icons/6.png' }),
    new CircleIcon({ iconUrl: '/icons/7.png' }),
    new CircleIcon({ iconUrl: '/icons/8.png' }),
    new CircleIcon({ iconUrl: '/icons/9.png' }),
    new CircleIcon({ iconUrl: '/icons/10.png' }),
    new CircleIcon({ iconUrl: '/icons/11.png' }),
];

var self_icons = [
    new SelfIcon({ iconUrl: '/icons/self_0.png' }),
    new SelfIcon({ iconUrl: '/icons/self_1.png' }),
    new SelfIcon({ iconUrl: '/icons/self_2.png' }),
    new SelfIcon({ iconUrl: '/icons/self_3.png' }),
    new SelfIcon({ iconUrl: '/icons/self_4.png' }),
    new SelfIcon({ iconUrl: '/icons/self_5.png' }),
    new SelfIcon({ iconUrl: '/icons/self_6.png' }),
    new SelfIcon({ iconUrl: '/icons/self_7.png' }),
    new SelfIcon({ iconUrl: '/icons/self_8.png' }),
    new SelfIcon({ iconUrl: '/icons/self_9.png' }),
    new SelfIcon({ iconUrl: '/icons/self_10.png' }),
    new SelfIcon({ iconUrl: '/icons/self_11.png' }),
];

//////////////////////////////////////////////////////////////////////////////
// INIT MAP

var map_border = [
    [48.838991, 2.389310],
    [48.865471, 2.356133],
    [48.867714, 2.313811],
    [48.841481, 2.307930],
    [48.827912, 2.326842],
    [48.821826, 2.358638],
    [48.838991, 2.389310]
];

var map;

function setup_map(){
  map = L.map('map').setView([48.8448, 2.3550], 13);

  L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.{ext}', {
      maxZoom: 20,
      minZoom: 0,
      attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      ext: 'png'
  }).addTo(map);

  L.polyline(map_border, {color: 'red'}).addTo(map);
}

function setup_map_self(){
  self_marker = L.marker([0,0], {"icon": icons[0] }).addTo(map);
  self_marker.setZIndexOffset(1000);
  self_marker.bindPopup(name);
}

//////////////////////////////////////////////////////////////////////////////
// EVENT LISTENNING

function setup_evtlisten_common(){
  evtSource = new EventSource("/track/"+id+"/events");
  evtSource.addEventListener("coords", (event) => {
    const data = JSON.parse(event.data);
    if(dbg) console.log('coords: ', data);
    var i = 0;
    for (tracked of data) {
      if (i == markers.length) {
        markers.push(L.marker([0,0], {"icon": icons[0] }).addTo(map));
        markers[i].bindPopup("");
        markers[i].setZIndexOffset(0);
      }
      markers[i].setLatLng(tracked.pos);
      markers[i].setPopupContent(tracked.name);
      markers[i].setIcon(icons[tracked.color]);
      ++i;
    }
    for (; i < markers.length; ++i) {
      markers[i].setLatLng([0,0]);
    }
  });
  evtSource.addEventListener("self_info", (event) => {
    const data = JSON.parse(event.data);
    if(dbg) console.log('self: ', data);
    self_marker.setLatLng(data.pos);
    self_marker.setIcon(self_icons[data.color]);
    self_state_hook(data.state);
  });

  //socket.on("popup", function(data){
  //  alert(data.content);
  //});

  //socket.on("remove", function(data){
  //  if(data.id in markers)
  //    markers[data.id].remove();
  //});

  //socket.on("newTracker", function(data){
  //  L.marker(data.position, {"icon": icons[1]}).addTo(map);
  //});
}

//////////////////////////////////////////////////////////////////////////////
// GEOLOCALISATION

function setup_geoLoc(){
  const requestOptions = { method: 'PUT' };

  function geoLoc_success(pos) {
    fetch("/track/"+id+"/pos?lat="+pos.coords.latitude+"&long="+pos.coords.longitude, requestOptions);
  }

  function geoLoc_error(err) {
    console.error(`ERROR(${err.code}): ${err.message}`);
  }

  var options = {
    enableHighAccuracy: false,
    timeout: 5000,
    maximumAge: 0
  };

  navigator.geolocation.watchPosition(geoLoc_success, geoLoc_error, options);
}