Subversion Repositories eFlore/Applications.coel

Rev

Rev 1834 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 1834 Rev 1947
1
var map = null,
1
var map = null,
2
optionsCoucheOSM = {
2
optionsCoucheOSM = {
3
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
3
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
4
	+ ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
4
	+ ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
5
	maxZoom: 18
5
	maxZoom: 18
6
},
6
},
7
optionsCoucheGoogle = {
7
optionsCoucheGoogle = {
8
	attribution: 'Map data &copy;'+new Date().getFullYear()+' <a href="http://maps.google.com">Google</a>',
8
	attribution: 'Map data &copy;'+new Date().getFullYear()+' <a href="http://maps.google.com">Google</a>',
9
	maxZoom: 18
9
	maxZoom: 18
10
},
10
},
11
coucheOSM = new L.TileLayer("http://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png",
11
coucheOSM = new L.TileLayer("https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png",
12
		optionsCoucheOSM),
12
		optionsCoucheOSM),
13
coucheSatellite = new L.TileLayer("http://mt1.google.com/vt/lyrs=y@218131653&hl=fr&src=app&x={x}&y={y}&z={z}",
13
coucheSatellite = new L.TileLayer("https://mt1.google.com/vt/lyrs=y@218131653&hl=fr&src=app&x={x}&y={y}&z={z}",
14
	optionsCoucheGoogle),
14
	optionsCoucheGoogle),
15
optionsCarte = {
15
optionsCarte = {
16
	center : new L.LatLng(46, 2),
16
	center : new L.LatLng(46, 2),
17
	zoom : 6,
17
	zoom : 6,
18
	layers : [coucheOSM]
18
	layers : [coucheOSM]
19
};
19
};
20
 
20
 
21
var xmlHttpRequest = null;
21
var xmlHttpRequest = null;
22
	nombreCollections = 0;
22
	nombreCollections = 0;
23
	collections = new Array();
23
	collections = new Array();
24
	structures = new Array();
24
	structures = new Array();
25
	if(clustering) {
25
	if(clustering) {
26
		coucheStructures = new L.MarkerClusterGroup({
26
		coucheStructures = new L.MarkerClusterGroup({
27
			disableClusteringAtZoom : 10
27
			disableClusteringAtZoom : 10
28
		});
28
		});
29
	} else {
29
	} else {
30
		coucheStructures = new L.FeatureGroup();
30
		coucheStructures = new L.FeatureGroup();
31
	}
31
	}
32
	infoBulle = null;
32
	infoBulle = null;
33
	chargementEnCours = false;
33
	chargementEnCours = false;
34
 
34
 
35
 
35
 
36
$(document).ready(function() {
36
$(document).ready(function() {
37
	dimensionnerCarte();
37
	dimensionnerCarte();
38
	initialiserCarte();
38
	initialiserCarte();
39
	initialiserPanneauControle();
39
	initialiserPanneauControle();
40
 
40
 
41
	$.ajax({
41
	$.ajax({
42
		dataType: "json",
42
		dataType: "json",
43
		url: urlWebService + "CoelRecherche/Nombre/*/*/*/*/*/*/*/" + departement + "/*/",
43
		url: urlWebService + "CoelRecherche/Nombre/*/*/*/*/*/*/*/" + departement + "/*/",
44
		data: { formatRetour: "text/plain", pays: pays},
44
		data: { formatRetour: "text/plain", pays: pays},
45
		async: false
45
		async: false
46
	}).complete(function(msg) {
46
	}).complete(function(msg) {
47
		if (! estStatutRequeteOK(msg.status)) {
47
		if (! estStatutRequeteOK(msg.status)) {
48
			alert(msg.responseText);
48
			alert(msg.responseText);
49
			return;
49
			return;
50
		}
50
		}
51
		nombreCollections = parseInt(msg.responseText);
51
		nombreCollections = parseInt(msg.responseText);
52
	});
52
	});
53
	
53
	
54
	chargerStructures();
54
	chargerStructures();
55
});
55
});
56
 
56
 
57
$(window).resize(function() {
57
$(window).resize(function() {
58
	dimensionnerCarte();
58
	dimensionnerCarte();
59
});
59
});
60
 
60
 
61
function dimensionnerCarte() {
61
function dimensionnerCarte() {
62
	$("#map").width($(window).width());
62
	$("#map").width($(window).width());
63
	$("#map").height($(window).height());
63
	$("#map").height($(window).height());
64
}
64
}
65
 
65
 
