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 |
},
|
|
|
11 |
coucheOSM = new L.TileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
|
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}",
|
|
|
14 |
optionsCoucheGoogle),
|
|
|
15 |
optionsCarte = {
|
|
|
16 |
center : new L.LatLng(46, 2),
|
|
|
17 |
zoom : 6,
|
|
|
18 |
layers : [coucheSatellite]
|
|
|
19 |
};
|
|
|
20 |
|
|
|
21 |
var xmlHttpRequest = null,
|
|
|
22 |
nombreCollections = 0,
|
|
|
23 |
collections = new Array(),
|
|
|
24 |
structures = new Array(),
|
|
|
25 |
coucheStructures = new L.FeatureGroup(),
|
|
|
26 |
infoBulle = null,
|
|
|
27 |
chargementEnCours = false;
|
|
|
28 |
|
|
|
29 |
|
|
|
30 |
$(document).ready(function() {
|
|
|
31 |
initialiserWidget();
|
|
|
32 |
});
|
|
|
33 |
|
|
|
34 |
$(window).resize(function() {
|
|
|
35 |
dimensionnerCarte();
|
|
|
36 |
});
|
|
|
37 |
|
|
|
38 |
function initialiserWidget() {
|
|
|
39 |
dimensionnerCarte();
|
|
|
40 |
initialiserCarte();
|
|
|
41 |
initialiserPanneauControle();
|
|
|
42 |
obtenirNombreCollections();
|
|
|
43 |
chargerStructures();
|
|
|
44 |
}
|
|
|
45 |
|
|
|
46 |
function dimensionnerCarte() {
|
|
|
47 |
$("#map").width($(window).width());
|
|
|
48 |
$("#map").height($(window).height());
|
|
|
49 |
}
|
|
|
50 |
|
|
|
51 |
function initialiserCarte() {
|
|
|
52 |
map = L.map('map', optionsCarte);
|
|
|
53 |
coucheSatellite.addTo(map);
|
|
|
54 |
coucheStructures.addTo(map);
|
|
|
55 |
map.on('zoomend', function() {
|
|
|
56 |
// controle sur le niveau de zoom uniquement a la fin du placement des structures sur la carte
|
|
|
57 |
if (chargementEnCours) {
|
|
|
58 |
chargementEnCours = false;
|
|
|
59 |
verifierZoom();
|
|
|
60 |
}
|
|
|
61 |
});
|
|
|
62 |
}
|
|
|
63 |
|
|
|
64 |
function initialiserPanneauControle() {
|
|
|
65 |
var baseMaps = {
|
|
|
66 |
"Plan" : coucheOSM,
|
|
|
67 |
"Satellite" : coucheSatellite
|
|
|
68 |
};
|
|
|
69 |
var overlayMaps = {
|
|
|
70 |
"Structures" : coucheStructures
|
|
|
71 |
};
|
|
|
72 |
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
function obtenirNombreCollections() {
|
|
|
76 |
if (departement != '2A' && departement != '2B' && departement != '*' &&
|
|
|
77 |
(departement.match(/^\d+$/) == null || parseInt(departement) == 0)) {
|
|
|
78 |
alert("La valeur saisie pour le parametre departement (dept) est incorrecte. "+
|
|
|
79 |
"Est attendue uniquement un nombre entier positif non nul");
|
|
|
80 |
} else {
|
|
|
81 |
var url = urlWebService+"CoelRecherche/Nombre/*/*/*/*/*/*/"+departement+"/*/*/";
|
|
|
82 |
xmlHttpRequest = $.getJSON(url).complete(function() {
|
|
|
83 |
recupererValeurNombreCollections();
|
|
|
84 |
});
|
|
|
85 |
}
|
|
|
86 |
}
|
|
|
87 |
|
|
|
88 |
function recupererValeurNombreCollections() {
|
|
|
89 |
var texte = xmlHttpRequest.responseText;
|
|
|
90 |
if (!estStatutRequeteOK()) {
|
|
|
91 |
alert(texte);
|
|
|
92 |
} else {
|
|
|
93 |
nombreCollections = parseInt(eval("(function(){return " + texte + ";})()"));
|
|
|
94 |
}
|
|
|
95 |
}
|
|
|
96 |
|
|
|
97 |
function chargerStructures() {
|
|
|
98 |
if (requeteEnCours()) {
|
|
|
99 |
window.setTimeout('chargerStructures()', 400);
|
|
|
100 |
} else {
|
|
|
101 |
chargementEnCours = true;
|
|
|
102 |
var url = urlWebService+"CoelRecherche/ParDefaut/*/*/*/*/*/*/"+departement+"/*/*/?limit="+nombreCollections;
|
|
|
103 |
xmlHttpRequest = $.getJSON(url).complete(function() {
|
|
|
104 |
traiterLocalisationsJSON();
|
|
|
105 |
});
|
|
|
106 |
}
|
|
|
107 |
}
|
|
|
108 |
|
|
|
109 |
function requeteEnCours() {
|
|
|
110 |
return (xmlHttpRequest != null && xmlHttpRequest.readyState != 4);
|
|
|
111 |
}
|
|
|
112 |
|
|
|
113 |
function estStatutRequeteOK() {
|
|
|
114 |
return ((xmlHttpRequest.status == 200 || xmlHttpRequest.status == 304)
|
|
|
115 |
|| xmlHttpRequest.status == 0);
|
|
|
116 |
}
|
|
|
117 |
|
|
|
118 |
function traiterLocalisationsJSON() {
|
|
|
119 |
var texte = xmlHttpRequest.responseText;
|
|
|
120 |
if (!estStatutRequeteOK()) {
|
|
|
121 |
alert(texte);
|
|
|
122 |
} else {
|
|
|
123 |
collections = eval("(function(){return " + texte + ";})()");
|
|
|
124 |
ordonnerCollectionsParStructures();
|
|
|
125 |
chargerLocalisations();
|
|
|
126 |
}
|
|
|
127 |
}
|
|
|
128 |
|
|
|
129 |
function ordonnerCollectionsParStructures() {
|
|
|
130 |
for (var index = 0; index < collections.length; index ++) {
|
|
|
131 |
var indexStructure = 0;
|
|
|
132 |
while (indexStructure < structures.length && structures[indexStructure].id != collections[index].cs_id_structure) {
|
|
|
133 |
indexStructure ++;
|
|
|
134 |
}
|
|
|
135 |
if (indexStructure == structures.length) {
|
|
|
136 |
var structure = {
|
|
|
137 |
"id" : collections[index].cs_id_structure,
|
|
|
138 |
"nom" : collections[index].cs_nom,
|
|
|
139 |
"ville" : collections[index].cs_ville,
|
|
|
140 |
"code_postal" : collections[index].cs_code_postal,
|
|
|
141 |
"longitude" : collections[index].cs_longitude,
|
|
|
142 |
"latitude" : collections[index].cs_latitude,
|
|
|
143 |
"collections" : new Array()
|
|
|
144 |
};
|
|
|
145 |
structures.push(structure);
|
|
|
146 |
}
|
|
|
147 |
var collection = {
|
|
|
148 |
"id" : collections[index].cc_id_collection,
|
|
|
149 |
"nom" : collections[index].cc_nom
|
|
|
150 |
};
|
|
|
151 |
structures[indexStructure].collections.push(collection);
|
|
|
152 |
}
|
|
|
153 |
}
|
|
|
154 |
|
|
|
155 |
function chargerLocalisations() {
|
|
|
156 |
var nombreStructuresAffichees = 0;
|
|
|
157 |
for (var index = 0; index < structures.length; index ++) {
|
|
|
158 |
if ((structures[index].longitude != null && structures[index].longitude != "")
|
|
|
159 |
&& (structures[index].latitude != null && structures[index].latitude != "")) {
|
|
|
160 |
var existeMarqueur = rechercherExistenceMarqueur(structures[index].longitude, structures[index].latitude);
|
|
|
161 |
if (!existeMarqueur) {
|
|
|
162 |
creerMarqueur(structures[index]);
|
|
|
163 |
nombreStructuresAffichees ++;
|
|
|
164 |
}
|
|
|
165 |
}
|
|
|
166 |
}
|
|
|
167 |
if (nombreStructuresAffichees > 0) {
|
|
|
168 |
map.fitBounds(coucheStructures.getBounds());
|
|
|
169 |
}
|
|
|
170 |
}
|
|
|
171 |
|
|
|
172 |
function rechercherExistenceMarqueur(longitude, latitude) {
|
|
|
173 |
var existeMarqueur = false;
|
|
|
174 |
coucheStructures.eachLayer(function(layer) {
|
|
|
175 |
if (layer.getLatLng().lat == latitude && layer.getLatLng().lng == longitude) {
|
|
|
176 |
existeMarqueur = true;
|
|
|
177 |
}
|
|
|
178 |
});
|
|
|
179 |
return existeMarqueur;
|
|
|
180 |
}
|
|
|
181 |
|
|
|
182 |
function creerMarqueur(structure) {
|
|
|
183 |
var latlng = new L.LatLng(structure.latitude, structure.longitude);
|
|
|
184 |
var marqueur = new L.Marker(latlng, {
|
|
|
185 |
title : structure.nom
|
|
|
186 |
});
|
|
|
187 |
marqueur.on('click', surClickMarqueur);
|
|
|
188 |
coucheStructures.addLayer(marqueur);
|
|
|
189 |
}
|
|
|
190 |
|
|
|
191 |
function surClickMarqueur(event) {
|
|
|
192 |
var latlng = event.target.getLatLng();
|
|
|
193 |
var collections = new Array();
|
|
|
194 |
var structure = null;
|
|
|
195 |
for (var index = 0; index < structures.length; index ++) {
|
|
|
196 |
if (structures[index].latitude == latlng.lat && structures[index].longitude == latlng.lng) {
|
|
|
197 |
collections = collections.concat(structures[index].collections);
|
|
|
198 |
if (structure == null) {
|
|
|
199 |
structure = structures[index];
|
|
|
200 |
}
|
|
|
201 |
}
|
|
|
202 |
}
|
|
|
203 |
afficherCollections(structure, collections);
|
|
|
204 |
}
|
|
|
205 |
|
|
|
206 |
function afficherCollections(structure, collections) {
|
|
|
207 |
masquerInfoBulle();
|
|
|
208 |
infoBulle = new L.Popup({maxWidth : 0.25*$(window).width(), maxHeight : 0.35*$(window).height()});
|
|
|
209 |
var latlng = new L.LatLng(structure.latitude, structure.longitude);
|
|
|
210 |
infoBulle.setLatLng(latlng);
|
|
|
211 |
infoBulle.openOn(map);
|
|
|
212 |
remplirContenuPopup(structure, collections);
|
|
|
213 |
$("a").css("color", "#598000");
|
|
|
214 |
map.setView(latlng, map.getZoom());
|
|
|
215 |
}
|
|
|
216 |
|
|
|
217 |
function masquerInfoBulle() {
|
|
|
218 |
if (infoBulle != null && map.hasLayer(infoBulle)) {
|
|
|
219 |
map.removeLayer(infoBulle);
|
|
|
220 |
}
|
|
|
221 |
infoBulle = null;
|
|
|
222 |
}
|
|
|
223 |
|
|
|
224 |
function remplirContenuPopup(structure, collections) {
|
|
|
225 |
$("#structure").empty();
|
|
|
226 |
var structureAjout = {
|
|
|
227 |
"id" : structure.id,
|
|
|
228 |
"nom" : structure.nom,
|
|
|
229 |
"ville" : structure.ville,
|
|
|
230 |
"code_postal" : structure.code_postal,
|
|
|
231 |
"collections" : collections
|
|
|
232 |
};
|
|
|
233 |
$("#tpl-structure").tmpl(structureAjout).appendTo($("#structure"));
|
|
|
234 |
infoBulle.setContent($("#structure").html());
|
|
|
235 |
}
|
|
|
236 |
|
|
|
237 |
function verifierZoom() {
|
|
|
238 |
if(map.getZoom() > 13) {
|
|
|
239 |
map.setZoom(13);
|
|
|
240 |
}
|
|
|
241 |
}
|