Bonjour tout le monde !
Je travail ces derniers temps sur un projet de carte + géolocalisation des membres en js.
Tout fonctionne bien, mais j'aimerai pousser un peu plus loin le concept,
et mettre en place une fonction watchPosition.

Vu que j'utilise librairie la Leaflet (pour openstreetmap), j'ai tenté d'utiliser bêtement le raccourci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
L.control.locate({
    follow: true
}).addTo(map);
 
map.on('startfollowing', function() {
    map.on('dragstart', lc.stopFollowing);
}).on('stopfollowing', function() {
    map.off('dragstart', lc.stopFollowing);
});
Mais sans succès...

Sinon, j'ai trouvé cette éventuelle solution (qui semble plus logique avec mon cas) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
var watchId = navigator.geolocation.watchPosition(
    successfunction, errorfunction, {maximumAge:5000, timeout:2000}
);
 
function cancelButton(){
    clearWatch(watchId);
}
Mais je bloque, j'arrive pas à l'intégrer !

Y-aurait-il une âme charitable pour me filer un coup de main ?!!?
Bonne journée à tous !

Voiçi mon code source :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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);
});