66
function initialiserCarte() {
66
function initialiserCarte() {
67
	map = L.map('map', optionsCarte);
67
	map = L.map('map', optionsCarte);
68
	coucheOSM.addTo(map);
68
	coucheOSM.addTo(map);
69
	coucheStructures.addTo(map);
69
	coucheStructures.addTo(map);
70
	map.on('zoomend', function() {
70
	map.on('zoomend', function() {
71
		// controle sur le niveau de zoom uniquement a la fin du placement des structures sur la carte 
71
		// controle sur le niveau de zoom uniquement a la fin du placement des structures sur la carte 
72
		if (chargementEnCours) {
72
		if (chargementEnCours) {
73
			chargementEnCours = false;
73
			chargementEnCours = false;
74
			verifierZoom();
74
			verifierZoom();
75
		}
75
		}
76
	});
76
	});
77
}
77
}
78
 
78
 
79
function initialiserPanneauControle() {
79
function initialiserPanneauControle() {
80
	var baseMaps = {
80
	var baseMaps = {
81
		"Plan" : coucheOSM,
81
		"Plan" : coucheOSM,
82
		"Satellite" : coucheSatellite
82
		"Satellite" : coucheSatellite
83
	};
83
	};
84
	var overlayMaps = {
84
	var overlayMaps = {
85
		"Structures" : coucheStructures	
85
		"Structures" : coucheStructures	
86
	};
86
	};
87
	L.control.layers(baseMaps, overlayMaps).addTo(map);
87
	L.control.layers(baseMaps, overlayMaps).addTo(map);
88
}
88
}
89
 
89
 
90
 
90
 
91
function recupererValeurNombreCollections() {
91
function recupererValeurNombreCollections() {
92
}
92
}
93
 
93
 
94
function chargerStructures() {
94
function chargerStructures() {
95
	if (requeteEnCours()) {
95
	if (requeteEnCours()) {
96
		window.setTimeout('chargerStructures()', 400);
96
		window.setTimeout('chargerStructures()', 400);
97
		return;
97
		return;
98
	}
98
	}
99
 
99
 
100
	chargementEnCours = true;
100
	chargementEnCours = true;
101
	$.ajax({
101
	$.ajax({
102
		dataType: "json",
102
		dataType: "json",
103
		url: urlWebService + "CoelRecherche/ParDefaut/*/*/*/*/*/*/*/" + departement + "/*/",
103
		url: urlWebService + "CoelRecherche/ParDefaut/*/*/*/*/*/*/*/" + departement + "/*/",
104
		data: { limit: nombreCollections, pays: pays},
104
		data: { limit: nombreCollections, pays: pays},
105
		async: true
105
		async: true
106
	}).complete(function(msg) {
106
	}).complete(function(msg) {
107
		if (!estStatutRequeteOK(msg.status)) {
107
		if (!estStatutRequeteOK(msg.status)) {
108
			alert(msg.responseText);
108
			alert(msg.responseText);
109
			return;
109
			return;
110
		}
110
		}
111
		collections = eval("(function(){return " + msg.responseText + ";})()");
111
		collections = eval("(function(){return " + msg.responseText + ";})()");
112
		ordonnerCollectionsParStructures();
112
		ordonnerCollectionsParStructures();
113
		chargerLocalisations();
113
		chargerLocalisations();
114
	});
114
	});
115
}
115
}
116
 
116
 
117
function requeteEnCours() {
117
function requeteEnCours() {
118
	return (xmlHttpRequest != null && xmlHttpRequest.readyState != 4);
118
	return (xmlHttpRequest != null && xmlHttpRequest.readyState != 4);
119
}
119
}
120
 
120
 
121
function estStatutRequeteOK(x_status) {
121
function estStatutRequeteOK(x_status) {
122
	return (x_status == 200 || x_status == 304 || x_status == 0);
122
	return (x_status == 200 || x_status == 304 || x_status == 0);
123
}
123
}
124
 
124
 
