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