1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
| $(function() {
// generate unique user id
var userId = Math.random().toString(16).substring(2,15);
var socket = io.connect('/');
var map;
var info = $('#infobox');
var doc = $(document);
// custom marker's icon styles
var tinyIcon = L.Icon.extend({
options: {
shadowUrl: '../public/assets/marker-shadow.png',
iconSize: [25, 39],
iconAnchor: [12, 36],
shadowSize: [41, 41],
shadowAnchor: [12, 38],
popupAnchor: [0, -30]
}
});
var redIcon = new tinyIcon({ iconUrl: '../public/assets/marker-red.png' });
var yellowIcon = new tinyIcon({ iconUrl: '../public/assets/marker-yellow.png' });
var sentData = {};
var connects = {};
var markers = {};
var active = false;
socket.on('load:coords', function(data) {
if (!(data.id in connects)) {
setMarker(data);
}
connects[data.id] = data;
connects[data.id].updated = $.now(); // shothand for (new Date).getTime()
});
// check whether browser supports geolocation api
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError, {enableHighAccuracy:true});
} else {
$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
}
function positionSuccess(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var acr = position.coords.accuracy;
// mark user's position
var userMarker = L.marker([lat, lng], {
icon: redIcon
});
// uncomment for static debug
// userMarker = L.marker([51.45, 30.050], { icon: redIcon });
// load leaflet map
map = L.map('map');
// leaflet API key tiler
L.tileLayer('http://{s}.MYMAP/MYMAP/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);
// set map bounds
map.fitWorld();
userMarker.addTo(map);
userMarker.bindPopup('<p>You are there! Your ID is ' + userId + '</p>').openPopup();
var emit = $.now();
// send coords on when user is active
doc.on('mousemove', function() {
active = true;
sentData = {
id: userId,
active: active,
coords: [{
lat: lat,
lng: lng,
acr: acr
}]
};
if ($.now() - emit > 30) {
socket.emit('send:coords', sentData);
emit = $.now();
}
});
}
doc.bind('mouseup mouseleave', function() {
active = false;
});
// showing markers for connections
function setMarker(data) {
for (var i = 0; i < data.coords.length; i++) {
var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon }).addTo(map);
marker.bindPopup('<p>One more external user is here!</p>');
markers[data.id] = marker;
}
}
// handle geolocation api errors
function positionError(error) {
var errors = {
1: 'Authorization fails', // permission denied
2: 'Can\'t detect your location', //position unavailable
3: 'Connection timeout' // timeout
};
showError('Error:' + errors[error.code]);
}
function showError(msg) {
info.addClass('error').text(msg);
doc.click(function() {
info.removeClass('error');
});
}
// delete inactive users every 15 sec
setInterval(function() {
for (var ident in connects){
if ($.now() - connects[ident].updated > 15000) {
delete connects[ident];
map.removeLayer(markers[ident]);
}
}
}, 15000);
}); |
Partager