forked from voronianski/realtime-geolocation-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
application2.js
120 lines (102 loc) · 2.91 KB
/
application2.js
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
$(function() {
// generate unique user id
var userId = Math.random().toString(16).substring(2,15);
var socket = io.connect('/');
var map;
var info = $('#infobox');
// custom marker's icon styles
var tinyIcon = L.Icon.extend({
options: {
shadowUrl: '../assets/marker-shadow.png',
iconSize: [25, 39],
iconAnchor: [12, 36],
shadowSize: [41, 41],
shadowAnchor: [12, 38],
popupAnchor: [0, -30]
}
});
var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });
var yellowIcon = new tinyIcon({ iconUrl: '../assets/marker-yellow.png' });
var sentData = {}
var clients = {};
var markers = {};
var active = false;
socket.on('load:coords', function(data) {
if (!(data.id in clients)) {
setMarker(data);
}
clients[data.id] = data;
clients[data.id].updated = $.now();
});
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}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);
// map.setView([lat, lng], 6);
map.fitWorld();
userMarker.addTo(map);
userMarker.bindPopup('<p>You are there! Your ID is ' + userId + '</p>').openPopup();
// send coords on when user is active
$(document).on('mousemove', function() {
active = true;
sentData = {
id: userId,
active: active,
coords: [{
lat: lat,
lng: lng,
acr: acr
}]
}
socket.emit('send:coords', sentData);
});
}
$(document).bind('mouseup mouseleave', function() {
active = false;
});
//var emarker;
function setMarker(data) {
for (i = 0; i < data.coords.length; i++) {
var emarker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon }).addTo(map);
emarker.bindPopup('<p>One more external user is here!</p>');
markers[data.id] = emarker;
}
}
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);
}
// delete inactive users
setInterval(function() {
for (ident in clients){
if ($.now() - clients[ident].updated > 5000) {
delete clients[ident];
map.removeLayer(markers[ident]);
}
}
}, 5000);
});