125
function ordonnerCollectionsParStructures() {
125
function ordonnerCollectionsParStructures() {
126
	for (var index = 0; index < collections.length; index ++) {
126
	for (var index = 0; index < collections.length; index ++) {
127
		var indexStructure = 0;
127
		var indexStructure = 0;
128
		while (indexStructure < structures.length && structures[indexStructure].id != collections[index].cs_id_structure) {
128
		while (indexStructure < structures.length && structures[indexStructure].id != collections[index].cs_id_structure) {
129
			indexStructure ++;
129
			indexStructure ++;
130
		}
130
		}
131
		if (indexStructure == structures.length) {
131
		if (indexStructure == structures.length) {
132
			var structure = {
132
			var structure = {
133
				"id"    : collections[index].cs_id_structure,
133
				"id"    : collections[index].cs_id_structure,
134
				"nom"   : collections[index].cs_nom,
134
				"nom"   : collections[index].cs_nom,
135
				"ville" : collections[index].cs_ville,
135
				"ville" : collections[index].cs_ville,
136
				"code_postal" : collections[index].cs_code_postal,
136
				"code_postal" : collections[index].cs_code_postal,
137
				"longitude"   : collections[index].cs_longitude,
137
				"longitude"   : collections[index].cs_longitude,
138
				"latitude"    : collections[index].cs_latitude,
138
				"latitude"    : collections[index].cs_latitude,
139
				"collections" : new Array()
139
				"collections" : new Array()
140
			};
140
			};
141
			structures.push(structure);
141
			structures.push(structure);
142
		}
142
		}
143
		var collection = {
143
		var collection = {
144
			"id"  : collections[index].cc_id_collection,
144
			"id"  : collections[index].cc_id_collection,
145
			"nom" : collections[index].cc_nom
145
			"nom" : collections[index].cc_nom
146
		};
146
		};
147
		structures[indexStructure].collections.push(collection);
147
		structures[indexStructure].collections.push(collection);
148
	}
148
	}
149
}
149
}
150
 
150
 
151
function chargerLocalisations() {
151
function chargerLocalisations() {
152
	var nombreStructuresAffichees = 0;
152
	var nombreStructuresAffichees = 0;
153
	for (var index = 0; index < structures.length; index ++) {
153
	for (var index = 0; index < structures.length; index ++) {
154
		if ((structures[index].longitude != null && structures[index].longitude != "")
154
		if ((structures[index].longitude != null && structures[index].longitude != "")
155
			&& (structures[index].latitude != null && structures[index].latitude != "")) {
155
			&& (structures[index].latitude != null && structures[index].latitude != "")) {
156
			var existeMarqueur = rechercherExistenceMarqueur(structures[index].longitude, structures[index].latitude);
156
			var existeMarqueur = rechercherExistenceMarqueur(structures[index].longitude, structures[index].latitude);
157
			if (existeMarqueur == null) {
157
			if (existeMarqueur == null) {
158
				creerMarqueur(structures[index]);
158
				creerMarqueur(structures[index]);
159
				nombreStructuresAffichees ++;
159
				nombreStructuresAffichees ++;
160
			} else {
160
			} else {
161
				ajouterStructureAMarqueur(existeMarqueur, structures[index]);
161
				ajouterStructureAMarqueur(existeMarqueur, structures[index]);
162
			}
162
			}
163
		}
163
		}
164
	}
164
	}
165
	if (nombreStructuresAffichees > 0) {
165
	if (nombreStructuresAffichees > 0) {
166
		map.fitBounds(coucheStructures.getBounds());
166
		map.fitBounds(coucheStructures.getBounds());
167
	}
167
	}
168
}
168
}
169
 
169
 
170
function rechercherExistenceMarqueur(longitude, latitude) {
170
function rechercherExistenceMarqueur(longitude, latitude) {
171
	var existeMarqueur = null;
171
	var existeMarqueur = null;
172
	coucheStructures.eachLayer(function(layer) {
172
	coucheStructures.eachLayer(function(layer) {
173
		if (layer.getLatLng().lat == latitude && layer.getLatLng().lng == longitude) {
173
		if (layer.getLatLng().lat == latitude && layer.getLatLng().lng == longitude) {
174
			existeMarqueur = layer;
174
			existeMarqueur = layer;
175
		}
175
		}
176
	});
176
	});
177
	return existeMarqueur;
177
	return existeMarqueur;
178
}
178
}
179
 
179
 
180
function creerMarqueur(structure) {
180
function creerMarqueur(structure) {
181
	var latlng = new L.LatLng(structure.latitude, structure.longitude);
181
	var latlng = new L.LatLng(structure.latitude, structure.longitude);
182
	var marqueur = new L.Marker(latlng, {
182
	var marqueur = new L.Marker(latlng, {
183
		structures : [structure],
183
		structures : [structure],
184
		structuresNom : structure.nom
184
		structuresNom : structure.nom
185
	});
185
	});
186
	marqueur.on('click', surClickMarqueur);
186
	marqueur.on('click', surClickMarqueur);
187
	marqueur.on('mouseover', construireToolTipMarqueur);
187
	marqueur.on('mouseover', construireToolTipMarqueur);
188
	coucheStructures.addLayer(marqueur);
188
	coucheStructures.addLayer(marqueur);
189
}
189
}
190
 
190
 
