WebSVN – eFlore/Applications.moissonnage – Diff – /trunk/widget/modules/carto/squelettes/scripts/carto.js

-// Javascript Document
-// ===================================================================================
-//  FONCTIONS ADDITIONNELLES POUR GERER LES URLS ET L'OUVERTRURE DE NOUVELLE FENETRE
-function convertirEnParametresUrl(objet) {
-	var parametresUrl = '';
-	for (attribut in objet) {
-		if (typeof(objet[attribut]) == 'function' || typeof(objet[attribut]) == 'undefined' ||
-			objet[attribut] == null || objet[attribut] == '*' || objet[attribut] == 0)
-			continue;
-		parametresUrl += (parametresUrl == '' ? '' : '&') + attribut + "=" + objet[attribut];
-	}
-	return parametresUrl;
-};
-function recupererParametreDansUrl(nomParametre, chaineRecherche) {
-	var split = chaineRecherche.split('?');
-	chaineRecherche = split[split.length-1];
-	var valeurParametre = null;
-	var listeParametres = chaineRecherche.split("&");
-	for (var index = 0; index < listeParametres.length; index ++) {
-		var split = listeParametres[index].split("=");
-		if (split[0] == nomParametre) {
-			valeurParametre = split[1];
-			break;
-		}
-	}
-	return valeurParametre;
-};
-function estValeurDansTableau(tableau, valeur) {
-	var index;
-	for (index = 0; index < tableau.length && tableau[index] != valeur; index ++);
-	return (tableau.length > 0 && index != tableau.length);
-}
-function ouvrirNouvelleFenetre(element, event) {
-	window.open(element.href);
-	return arreter(event);
-}
-function arreter(event) {
-	if (event.stopPropagation) {
-		event.stopPropagation();
-	} else if (window.event) {
-		window.event.cancelBubble = true;
-	}
-	if (event.preventDefault) {
-		event.preventDefault();
-	}
-	event.returnValue = false;
-	return false;
-}
-// =============================================================
 var map = null,
 optionsCoucheOSM = {
 	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
 	+ ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
 	maxZoom: 18
 },
 optionsCoucheGoogle = {
 	attribution: 'Map data &copy;'+new Date().getFullYear()+' <a href="http://maps.google.com">Google</a>',
 	maxZoom: 18
 },
-coucheOSM = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+coucheOSM = new L.TileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
 	optionsCoucheOSM),
-couchePlanGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
+coucheRelief = new L.TileLayer("http://c.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png",
-	optionsCoucheGoogle),
+	optionsCoucheOSM),
-coucheSatelliteGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
+coucheSatellite = new L.TileLayer("http://mt1.google.com/vt/lyrs=y@218131653&hl=fr&src=app&x={x}&y={y}&z={z}",
 	optionsCoucheGoogle),
 optionsCarte = {
 	center : new L.LatLng(46, 2),
 	zoom : 6,
 	minZoom : 3,
 	maxBounds : [[-85.051129, -180], [85.051129, 180]],
 	layers : [coucheOSM]
 },
 zoom = 6,
 legende = null,
 coucheDepartement = null,
 infoBulle = null;
-var coucheSites = new L.FeatureGroup(),
-points = new Array(),
-coucheSites = new L.FeatureGroup(),
+var coucheSites = null,
-sources = new Object(),
-formeDonnees = '',
+sources = new Object(),
-popupMaille = null;
+typeSite = 'maille',
 overlays = [];
 var requeteChargementPoints = null,
-	chargementMaillesEnCours = false,
-doitRafraichirCarte = true,
-chargementCommunesEnCours = false,
 timer = null,
+ancienneRequete = null,
+deplacement = true,
 url = '';
 $(document).ready(function() {
 	initialiserWidget();
 });
