-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathMa carte.html
121 lines (104 loc) · 3.17 KB
/
Ma carte.html
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
<!DOCTYPE html>
<html>
<head>
<title>Ma carte</title>
<meta charset="UTF-8"/>
<script src="./wsLib.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style type="text/css">
.leaflet-marker-icon.tidu{
border: solid 2px green;
border-radius: 50px;
}
.leaflet-marker-icon.tidef{
border: solid 2px red;
border-radius: 50px;
}
</style>
<script type="text/javascript">
var ws = new function(){
var that = this;
this.ws = null;
this.openSocket = function(url){
this.ws = new WebSocket(url, "protocolOne");
this.ws.onopen = function(e){
console.log("WebSocket opened, event :");
console.log(e);
that.login()
};
window.onbeforeunload = confirmExit;
function confirmExit()
{
that.close();
return "";
}
this.ws.onmessage = function(e){
var rep = JSON.parse(e.data);
console.log( rep );
if( rep.hasOwnProperty('error') ){
switch(rep.error){
case 0:
alert("Pb de pseudo");
break;
case 1:
alert("erreur 1");
case 2:
default:
alert("Autre erreur");
}
that.close();
return;
}
if( rep.status == "login"){
sendMessage();
}
};
};
this.login = function(){
var data = { username: "test"};
console.log(data);
this.ws.send( JSON.stringify(data) );
};
this.msg = function(data){
console.log(JSON.stringify(data));
this.ws.send( JSON.stringify(data) );
};
this.close = function(){
that.msg({logout:true});
};
}();
function sendMessage(){
var data = { latLng : markerTidef.getLatLng()};
ws.msg(data)
setTimeout(sendMessage,500);
}
</script>
</head>
<body>
<div id="map" class="map" style="height: 500px;">
<script type="text/javascript">
var tidu = L.icon({
iconUrl: 'http://wiki.mdl29.net/mdl29.png',
iconSize: [50,50],
iconAnchor:[25,0],
className: 'tidu'
});
var tidef = L.icon({
iconUrl: 'http://www.sirtin.fr/sirtin/wp-content/uploads/100219.jpg',
iconSize: [50,50],
iconAnchor:[25,0],
className: 'tidef'
});
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([48.40623, -4.46754], 18);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var markerTidu = L.marker([48.40635, -4.46750]).setIcon(tidu).addTo(map).bindPopup('MDL');
var markerTidef = L.marker([48.40640, -4.46705]).setIcon(tidef).addTo(map).bindPopup('Les petits débrouillards');
ws.openSocket("ws://localhost:9876/");
</script>
</body>
</html>