191
function construireToolTipMarqueur(event) {
191
function construireToolTipMarqueur(event) {
192
	// changer la propriété title du marqueur ne fonctionne pas
192
	// changer la propriété title du marqueur ne fonctionne pas
193
	// en dehors du constructeur (mais cette méthode est-elle pérenne ?)
193
	// en dehors du constructeur (mais cette méthode est-elle pérenne ?)
194
	// le clustering n'affichant pas tous les marqueurs, on doit remplir le tooltip
194
	// le clustering n'affichant pas tous les marqueurs, on doit remplir le tooltip
195
	event.target._icon.title = event.target.options.structuresNom;
195
	event.target._icon.title = event.target.options.structuresNom;
196
}
196
}
197
 
197
 
198
function ajouterStructureAMarqueur(marqueur, structure) {
198
function ajouterStructureAMarqueur(marqueur, structure) {
199
	marqueur.options.structures.push(structure);
199
	marqueur.options.structures.push(structure);
200
	marqueur.options.structuresNom += "\n"+structure.nom;
200
	marqueur.options.structuresNom += "\n"+structure.nom;
201
}
201
}
202
 
202
 
203
function surClickMarqueur(event) {
203
function surClickMarqueur(event) {
204
	var latlng = event.target.getLatLng();
204
	var latlng = event.target.getLatLng();
205
	var structures = event.target.options.structures;
205
	var structures = event.target.options.structures;
206
	afficherCollections(structures, latlng);
206
	afficherCollections(structures, latlng);
207
}
207
}
208
 
208
 
209
function afficherCollections(structures, latlng) {
209
function afficherCollections(structures, latlng) {
210
	masquerInfoBulle();
210
	masquerInfoBulle();
211
	infoBulle = new L.Popup({maxWidth : 0.25*$(window).width(), maxHeight : 0.35*$(window).height()});
211
	infoBulle = new L.Popup({maxWidth : 0.25*$(window).width(), maxHeight : 0.35*$(window).height()});
212
	infoBulle.setLatLng(latlng);
212
	infoBulle.setLatLng(latlng);
213
	infoBulle.openOn(map);
213
	infoBulle.openOn(map);
214
	remplirContenuPopup(structures);
214
	remplirContenuPopup(structures);
215
	$("a").css("color", "#598000");
215
	$("a").css("color", "#598000");
216
	map.setView(latlng, map.getZoom());
216
	map.setView(latlng, map.getZoom());
217
}
217
}
218
 
218
 
219
function masquerInfoBulle() {
219
function masquerInfoBulle() {
220
	if (infoBulle != null && map.hasLayer(infoBulle)) {
220
	if (infoBulle != null && map.hasLayer(infoBulle)) {
221
		map.removeLayer(infoBulle);
221
		map.removeLayer(infoBulle);
222
	}
222
	}
223
	infoBulle = null;
223
	infoBulle = null;
224
}
224
}
225
 
225
 
226
function remplirContenuPopup(structures) {
226
function remplirContenuPopup(structures) {
227
	$("#structure").empty();
227
	$("#structure").empty();
228
	var entetePopup = {
228
	var entetePopup = {
229
		"ville" : structures[0].ville,
229
		"ville" : structures[0].ville,
230
		"code_postal" : structures[0].code_postal
230
		"code_postal" : structures[0].code_postal
231
	}
231
	}
232
	$("#tpl-structure-entete").tmpl(entetePopup).appendTo($("#structure"));
232
	$("#tpl-structure-entete").tmpl(entetePopup).appendTo($("#structure"));
233
	
233
	
234
	$.each(structures, function(index, structure) {
234
	$.each(structures, function(index, structure) {
235
		var structureAjout = {
235
		var structureAjout = {
236
			"id"    : structure.id,
236
			"id"    : structure.id,
237
			"nom"   : structure.nom,
237
			"nom"   : structure.nom,
238
			"ville" : structure.ville,
238
			"ville" : structure.ville,
239
			"code_postal" : structure.code_postal,
239
			"code_postal" : structure.code_postal,
240
			"collections" : structure.collections
240
			"collections" : structure.collections
241
		};
241
		};
242
		$("#tpl-structure").tmpl(structureAjout).appendTo($("#structure"));
242
		$("#tpl-structure").tmpl(structureAjout).appendTo($("#structure"));
243
	});
243
	});
244
	
244
	
245
	infoBulle.setContent($("#structure").html());
245
	infoBulle.setContent($("#structure").html());
246
}
246
}
247
 
247
 
248
function verifierZoom() {
248
function verifierZoom() {
249
	if(map.getZoom() > 13) {
249
	if(map.getZoom() > 13) {
250
		map.setZoom(13);
250
		map.setZoom(13);
251
	}
251
	}
252
}
252
}