+$(window).resize(function() {
+	dimensionnerCarte();
+});
 function initialiserWidget() {
 	initialiserCarte();
-	dimensionnerOverlay();
+	chargerLimitesCommunales();
 	initialiserPanneauControle();
 	initialiserSources();
 	initialiserListeners();
-	chargerLimitesCommunales();
-	chargerMaillesVides();
+	chargerLocalisations();
-	programmerRafraichissementCarte();
-}
-$(window).resize(function() {
-	dimensionnerCarte();
-	if (infoBulle != null) {
-		redimensionnerPopup();
-	}
-});
-function dimensionnerOverlay() {
-	var taille = '1.6';
-	var tailleMaxIcones = 20;
-	var padding_icones = 8;
-	$("#zone-titre h1").css('font-size', (taille)+'em');
-	$("#zone-titre").css('padding', padding_icones+"px "+padding_icones+"px "+Math.round(padding_icones/4)+"px");
-	$('#zone-titre').height(tailleMaxIcones*2);
-	var left = ($(window).width()-$('#zone-titre').width())/2;
-	$('#zone-titre').css('left',left);
-}
-function dimensionnerCarte() {
-	$('#map').height($(window).height());
-	$('#map').width($(window).width());
+}
 function initialiserCarte() {
 	dimensionnerCarte();
 	map = L.map('map', optionsCarte);
+	coucheSatellite.addTo(map);
-	coucheSites.addTo(map);
+	coucheRelief.addTo(map);
 	coucheOSM.addTo(map);
-	couchePlanGoogle.addTo(map);
-	coucheSatelliteGoogle.addTo(map);
 	var echelle = new L.Control.Scale({
-		maxWidth : 32,
+		maxWidth : 50,
 		metric : true,
 		imperial : false,
 		updateWhenIdle : true
 	});
 	map.addControl(echelle);
 	zoom = map.getZoom();
+}
+function dimensionnerCarte() {
+	$('#map').height($(window).height());
+	$('#map').width($(window).width());
+}
 function initialiserListeners() {
-	map.on('moveend', surChangementVueSurCarte);
+	map.on('moveend', surChangementVueCarte);
-	map.on('zoomend', surChangementVueSurCarte);
+	map.on('zoomend', surChangementVueCarte);
 	map.on('popupclose', function(e) {
 		masquerInfoBulle();
 		programmerRafraichissementCarte();
 	});
+}
 function initialiserPanneauControle() {
 	var baseMaps = {
-		"OpenStreetMap" : coucheOSM,
+		"Satellite" : coucheSatellite,
-		"Plan" : couchePlanGoogle,
+		"Relief" : coucheRelief,
-		"Satellite" : coucheSatelliteGoogle
+		"Plan" : coucheOSM
 	};
 	var overlayMaps = {};
 	for (var index = 0; index < listeSources.length; index ++) {
 		sources[listeSources[index]] = estValeurDansTableau(source, listeSources[index]);
 		overlayMaps[listeSources[index]] = new L.LayerGroup();
+	}
 	L.control.layers(baseMaps, overlayMaps).addTo(map);
 	coucheOSM.bringToFront();
-	couchePlanGoogle.bringToBack();
+	map.removeLayer(coucheRelief);
-	coucheSatelliteGoogle.bringToBack();
+	map.removeLayer(coucheOSM);
 	// garder par defaut la couche plan google comme selectionnee dans le panel
 	var selecteursFonds = $('.leaflet-control-layers-base .leaflet-control-layers-selector');
 	selecteursFonds[0].checked = true;
 	selecteursFonds[1].checked = false;
 	selecteursFonds[2].checked = false;
+}
 function chargerLimitesCommunales() {
 	coucheDepartement = new L.KML(null, {async : true}).addTo(map);
 	if (urlsLimitesCommunales != null) {
 		coucheDepartement.addKMLFiles(urlsLimitesCommunales);
+	}
+}
 function initialiserSources() {
 	overlays = $('.leaflet-control-layers-overlays .leaflet-control-layers-selector');
 	$.each(overlays, function (index, input) {
 		input.value = listeSources[index];
 		input.id = 'overlay' + (index+1);
 		var lien = '<a href="' + liensVersSources[index] + '" target="_blank">' + nomListeSources[index] + '</a>';
 		$('#overlay' + (index+1) + ' ~ span').html(lien);
 		input.checked = sources[listeSources[index]];
 		input.onclick = function(event) {
 			changerSource(event.target.value);
+		}
 	});
+}
-function determinerSourcesSelectionnees() {
+function changerSource(projetClique) {
-	var sourcesSelectionnees = new Array();
+	var indexProjetClique;
-	for (source in sources) {
+	for (var index = 0; index < overlays.length; index ++) {
-		if (sources[source] == true) {
+		if (overlays[index].value == projetClique) {
-			sourcesSelectionnees.push(source);
+			indexProjetClique = index;
+		}
+	}
+	masquerInfoBulle();
+	sources[projetClique] = overlays[indexProjetClique].checked;
+	if (sources[projetClique] == true) {
+		programmerRafraichissementCarte(projetClique);
+	} else {
+		if (requeteEnCours()) {
+			stopperRequeteAjax();
-	}
+		}
+		supprimerFeaturesSource(projetClique);
 	return sourcesSelectionnees;
 }
+function supprimerFeaturesSource(source) {
-function surChangementVueSurCarte() {
+	if (coucheSites != null) {
+		coucheSites.eachLayer(function(layer) {
-	if (doitRafraichirCarte == false) {
+			if (layer.typeSite == 'maille') {
+				retirerStationsEtObservations(layer, source);
+			} else {
+				layer.supprimerSource(source, coucheSites);
+				if (layer._map == 'null') {
+					couheSites.removeLayer(layer);
+				}
+			}
+		});
+		if (typeSite == 'maille') {
-		doitRafraichirCarte = true;
+			var nombreMailles = calculerNombreMaillesVisibles();
-	} else {
+			if (nombreMailles == 0) {
-		supprimerTousLayers();
+				coucheSites.clearLayers();
+				masquerLegende();
+				typeSite = 'point';
 		zoom = map.getZoom();
 		chargerMaillesVides();
+	}
+}
-function chargerMaillesVides() {
+function retirerStationsEtObservations(maille, sourceRetrait) {
+	var sources = maille.properties.source;
+	var nombreStations = 0;
+	for (var index = 0; index < sources.length; index ++) {
-	chargementMaillesEnCours = true;
+		var source = sources[index];
-	if (timer != null) {
+		if (source == sourceRetrait) {
+			delete maille.properties.stations[source];
+			delete maille.properties.observations[source];
+		} else if (typeof(maille.properties.stations[source]) != 'undefined') {
-        window.clearTimeout(timer);
+			nombreStations += parseInt(maille.properties.stations[source]);
+		}
-    }
+	}
+	if (nombreStations == 0) {
+		coucheSites.removeLayer(maille);
+	} else {
-	if (requeteChargementPoints != null) {
+		colorerMaille(maille)
-		stopperRequeteAjax();
+		genererInfobulle(maille);
-	}
+	}
+}
-	timer = window.setTimeout(function() {
-		var coordonneesBordure = calculerCoordonneesBordure();
+function calculerNombreMaillesVisibles() {
-		var parametres = {
+	var nombreMailles = 0;
-				"source" : "floradata",
+	coucheSites.eachLayer(function(layer) {
-				"bbox" : coordonneesBordure,
+		if($(layer._path).attr('fill-opacity') != '0') {
-				"zoom" : map.getZoom()
+			nombreMailles ++;
+		}
+	});
+	return nombreMailles;
+}
+function estValeurDansTableau(tableau, valeur) {
-			};
+	var index;
-			url = urlBase + "mailles?" + convertirEnParametresUrl(parametres);
+	for (index = 0; index < tableau.length && tableau[index] != valeur; index ++);
+	return (tableau.length > 0 && index != tableau.length);
+}
-			fonctionCallback = traiterDonneesStations;
+//************************************
+// requetes stations
-			executerAJAX();
+function surChangementVueCarte() {
-	}, 400);
+	programmerRafraichissementCarte();
+}
 function programmerRafraichissementCarte(source) {
+	$('#tooltip').css('display', 'none');
 	source = (source == null || source == 'null') ? null : source;
-	if (!chargementMaillesEnCours) {
-		if (timer != null) {
+	if (timer != null) {
-			window.clearTimeout(timer);
+		window.clearTimeout(timer);
-		}
+	}
-		if (requeteChargementPoints != null) {
+	if (requeteChargementPoints != null) {
-			if (source == null) {
-				stopperRequeteAjax();
+		stopperRequeteAjax();
-			}
+	}
+	var nombreSourcesVisibles = 0;
+	for (var index = 0; index < overlays.length; index ++) {
+		if (overlays[index].checked) {
+			nombreSourcesVisibles ++;
+		}
+	}
+	if (source == null) {
-		timer = window.setTimeout("rafraichirDonnnees('"+source+"')", 250);
+		timer = window.setTimeout("chargerLocalisations()", 100);
-    } else {
+	} else {
-    	window.setTimeout("programmerRafraichissementCarte('"+source+"')", 400);
+		timer = window.setTimeout("chargerSource('"+source+"')", 100);
-    }
+	}
+}
 function stopperRequeteAjax() {
 	requeteChargementPoints.abort();
 	requeteChargementPoints = null;
+}
-function rafraichirDonnnees(source) {
-	source = (source == null || source == 'null') ? null : source;
-	if (coucheDepartement == null || coucheDepartement.getStatus() == KML_READY) {
-		if (source != null) {
-			chargerLocalisations(source);
-		} else {
-			supprimerLocalisations();
+function chargerLocalisations() {
-			for (source in sources) {
-				if (sources[source] == true) {
+	if (requeteEnCours()) {
-					chargerLocalisations(source);
-				}
-			}
-		}
-	} else {
-		window.setTimeout("rafraichirDonnnees('"+source+"')", 800);
+		requeteChargementPoints.abort();
+	}
+	afficherMessageChargement('stations');
+	if (!(ancienneRequete != null && ancienneRequete[1] == map.getZoom()
+		&& map.getBounds().intersects(ancienneRequete[0]))) {
+		supprimerFeatures();
+		deplacement = false;
+	}
+	var bboxRequete = calculerBboxRequete();
+	var parametres = {
+		"bbox" : bboxRequete,
+		"zoom" : map.getZoom(),
+		"source" : recupererSourcesActivees(),
+		"num_taxon" : numTaxon,
+		"nn" : nn,
+		"referentiel" : referentiel,
+		"dept" : dept,
+		"auteur" : auteur,
+		"date_debut" : dateDebut,
+		"date_fin" : dateFin,
+		"nb_jours" : nbJours
+	};
+	if (deplacement == true) {
+		parametres.format = typeSite;
+	}
+	ancienneRequete = [map.getBounds(), map.getZoom()];
+	url = urlBase + "stations?" + convertirEnParametresUrl(parametres);
+	fonctionCallback = traiterDonneesStations;
 	executerAJAX();
 }
+function supprimerFeatures() {
-function supprimerTousLayers() {
+	if (coucheSites != null) {
-	coucheSites.clearLayers();
+		coucheSites.clearLayers();
-	points = [];
+		coucheSites = null;
-	formeDonnees = '';
+	}
 }
-function supprimerLocalisations(source) {
+function recupererSourcesActivees(sourceAIgnorer) {
-	source = (typeof(source) == 'undefined') ? null : source;
+	sourceAIgnorer = typeof(sourceAIgnorer) == 'undefined' ? '' : sourceAIgnorer;
-	if (source != null) {
-		var sourceUrl = recupererParametreDansUrl('source', url);
-		if (requeteChargementPoints != null && sourceUrl == source && source != null) {
-			stopperRequeteAjax();
-		}
-		coucheSites.eachLayer(function(layer) {
-			supprimerLayer(layer, source);
-		});
-		if (source != null) {
+	var sourcesActivees = [];
-			supprimerPointsListe(source);
-		}
-		var sourcesSelectionnees = determinerSourcesSelectionnees();
+	for (var index = 0; index < overlays.length; index ++) {
-		if (sourcesSelectionnees.length == 1 && determinerNombreMarqueurs(sourcesSelectionnees[0]) > 0) {
-			transformerMaillesEnPoints(sourcesSelectionnees[0]);
 		if (overlays[index].checked == true && overlays[index].value != sourceAIgnorer) {
+			sourcesActivees.push(overlays[index].value);
 		var sontPointsAffiches = (points.length>0 && determinerNombreMailles(false)==0);
-		formeDonnees = sontPointsAffiches ? 'point' : 'maille';
+	}
+	return sourcesActivees.join(',');
+}
+function chargerSource(sourceAjout) {
+	if (requeteEnCours()) {
+		requeteChargementPoints.abort();
+	}
+	afficherMessageChargement('stations');
+	var bboxRequete = determinerCoordonneesBordure();
+	var parametres = {
+		"bbox" : bboxRequete,
+		"zoom" : map.getZoom(),
+		"format" : typeSite,
+		"source" : sourceAjout,
+		"num_taxon" : numTaxon,
+		"nn" : nn,
+		"referentiel" : referentiel,
+		"dept" : dept,
+		"auteur" : auteur,
+		"date_debut" : dateDebut,
+		"date_fin" : dateFin,
+		"nb_jours" : nbJours
-	}
+	};
+	ancienneRequete = [map.getBounds(), map.getZoom()];
+	url = urlBase + "stations?" + convertirEnParametresUrl(parametres);
+	fonctionCallback = traiterRetourChargementSource;
+	executerAJAX();
+}
+function calculerBboxRequete() {
-}
+	var bordure = map.getBounds();
+	var bboxRequete = "";
+	if (ancienneRequete != null && ancienneRequete[1] == map.getZoom()
-function estLayerUtilisePourSource(layer, source) {
+		&& bordure.intersects(ancienneRequete[0])) {
+		bboxRequete = calculerIntersectionRectangle(ancienneRequete[0], bordure);
-	return (
+	} else {
-		(layer.typeSite == 'MAILLE' && typeof(layer.nombrePoints[source]) != 'undefined') ||
+		bboxRequete = determinerCoordonneesBordure();
+	}
+	return bboxRequete;
+}
+function calculerIntersectionRectangle(rectangle1, rectangle2) {
-		(layer.typeSite != 'MAILLE' && layer.source == source)
+	var bbox1 = [rectangle2.getSouthWest().lng.toFixed(6), rectangle2.getSouthWest().lat.toFixed(6),
+	    rectangle2.getNorthEast().lng.toFixed(6), rectangle2.getNorthEast().lat.toFixed(6)];
+	var bbox2 = [rectangle2.getSouthWest().lng.toFixed(6), rectangle2.getSouthWest().lat.toFixed(6),
-	);
+	    rectangle2.getNorthEast().lng.toFixed(6), rectangle2.getNorthEast().lat.toFixed(6)];
+	if (rectangle2.getSouthWest().lng >= rectangle1.getSouthWest().lng
+	 	&& rectangle2.getSouthWest().lng <= rectangle1.getNorthEast().lng) {
+		bbox2[0] = bbox1[2] = rectangle1.getNorthEast().lng.toFixed(6);
+		if (rectangle2.getSouthWest().lat >= rectangle1.getSouthWest().lat
+			&& rectangle2.getSouthWest().lat <= rectangle1.getNorthEast().lat) {
+			bbox1[1] = rectangle1.getNorthEast().lat.toFixed(6);
+		} else {
+			bbox1[3] = rectangle1.getSouthWest().lat.toFixed(6);
-}
+		}
 	} else {
-function supprimerLayer(layer, source) {
+		bbox2[0] = bbox1[2] = rectangle1.getSouthWest().lng.toFixed(6);
-	if (estLayerUtilisePourSource(layer, source)) {
+		if (rectangle2.getSouthWest().lat >= rectangle1.getSouthWest().lat
-		if (layer.typeSite == 'MAILLE') {
+			&& rectangle2.getSouthWest().lat <= rectangle1.getNorthEast().lat) {
+			bbox2[1] = rectangle1.getNorthEast().lat.toFixed(6);
-			supprimerSourceDansMaille(layer, source);
+		} else {
-		} else {
-			coucheSites.removeLayer(layer);
+			bbox2[3] = rectangle1.getSouthWest().lat.toFixed(6);
 		}
+	}
-	}
+	return bbox1.join(',')+'|'+bbox2.join(',');
+}
+function determinerCoordonneesBordure() {
-}
+	var ouest = map.getBounds().getSouthWest().lng.toFixed(6),
+		sud = Math.max(map.getBounds().getSouthWest().lat, -85.051129).toFixed(6),
+		est = map.getBounds().getNorthEast().lng.toFixed(6),
+		nord = Math.min(map.getBounds().getNorthEast().lat, 85.051129).toFixed(6);
-function changerSource(projetClique) {
+	// appliquer les limites possibles de la projection actuellement utilisee aux coordonnees
-	var indexProjetClique;
+	// longitudes ouest et est de la bbox (permettra d'eviter de renvoyer des messages d'erreur)
-	for (var index = 0; index < overlays.length; index ++) {
-		if (overlays[index].value == projetClique) {
+	if (ouest < -180) {
-			indexProjetClique = index;
+		ouest += 360;
-		}
+	} else if (ouest > 180) {
-	}
-	masquerInfoBulle();
+		ouest -= 360;
+	}
-	sources[projetClique] = overlays[indexProjetClique].checked;
+	if (est < -180) {
-	if (sources[projetClique] == true) {
+		est += 360;
-		programmerRafraichissementCarte(projetClique);
+	} else if (est > 180) {
-	} else {
+		est -= 360;
 		supprimerLocalisations(projetClique);
 	return [ouest, sud, est, nord].join(',');
+}
 function afficherMessageChargement(element) {
 	if ($("#zone-chargement").css('display') == 'none') {
 		var divTmplElement = 'tpl-chargement-' + element;
 		$("#zone-chargement").append($("#" + divTmplElement).text());
 		$("#zone-chargement").css('display', 'block');
+	}
+}
 function masquerMessageChargement() {
 	$("#zone-chargement").css('display', 'none');
 	$("#zone-chargement").children().remove();
+}
 // execution d'une requete AJAX
 function executerAJAX() {
-	if (requeteEnCours()) {
-		masquerMessageChargement();
+	if (requeteEnCours()) {
 		requeteChargementPoints.abort();
+	}
 	requeteChargementPoints = $.getJSON(url).complete(function() {
 		fonctionCallback();
 	});
+}
 function requeteEnCours() {
 	return (requeteChargementPoints != null && requeteChargementPoints.readyState != 4);
+}
 function estStatutRequeteOK() {
 	return ((requeteChargementPoints.status == 200 || requeteChargementPoints.status == 304)
 		|| requeteChargementPoints.status == 0);
+}
-function chargerLocalisations(source) {
-	if (requeteEnCours()) {
-		window.setTimeout("chargerLocalisations('"+source+"')", 400);
-	} else {
-		afficherMessageChargement('stations');
-		// generer l'URL du script a interroger sur le serveur
-		var coordonneesBordure = calculerCoordonneesBordure();
+function convertirEnParametresUrl(objet) {
-		var parametres = {
-			"source" : source,
+	var parametresUrl = '';
-			"num_taxon" : numTaxon,
+	for (attribut in objet) {
-			"referentiel" : referentiel,
-			"dept" : dept,
-			"nn" : nn,
-			"auteur" : auteur,
+		if (typeof(objet[attribut]) == 'function' || typeof(objet[attribut]) == 'undefined' ||
-			"date_debut" : dateDebut,
+			objet[attribut] == null || objet[attribut] == '*' || objet[attribut] == 0)
-			"date_fin" : dateFin,
-			"bbox" : coordonneesBordure,
-			"nb_jours" : nbJours,
-			"zoom" : map.getZoom()
-		};
+			continue;
-		url = urlBase + "stations?" + convertirEnParametresUrl(parametres);
-		fonctionCallback = traiterDonneesStations;
-		executerAJAX();
+		parametresUrl += (parametresUrl == '' ? '' : '&') + attribut + "=" + objet[attribut];
+	}
-	}
+	return parametresUrl;
-}
+};
-function calculerCoordonneesBordure() {
-	var bordure = map.getBounds();
-	var ouest = bordure.getSouthWest().lng.toFixed(6),
-		sud = Math.max(bordure.getSouthWest().lat, -85.051129).toFixed(6),
-		est = bordure.getNorthEast().lng.toFixed(6),
-		nord = Math.min(bordure.getNorthEast().lat, 85.051129).toFixed(6);
-	// appliquer les limites possibles de la projection actuellement utilisee aux coordonnees
-	// longitudes ouest et est de la bbox (permettra d'eviter de renvoyer des messages d'erreur)
+function traiterDonneesStations() {
-	if (ouest < -180) {
+	masquerMessageChargement();
-		ouest += 360;
+	masquerLegende();
-	} else if (ouest > 180) {
+	if (deplacement == true) {
+		supprimerFeaturesHorsBbox();
+	}
-		ouest -= 360;
+	deplacement = true;
-	}
+	var texte = requeteChargementPoints.responseText;
-	if (est < -180) {
+	if (!estStatutRequeteOK()) {
+		alert(texte);
+	} else {
+		var donneesJSON = eval("(function(){return " + texte + ";})()");
-		est += 360;
+		if (donneesJSON != null && donneesJSON.features.length > 0) {
-	} else if (est > 180) {
+			ajouterStationsSurCarte(donneesJSON);
-		est -= 360;
+		}
-	return [ouest, sud, est, nord].join(',');
+	}
+}
-function traiterDonneesStations() {
+function traiterRetourChargementSource() {
 	masquerMessageChargement();
 	var texte = requeteChargementPoints.responseText;
 	if (!estStatutRequeteOK()) {
 		alert(texte);
 	} else {
 		var donneesJSON = eval("(function(){return " + texte + ";})()");
-		if (donneesJSON != null && typeof(donneesJSON.features) != 'undefined') {
+		if (donneesJSON != null && donneesJSON.features.length > 0) {
+			var formatRetourDifferent = donneesJSON.stats.formeDonnees != typeSite;
 			ajouterStationsSurCarte(donneesJSON);
+			if (formatRetourDifferent) {
+				var sourceAIgnorer = donneesJSON.stats.source[0];
+				var sourcesARecharger = recupererSourcesActivees(sourceAIgnorer);
+				rechargerSources(sourcesARecharger);
+			}
+		}
+	}
+}
+function supprimerFeaturesHorsBbox() {
+	var bordure = map.getBounds();
+	var layersRestants = 0;
-function ajouterStationsSurCarte(data) {
+	if (coucheSites != null) {
-	if (doitTransformerEnMaille(data.stats)) {
+		coucheSites.eachLayer(function(layer) {
-		if (points.length > 0 && data.stats.source != '') {
+			if (typeof(layer._latlng) != 'undefined') {
-			combinerMaillesEtPoints();
-		}
+				if (bordure.contains(layer.getLatLng())) {
-		formeDonnees = 'maille';
+					layersRestants ++;
-	} else {
+				} else {
-		formeDonnees = data.stats.formeDonnees;
+					coucheSites.supprimerPoint(layer);
-	}
+				}
-	var sourceDonnees = data.stats.source;
+			} else {
-	for (var index = 0; index < data.features.length; index ++) {
+				if (bordure.intersects(layer.getBounds())) {
-		ajouterStation(data.features[index]);
-	}
-	if (formeDonnees == 'maille' && data.stats.sites > 0) {
+					layersRestants ++;
-		afficherLegende();
+				} else {
-		regenererInfobulleMailles();
+					coucheSites.removeLayer(layer);
+				}
-	} else {
+			}
-		masquerLegende();
+		});
 	}
-	if (chargementMaillesEnCours) {
+	if (layersRestants == 0) {
-		chargementMaillesEnCours = false;
-		programmerRafraichissementCarte();
+		coucheSites = null;
+	}
+}
-function ajouterStation(feature) {
+function rechargerSources(sourcesARecharger) {
-	if (feature.properties.typeSite == 'MAILLE') {
+	var listeSourcesASupprimer = sourcesARecharger.split(',');
-		traiterMaille(feature);
-	} else {
+	for (var index = 0; index < listeSourcesASupprimer.length; index ++) {
-		ajouterPoint(feature);
+		supprimerFeaturesSource(listeSourcesASupprimer[index]);
+	}
 	chargerSource(sourcesARecharger);
 }
+function ajouterStationsSurCarte(donnees) {
-function doitTransformerEnMaille(statsFeatures) {
+	typeSite = donnees.stats.formeDonnees;
-	var condition1 = (formeDonnees == 'point' && statsFeatures.formeDonnees =='maille');
+	if (coucheSites == null) {
+		coucheSites = (typeSite == 'maille') ? new L.FeatureGroup() : new L.ClusterGroup();
-	var condition2 = (formeDonnees == 'maille' && statsFeatures.formeDonnees =='point'
+		map.addLayer(coucheSites);
+	}
+	for (var index = 0; index < donnees.features.length; index ++) {
+		var feature = donnees.features[index];
+		if (typeSite == 'maille') {
+			traiterMaille(feature);
+		} else {
+			ajouterPoint(feature);
-		&& determinerNombreMailles(false) > 0);
+		}
+	}
+	if (donnees.features.length > 0) {
+		afficherLegende();
+	}
+	if (typeSite == 'maille') {
-	var condition3 = (statsFeatures.formeDonnees == 'point' && map.getZoom() <= ZOOM_MAXIMUM_MAILLAGE
+		genererInfobulleMailles();
+	} else {
-		&& (points.length+statsFeatures.sites) > SEUIL_MAILLAGE);
+		coucheSites.afficherClusters();
-	return (condition1 || condition2 || condition3);
-}
+	}
+}
-// ====================================================================
-// Gestion des mailles
-var optionsMaille = {
-	color: '#FFFFFF',
-	opacity : 0.7,
-	weight: 1,
-	fillOpacity : 0.6
-};
-function determinerNombreMailles(prendToutesMailles) {
-	var nombreMailles = 0;
-	coucheSites.eachLayer(function(layer) {
-		if ('typeSite' in layer && layer.typeSite == 'MAILLE') {
-			var nombrePoints = 0;
-			for (var source in layer.nombrePoints) {
-				nombrePoints = layer.nombrePoints[source];
-			}
-			if (prendToutesMailles || nombrePoints>0) {
-				nombreMailles ++;
-			}
-		}
 	});
-	return nombreMailles;
+// =========================================
 // Gestion des mailles
 function traiterMaille(feature) {
 	var coordonnees = [];
 	for (var i = 0; i < feature.geometry.coordinates.length; i++) {
 		var sommet = new L.LatLng(feature.geometry.coordinates[i][0], feature.geometry.coordinates[i][1]);
 		coordonnees.push(sommet);
+	}
 	var maille = rechercherMailleExistante(coordonnees);
 	if (maille) {
 		mettreAJourMaille(maille, feature);
-	} else if (feature.properties.nombrePoints > 0) {
+	} else {
-		ajouterMaille(feature);
+		maille = ajouterMaille(feature, coordonnees);
+	}
+	colorerMaille(maille);
+}
 function rechercherMailleExistante(coordonnees) {
 	var mailleTrouvee = null;
 	coucheSites.eachLayer(function(layer) {
-		if ('typeSite' in layer && layer.typeSite == 'MAILLE') {
+		if ('typeSite' in layer && layer.typeSite == 'maille') {
 			if (sontMaillesIdentiques(coordonnees, layer._latlngs)) {
 				mailleTrouvee = layer;
 				return;
+			}
+		}
 	});
 	return mailleTrouvee;
+}
 function sontMaillesIdentiques(coordonnees1, coordonnees2) {
 	return (
 		coordonnees1[0].lat == coordonnees2[0].lat &&
 		coordonnees1[0].lng == coordonnees2[0].lng &&
 		coordonnees1[2].lat == coordonnees2[2].lat &&
 		coordonnees1[2].lng == coordonnees2[2].lng
 	);
+}
-function ajouterMaille(feature) {
-	var coordonnees = [];
-	for (var i = 0; i < feature.geometry.coordinates.length; i++) {
-		var sommet = new L.LatLng(feature.geometry.coordinates[i][0], feature.geometry.coordinates[i][1]);
-		coordonnees.push(sommet);
 function ajouterMaille(feature, coordonnees) {
+	var maille = new L.Polygon(coordonnees);
+	var optionsMaille = {
+		color: '#FFFFFF',
+		opacity : 0.7,
+		weight: 1,
+		fillOpacity : 0.6
-	var maille = new L.Polygon(coordonnees);
+	};
 	maille.setStyle(optionsMaille);
-	maille.typeSite = feature.properties.typeSite;
+	maille.typeSite = 'maille';
-	maille.nombrePoints = new Object();
-	var nombreAAjouter = feature.properties.nombrePoints == null ? 0 : parseInt(feature.properties.nombrePoints);
-	maille.nombrePoints[feature.properties.source] = nombreAAjouter;
+	maille.properties = feature.properties;
 	coucheSites.addLayer(maille);
-	colorerMaille(maille);
+	return maille;
+}
 function mettreAJourMaille(maille, feature) {
-	var nombreAAjouter = feature.properties.nombrePoints == null ? 0 : parseInt(feature.properties.nombrePoints);
+	var sources = feature.properties.source;
-	/*if (typeof(maille.nombrePoints[feature.properties.source]) == 'undefined') {
+	for (var index = 0; index < sources.length; index ++) {
-		maille.nombrePoints[feature.properties.source] = nombreAAjouter;
+		var source = sources[index];
-	} else {
-		maille.nombrePoints[feature.properties.source] += nombreAAjouter;
+		maille.properties.stations[source] = parseInt(feature.properties.stations[source]);
-	}*/
-	maille.nombrePoints[feature.properties.source] = nombreAAjouter;
+		maille.properties.observations[source] = parseInt(feature.properties.observations[source]);
-	colorerMaille(maille);
-}
-function regenererInfobulleMailles() {
-	$('.leaflet-clickable').addClass('tooltip');
-	coucheSites.eachLayer(function(layer) {
-		if (layer.typeSite == 'MAILLE') {
-			genererInfobulle(layer);
+		maille.properties.source.push(source);
-		}
+	}
-	});
+}
 function colorerMaille(maille) {
-	var nombrePoints = 0;
+	var nombreStations = 0;
-	for (sourceMaille in maille.nombrePoints) {
+	var sources = maille.properties.source;
+	for (var index = 0; index < sources.length; index ++) {
+		var source = sources[index];
+		if (typeof(maille.properties.stations[source]) != 'undefined') {
-		nombrePoints += maille.nombrePoints[sourceMaille];
+			nombreStations += parseInt(maille.properties.stations[source]);
+		}
+	}
-	if (nombrePoints > 0) {
+	if (nombreStations > 0) {
 		maille.on('click', surClicMaille);
-		maille.setStyle({fillColor : genererCouleur(nombrePoints), fillOpacity: 0.45, opacity: 0.7});
+		maille.setStyle({fillColor : genererCouleur(nombreStations), fillOpacity: 0.45, opacity: 0.7});
 	} else {
 		maille.setStyle({fillOpacity: 0, opacity: 0});
-		maille.off('click', surClicMaille);
+		maille.off('click');
+	}
+}
-function surClicMaille(event) {
-	map.fitBounds(event.layer.getBounds());
-}
 function genererCouleur(nombrePoints) {
 	var couleur = {'bleu': 231, 'vert': 224, 'rouge': 64},
 		seuils = [1, 10, 50 ,100, 500, 1000, 2500],
 		pas = 26,
 		position = 0;
 	for (var index = 1; index < seuils.length-1 && nombrePoints >= seuils[index]; index ++) {
 		position ++;
+	}
 	couleur.vert -= position*pas;
 	return 'rgb('+couleur.bleu+','+couleur.vert+','+couleur.rouge+')';
+}
+function surClicMaille(event) {
+	map.fitBounds(event.layer.getBounds());
+}
 function afficherLegende() {
 	if (legende == null) {
 		legende = new L.Control({position : 'bottomright'});
 		legende.onAdd = function(map) {
+			var contenuHtml = '';
+			if (typeSite == 'maille') {
+				contenuHtml = construireContenuHtmlLegendeMailles();
+			} else {
-			return construireContenuHtmlLegende();
+				contenuHtml = construireContenuHtmlLegendePoints();
+			}
+			return contenuHtml;
 		};
 		map.addControl(legende);
+	}
+}
-function construireContenuHtmlLegende() {
+function construireContenuHtmlLegendeMailles() {
 	var div = L.DomUtil.create('div', 'info');
 	div.innerHTML = '<h4>' + titreLegende + '</h4>';
 	var seuils = [1, 10, 50 ,100, 500, 1000, 2500];
 	var labels = [];
 	for (var i = 0; i < seuils.length; i ++) {
 		div.innerHTML +=
 			'<div class="legend">'+
-				'<span style="background:' + genererCouleur(seuils[i] + 1) + '"></span>'+
+				'<span class="couleur-maille" style="background:' + genererCouleur(seuils[i] + 1) + '">'+
-				seuils[i]+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+')+
+				'</span>'+seuils[i]+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+')+
 			'</div>';
+	}
 	return div;
+}
 function masquerLegende() {
 	if (legende != null) {
 		map.removeControl(legende);
 		legende = null;
+	}
+}
-function supprimerSourceDansMaille(maille, sourceSuppression) {
-	if (typeof(maille.nombrePoints[sourceSuppression]) != 'undefined') {
+function genererInfobulleMailles() {
-		maille.nombrePoints[sourceSuppression] = 0;
+	coucheSites.eachLayer(function(layer) {
-		colorerMaille(maille);
+		if (layer.typeSite == 'maille') {
-		genererInfobulle(maille);
+			genererInfobulle(layer);
+		}
 	});
+}
 function genererInfobulle(maille) {
-	var nombrePoints = 0,
+	var sources = maille.properties.source;
-		nombreSources = 0;
-		contenuTexte = '';
+	var textes = new Array();
-	for (sourceMaille in maille.nombrePoints) {
+	for (var index = 0; index < sources.length; index ++) {
-		nombrePoints = maille.nombrePoints[sourceMaille];
+		var source = sources[index];
-		if (nombrePoints > 0) {
+		if (typeof(maille.properties.stations[source]) != 'undefined') {
-			contenuTexte += (contenuTexte.length==0 ?'' : '\n')+
+			textes.push(source+" : "+maille.properties.stations[source]+" stations, "
-				sourceMaille+' : '+maille.nombrePoints[sourceMaille];
+				+maille.properties.observations[source]+" observations");
 		}
+	}
+	var contenu = textes.join('<br />');
+	maille.on('mouseover', function() {
+		afficherTooltip(contenu, map.latLngToContainerPoint(maille.getBounds().getSouthWest()));
+	});
-		nombreSources ++;
+	maille.on('mouseout', function() {
+		$("#tooltip").css('display', 'none');
+	});
-	}
+}
+function afficherTooltip(texte, point) {
+	$("#tooltip").html(texte);
+	if ($("#tooltip").css('display') == 'none') {
-	if (nombreSources > 0) {
+		var x = point.x - 15;
+		var y = point.y + (typeSite == 'maille' ? 1 : 10);
+		$("#tooltip").css('display', 'block');
-		$(maille._path).addClass('tooltip');
+		$("#tooltip").css('left', x + 'px');
-		$(maille._path).attr('title',contenuTexte);
+		$("#tooltip").css('top', y + 'px');
+	}
+}
 // ====================================================================
-// Gestion des marqueurs
+// Gestion des points
 function ajouterPoint(feature) {
 	var iconePoint = new L.Icon({ iconUrl : pointImageUrl,   iconSize : [16, 16] }),
 		iconeCommune   = new L.Icon({ iconUrl : communeImageUrl, iconSize : [24, 32] }),
 		icone = (feature.properties.typeSite == 'STATION') ? iconePoint : iconeCommune,
-		point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),
+		point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]);
-		marker = new L.Marker(point, {
+	var marker = new L.Cluster(point, {
-			icon  : icone,
+		icon  : icone,
-			title : feature.properties.nom
+		titre : feature.properties.nom
-		})
+	});
-	marker.typeSite = feature.properties.typeSite;
+	marker.typeSite = feature.properties.typeSite.toLowerCase();
 	marker.source = feature.properties.source;
 	marker.on('click', surClicMarqueur);
-	points.push(marker);
-	if (formeDonnees != 'maille') {
-		coucheSites.addLayer(marker);
-	} else {
-		ajouterPointDansMaille(marker);
-	}
-}
-function ajouterPointDansMaille(point) {
-	var maille = null;
-	coucheSites.eachLayer(function(layer) {
+	marker.on('mouseover', function() {
-		if (layer.typeSite == 'MAILLE' && layer.getBounds().contains(point.getLatLng())) {
+		afficherTooltip(marker.options.titre, map.latLngToContainerPoint(marker.getLatLng()));
-			maille = layer;
-			return;
-		}
 	});
-	if (typeof(maille.nombrePoints[point.source]) == 'undefined') {
-		maille.nombrePoints[point.source] = 1;
-	} else {
-		maille.nombrePoints[point.source] += 1;
-	}
-	colorerMaille(maille);
-}
-function combinerMaillesEtPoints() {
-	enleverMarqueursCarte();
-	coucheSites.eachLayer(function(layer) {
+	marker.on('mouseout', function() {
-		if (layer.typeSite == 'MAILLE') {
-			var nombrePoints = compterNombrePointsDansMaille(layer);
-			ajouterNombrePointsDansMaille(layer, nombrePoints);
+		$("#tooltip").css('display', 'none');
-		}
 	});
+	coucheSites.ajouterPoint(marker);
+}
-function determinerNombreMarqueurs(source) {
-	var nombrePoints = 0;
+function construireContenuHtmlLegendePoints() {
-	for (var index = 0; index < points.length; index ++) {
-		if (points[index].source == source) {
+	var div = L.DomUtil.create('div', 'info');
-			nombrePoints += 1;
-		}
-	}
+	div.innerHTML =
-	return nombrePoints;
-}
+	'<h4>Stations</h4>'+
-function enleverMarqueursCarte() {
+	'<div class="legend"><table>'+
-	coucheSites.eachLayer(function(layer) {
+		'<tr>'+
-		if (layer.typeSite != 'MAILLE') {
+			'<td class="image-station"><img src="'+communeImageUrl+'" width="24" height="32" /></td>'+
-			coucheSites.removeLayer(layer);
+			'<td class="label-station">Commune</td>'+
-		}
+		'</tr>'+
-	});
-}
-function compterNombrePointsDansMaille(maille) {
-	var nombrePoints = {};
-	for (var index = 0; index < points.length; index ++) {
+		'<tr>'+
-		if (maille.getBounds().contains(points[index].getLatLng())) {
-			var source = points[index].source;
+			'<td class="image-station"><img src="'+pointImageUrl+'" /></td>'+
-			if (typeof(nombrePoints[source]) == 'undefined') {
-				nombrePoints[source] = 1;
+			'<td class="label-station">Lieu précis</td>'+
-			} else {
-				nombrePoints[source] += 1;
+		'</tr>'+
-			}
-		}
-	}
-	return nombrePoints;
-}
-function ajouterNombrePointsDansMaille(maille, nombrePoints) {
-	for (sourceDonnees in nombrePoints) {
+		'<tr>'+
-		if (typeof(maille.nombrePoints[sourceDonnees]) == 'undefined') {
+			'<td class="image-station"><img src="'+clusterImageUrl+'" width="20" height="20" /></td>'+
-			maille.nombrePoints[sourceDonnees] = nombrePoints[sourceDonnees];
+			'<td class="label-station">Groupe de stations proches</td>'+
-		} else {
-			maille.nombrePoints[sourceDonnees] += nombrePoints[sourceDonnees];
+		'</tr>'+
-		}
-	}
+	'</table></div>';
-	colorerMaille(maille);
+	return div;
-}
-function supprimerPointsListe(sourceDonnees) {
-	var index = 0;
-	while (index < points.length) {
-		if (points[index].source == sourceDonnees) {
-			points.splice(index, 1);
-		} else {
-			index ++;
-		}
-	}
+}
-}
-function transformerMaillesEnPoints(sourceDonnees) {
+function surClicMarqueur(event) {
-	coucheSites.eachLayer(function(layer) {
-		if (layer.typeSite == 'MAILLE' && typeof(layer.nombrePoints[sourceDonnees]) != 'undefined') {
+	var nombreMarkers = event.target.recupererMarkers().length;
-			supprimerSourceDansMaille(layer, sourceDonnees);
+	if (nombreMarkers == 1 || map.getZoom() == map.getMaxZoom()) {
-		}
-	});
+		recupererObservations(event.target);
-	for (var index = 0; index < points.length; index ++) {
+	} else {
-		coucheSites.addLayer(points[index]);
+		map.setView(event.target.getLatLng(), Math.min(map.getZoom()+2, map.getMaxZoom()));
+	}
+}
-function surClicMarqueur(event) {
+function recupererObservations(cluster) {
-	var latitude = event.target.getLatLng().lat;
+	pointClique = cluster;
-	var longitude = event.target.getLatLng().lng;
-	pointClique = event.target;
+	var latlng = cluster.getLatLng();
 	afficherMessageChargement('observations');
 	var parametres = {
+		"source" : recupererSourcesCluster(cluster),
-		"source" : pointClique.source,
+		"stations" : construireListeStationsCluster(cluster),
+		"num_taxon" : numTaxon,
-		"num_taxon" : numTaxon,
+		"nn" : nn,
 		"referentiel" : referentiel,
-		"auteur" : auteur,
-		"nn" : nn,
-		"type_site" : pointClique.typeSite,
+		"auteur" : auteur,
 		"date_debut" : dateDebut,
-		"date_fin" : dateFin,
-		"longitude" : longitude,
-		"latitude" : latitude,
+		"date_fin" : dateFin,
 		"nb_jours" : nbJours
 	};
 	url = urlBase + "observations?" + convertirEnParametresUrl(parametres);
 	fonctionCallback = traiterDonneesObservations;
 	executerAJAX();
+}
+function recupererSourcesCluster(cluster) {
+	var markers = cluster.recupererMarkers();
+	var sourcesCluster = [];
+	for (var index = 0; index < markers.length; index ++) {
+		if (sourcesCluster.indexOf(markers[index].source) == -1) {
+			sourcesCluster.push(markers[index].source);
+		}
+	}
+	return sourcesCluster.join(',');
+}
+function construireListeStationsCluster(cluster) {
+	var markers = cluster.recupererMarkers();
+	var listePoints = [];
+	for (var index = 0; index < markers.length; index ++) {
+		var latlng = markers[index].getLatLng();
+		listePoints.push(markers[index].source+":"+markers[index].typeSite+":"+latlng.lng+","+latlng.lat);
+	}
+	return listePoints.join('|');
+}
 function traiterDonneesObservations() {
 	masquerMessageChargement();
 	var texte = requeteChargementPoints.responseText;
 	if (!estStatutRequeteOK()) {
 		alert(texte);
 	} else {
 		obsJSON = eval("(function(){return " + texte + ";})()");
 		if (obsJSON != null) {
 			viderListeObservations();
 			if (obsJSON.total > 0) {
 				doitRafraichirCarte = false;
 				map.setView(new L.LatLng(pointClique.getLatLng().lat, pointClique.getLatLng().lng), map.getZoom());
 				afficherInfoBulle();
 			} else if (infoBulle != null)  {
 				masquerInfoBulle();
+			}
+		}
+	}
+}
-function viderListeObservations() {
-	obsStation = new Array();
-}
 // ====================================================================
 // Gestion de l'infobulle
 var obsJSON = null,
 	pointClique = null,
 	obsStation = [],
-	typeAffichage = "";
+	pagineur = {'limite':100, 'start':0, 'total':0, 'stationId':null, 'format':'tableau'};
 function afficherInfoBulle() {
 	var latitude = pointClique.getLatLng().lat;
 	var longitude = pointClique.getLatLng().lng;
-	infoBulle = new L.Popup({maxWidth : definirLargeurInfoBulle(), maxHeight : 350});
+	infoBulle = new L.Popup({maxWidth : definirLargeurInfoBulle(), maxHeight : 380});
 	infoBulle.setLatLng(new L.LatLng(latitude, longitude));
 	infoBulle.setContent($("#tpl-obs").html());
 	infoBulle.openOn(map);
 	remplirContenuPopup();
+	$('#info-bulle').css('width', '99%');
+	$('#observations').css('height', '250px');
+	$('#observations').css('overflow', 'auto');
+	$('.leaflet-popup-scrolled').css('overflow', 'visible');
+}
+function viderListeObservations() {
+	obsStation = new Array();
+}
 function definirLargeurInfoBulle() {
 	var largeurViewPort = $(window).width();
 	var lageurInfoBulle = null;
 	if (largeurViewPort < 800) {
 		largeurInfoBulle = 400;
 	} else if (largeurViewPort >= 800 && largeurViewPort < 1200) {
 		largeurInfoBulle = 500;
 	} else if (largeurViewPort >= 1200) {
 		largeurInfoBulle = 600;
+	}
 	return largeurInfoBulle;
+}
 function redimensionnerPopup() {
-	$('.leaflet-popup-content*').css('width',  definirLargeurInfoBulle());
+	$('.leaflet-popup-content*').css('width', definirLargeurInfoBulle());
-	$('#info-bulle').css('width',  definirLargeurInfoBulle());
+	$('#info-bulle').css('width', '99%');
+}
 function remplirContenuPopup() {
 	ajouterTableauTriable("#obs-tableau");
 	ajouterTitre();
-	afficherOnglets();
+	afficherTableau();
 	afficherTexteStationId();
+}
 function masquerInfoBulle() {
 	if (infoBulle != null && map.hasLayer(infoBulle)) {
 		map.removeLayer(infoBulle);
+	}
 	infoBulle = null;
+}
 function ajouterTitre() {
 	var texteStationTitre = obsJSON.total + ' observation' + (obsJSON.total > 1 ? 's' : '')
-		+ ' pour ' + (pointClique.options.type=='STATION' ? 'la station : ' : 'la commune : ')
+		+ ' sur ' + (pointClique.typeSite=='station' ? 'la station : ' : 'la commune : ')
 		+ pointClique.options.title;
 	$('#obs-station-titre').text(texteStationTitre);
+}
-function selectionnerOnglet() {
-	$("#obs-vue-" + typeAffichage).css("display", "block");
-	$('#obs-tableau-lignes').empty();
+function afficherTableau() {
-	$('#obs-liste-lignes').empty();
+	construireListeObservations();
-	if (typeAffichage=='liste') {
-		$("#obs-vue-tableau").css("display", "none");
-	} else {
+	afficherPagination();
-		$("#obs-vue-liste").css("display", "none");
 	afficherObservationsDansHTML();
 }
-function ajouterObservationsDansHTML() {
+function construireListeObservations() {
 	if (obsStation.length==0) {
 		// premiere execution de la fonction : faire une copie des objets JSON decrivant les observations
 		for (var index = 0; index < obsJSON.observations.length; index ++) {
 			obsStation.push(obsJSON.observations[index]);
+		}
+	}
-	var obsPage = [];
-	for (var index = 0; index < obsStation.length; index ++) {
-		obsPage.push(obsStation[index]);
+	pagineur.total = obsStation.length;
-	}
-	$("#tpl-obs-"+typeAffichage).tmpl(obsPage).appendTo("#obs-"+typeAffichage+"-lignes");
+}
+function afficherPagination() {
-function afficherOnglets() {
+	$(".navigation").pagination(pagineur.total, {
-	var $tabs = $('#obs').tabs();
+		items_per_page:pagineur.limite,
-	$('#obs').bind('tabsselect', function(event, ui) {
+		callback:afficherObservationsDansHTML,
-		if (ui.panel.id == 'obs-vue-tableau') {
+		next_text:'Suivant',
-			surClicAffichageTableau();
+		prev_text:'Précédent',
+		prev_show_always:false,
-		} else if (ui.panel.id == 'obs-vue-liste') {
+		num_edge_entries:1,
-			surClicAffichageListe();
+		num_display_entries:4,
 		load_first_page:true
-	});
-	if (obsJSON.total > 4) {
-		surClicAffichageTableau();
-	} else {
-		$tabs.tabs('select', "#obs-vue-liste");
 	});
 }
-function surClicAffichageTableau() {
-	typeAffichage = 'tableau';
+function afficherObservationsDansHTML(indexPage) {
-	selectionnerOnglet();
+	$("#obs-tableau-lignes").empty();
-	ajouterObservationsDansHTML();
+	if (typeof(indexPage) == 'undefined') {
-	mettreAJourTableauTriable("#obs-tableau");
-}
+		indexPage = 0;
+	}
+	var depart = indexPage * pagineur.limite;
-function surClicAffichageListe() {
+	var obsPage = [];
+	for (var index = depart; index < depart + pagineur.limite; index ++) {
+		obsPage.push(obsStation[index]);
-	typeAffichage = 'liste';
+	}
-	selectionnerOnglet();
+	$("#tpl-obs-tableau").tmpl(obsPage).appendTo("#obs-tableau-lignes");
-	ajouterObservationsDansHTML();
+	mettreAJourTableauTriable();
+}
-function ajouterTableauTriable(element) {
+function ajouterTableauTriable() {
 	$.tablesorter.addParser({
 		id: 'date_cel',
 		is: function(s) {
 			// doit retourner false si le parseur n'est pas autodétecté
 			return /^\s*\d{2}[\/-]\d{2}[\/-]\d{4}\s*$/.test(s);
 		},
 		format: function(date) {
 			// Transformation date jj/mm/aaaa en aaaa/mm/jj
-			date = date.replace(/^\s*(\d{2})[\/-](\d{2})[\/-](\d{4})\s*$/, "$3/$2/$1");
+			date = date.replace(/^\s*(\d{2})[\/-](\d{2})[\/-](\d{4})\s*$/, "$3-$2-$1");
 			// Remplace la date par un nombre de millisecondes pour trier numériquement
 			return $.tablesorter.formatFloat(new Date(date).getTime());
 		},
 		type: 'numeric'
 	});
-	$(element).tablesorter({
+	$("#obs-tableau").tablesorter({
         headers: {
 : {
             	sorter:'date_cel'
+        	}
+    	}
 	});
+}
-function mettreAJourTableauTriable(element) {
+function mettreAJourTableauTriable() {
-	$(element).trigger('update');
+	$("#obs-tableau").trigger('update');
+}
 function afficherTexteStationId() {
-	var latitude = pointClique.getLatLng().lat;
+	var latitude = pointClique.getLatLng().lat.toFixed(5);
-	var longitude = pointClique.getLatLng().lng;
+	var longitude = pointClique.getLatLng().lng.toFixed(5);
+	var texteStationId = pointClique.typeSite.toUpperCase() + ':'
-	var texteStationId = pointClique.typeSite+':'+latitude+'|'+longitude+', SOURCE:'+pointClique.source;
+		+ latitude + '|' + longitude + ', SOURCE:' + pointClique.source;
 	$('#obs-station-id').text(texteStationId);
+}

Subversion Repositories eFlore/Applications.moissonnage

(root)/trunk/widget/modules/carto/squelettes/scripts/carto.js @ 31 – Rev 31 → 37