<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Traque | Client admin</title> <!-- LEAFLET INCLUDE --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <!-- SOCKET.IO INCLUDE --> <script src="/socket.io/socket.io.js"></script> <style type="text/css"> #map { height: 500px; } </style> </head> <body> <div id="map"></div><br/> <input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/> <script type="text/javascript"> var protocol = location.protocol; var server = location.hostname; var port = location.port; var socket = io.connect({rejectUnauthorized: false}, protocol+"://"+server+":"+port); var id = -1; var names = []; var colors = []; var markers = []; var icons = [ L.icon({ iconUrl: 'def.png', iconSize: [10, 10], iconAnchor: [5, 5], popupAnchor: [5, 5], //shadowUrl: 'my-icon-shadow.png', //shadowSize: [68, 95], //shadowAnchor: [22, 94] }), L.icon({ iconUrl: 'track.png', iconSize: [10, 10], iconAnchor: [5, 5], popupAnchor: [5, 5], //shadowUrl: 'my-icon-shadow.png', //shadowSize: [68, 95], //shadowAnchor: [22, 94] }) ]; var self_icons = icons; var icon_invisible = L.icon({ iconUrl: 'invi.png', iconSize: [10, 10], iconAnchor: [5, 5], popupAnchor: [5, 5], //shadowUrl: 'my-icon-shadow.png', //shadowSize: [68, 95], //shadowAnchor: [22, 94] }); ////////////////////////////////////////////////////////////////////////////// // INIT MAP var map = L.map('map').setView([48.8448, 2.3550], 13); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map); ////////////////////////////////////////////////////////////////////////////// // UPDATE MAP socket.on("yourId", function(data){ console.log("yourId", data); id = data.id; if(!(id in colors)) colors[id] = 0; if(id in markers) markers[id].setIcon(self_icons[colors[id]]); socket.emit("admin"); }); socket.on("setName", function(data){ console.log("setName", data); names[data.id] = data.name; if(data.id in markers) markers[data.id].bindPopup(data.name); }); socket.on("changeColor", function(data){ console.log("changeColor", data); if(data.id in colors && colors[data.id] == -1 && data.id in markers) markers[data.id].addTo(map); colors[data.id] = data.color; if(data.id in markers){ if(data.id == id) markers[data.id].setOpacity(0); else if(data.color == -1) markers[data.id].setIcon(icon_invisible); else markers[data.id].setIcon(icons[data.color]); } }); socket.on("moving", function(data){ console.log("moving", data); if(!(data.id in markers)){ if(!(data.id in colors)) colors[data.id] = 0; var icon; if(data.id == id) icon = self_icons[colors[data.id]]; else icon = icons[colors[data.id]]; markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map); if(data.id == id) markers[data.id].setOpacity(0); if(data.id in names) markers[data.id].bindPopup(names[data.id]); } else{ markers[data.id].setLatLng(data.position); } }); ////////////////////////////////////////////////////////////////////////////// // INTERACTION document.querySelector('#sendPopup').addEventListener('click', function(){ const input = document.querySelector('#popup'); socket.emit("popup", {"content": input.value}); }); ////////////////////////////////////////////////////////////////////////////// // GEOLOCALISATION function geoLoc_success(pos) { socket.emit("geoLoc", {"position": [pos.coords.latitude, pos.coords.longitude]}); } function geoLoc_error(err) { console.error(`ERROR(${err.code}): ${err.message}`); } var options = { enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }; id = navigator.geolocation.watchPosition(geoLoc_success, geoLoc_error, options); </script> </body> </html>