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

 // Javascript Document
-//==============================================================
+// ==============================================================
 //  FONCTIONS ADDITIONNELLES POUR GERER LES URLS
-convertirEnParametresUrl = function(objet) {
+function convertirEnParametresUrl(objet) {
 	var parametresUrl = '';
 	for (attribut in objet) {
 		if (typeof(objet[attribut]) == 'function' || typeof(objet[attribut]) == 'undefined' ||
 			objet[attribut] == null)
 			continue;
 		parametresUrl += (parametresUrl == '' ? '' : '&') + attribut + "=" + objet[attribut].toString();
+	}
 	return parametresUrl;
 };
+function estParametreDansUrl(nomParametre) {
-parametreDansUrl = function(nomParametre) {
+	var estDansUrl = false;
 	var listeParametres = location.search.substring(1).split("&");
 	for (var index = 0; index < listeParametres.length; index ++) {
 		var split = listeParametres[index].split("=");
 		if (split[0] == nomParametre) {
-			return true;
+			estDansUrl = true;
+		}
+	}
-	return false;
+	return estDansUrl;
 };
-//=============================================================
+// =============================================================
 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",
+	optionsCoucheOSM),
+couchePlanGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
+	optionsCoucheGoogle),
+coucheSatelliteGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=y&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]]
+	maxBounds : [[-85.051129, -180], [85.051129, 180]],
+	layers : [couchePlanGoogle]
 },
-coucheOSM, couchePlanGoogle, coucheSatelliteGoogle,
-bordure = null,
+legende = null,
-legende = null;
+infoBulle = null;
-var iconePoint = new L.Icon({ iconUrl : pointImageUrl,   iconSize : [16, 16] }),
-iconeCommune   = new L.Icon({ iconUrl : communeImageUrl, iconSize : [24, 32] });
 var coucheSites = new L.FeatureGroup(),
 overlays = [];
 var requeteChargementPoints = null,
+doitRafraichirCarte = true,
 timer = null,
 url = '';
 $(document).ready(function() {
 	initialiserWidget();
 });
 function initialiserWidget() {
 	initialiserCarte();
 	initialiserListeners();
 	initialiserPanneauControle();
 	chargerLimitesCommunales();
-	if (!parametreDansUrl('source')) {
+	if (!estParametreDansUrl('source')) {
 		initialiserSources();
+	}
 	programmerRafraichissementCarte();
+}
 $(window).resize(function() {
 	dimensionnerCarte();
+	if (infoBulle != null) {
+		redimensionnerPopup();
+	}
 });
 function dimensionnerCarte() {
 	$('#map').height($(window).height());
 	$('#map').width($(window).width());
+}
 function initialiserCarte() {
 	dimensionnerCarte();
-	// afficher la carte et ajouter un fond cartographique OpenStreetMap
 	map = L.map('map', optionsCarte);
 	coucheSites.addTo(map);
-	var 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
-	};
-	var 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",
-		optionsCoucheOSM);
 	coucheOSM.addTo(map);
-	couchePlanGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
-		optionsCoucheGoogle);
 	couchePlanGoogle.addTo(map);
-	coucheSatelliteGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
-		optionsCoucheGoogle);
 	coucheSatelliteGoogle.addTo(map);
-	// ajout echelle
 	var echelle = new L.Control.Scale({
 		maxWidth : 100,
 		metric : true,
 		imperial : false,
 		updateWhenIdle : true
 	});
 	map.addControl(echelle);
+}
-function chargerLimitesCommunales() {
-	/*if (urlsLimitesCommunales != null) {
-		for (urlId in urlsLimitesCommunales) {
-			var url = urlsLimitesCommunales[urlId];
-			var track = new L.KML(url, {async: true});
-			/*ctaLayer = new google.maps.KmlLayer(url, {preserveViewport: true});
-			alert(url);
-			ctaLayer.setMap(map);
-		}
-	}*/
-}
 function initialiserListeners() {
-	// evenements sur deplacement ou zoom sur la carte
-	map.on('moveend', programmerRafraichissementCarte);
+	map.on('moveend', surChangementVueSurCarte);
-	map.on('zoomend', programmerRafraichissementCarte);
+	map.on('zoomend', surChangementVueSurCarte);
 	map.on('popupclose', function(e) {
 		masquerInfoBulle();
+		programmerRafraichissementCarte();
 	});
+}
 function initialiserPanneauControle() {
 	var baseMaps = {
 		"OSM" : coucheOSM,
 		"Plan" : couchePlanGoogle,
 		"Satellite" : coucheSatelliteGoogle
 	};
 	var overlayMaps = {};
-	if (!parametreDansUrl('source')) {
+	if (!estParametreDansUrl('source')) {
 		for (var index = 0; index < nomSources.length; index ++) {
 			overlayMaps[nomSources[index]] = new L.LayerGroup();
+		}
+	}
 	L.control.layers(baseMaps, overlayMaps).addTo(map);
+	coucheOSM.bringToBack();
+	couchePlanGoogle.bringToFront();
+	coucheSatelliteGoogle.bringToBack();
 	// 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 = false;
 	selecteursFonds[1].checked = true;
 	selecteursFonds[2].checked = false;
+}
-	coucheOSM.bringToBack();
+function chargerLimitesCommunales() {
+	if (urlsLimitesCommunales != null) {
+		for (var index = 0; index < urlsLimitesCommunales.length; index ++) {
+			var url = urlsLimitesCommunales[index];
+			var coucheDepartement = new L.KML(url, {async: true});
-	couchePlanGoogle.bringToFront();
+			coucheDepartement.on("loaded", function(e) {
-	coucheSatelliteGoogle.bringToBack();
+				map.fitBounds(e.target.getBounds());
+			});
+			map.addLayer(coucheDepartement);
+		}
+	}
+}
 function initialiserSources() {
 	overlays = $('.leaflet-control-layers-overlays .leaflet-control-layers-selector');
 	$.each(overlays, function (index, input) {
 		input.value = sources[index];
 		input.id = 'overlay' + (index+1);
 		var lien = '<a href="' + liensVersSources[index] + '" target="_blank">' + nomSources[index] + '</a>';
 		$('#overlay' + (index+1) + ' ~ span').html(lien);
 		input.type = 'radio';
 		input.checked = (sources[index] == source);
 		input.onchange = function(event) {
 			// evenement sur selection/deselection overlay dans sa checkbox
 			changerSource(event.target.value);
+		}
 	});
+}
+function surChangementVueSurCarte() {
+	if (doitRafraichirCarte == false) {
+		doitRafraichirCarte = true;
+	} else {
+		programmerRafraichissementCarte();
+	}
+}
 function programmerRafraichissementCarte() {
 	if(timer != null) {
         window.clearTimeout(timer);
+    }
 	if(requeteChargementPoints != null) {
 		requeteChargementPoints.abort();
 		requeteChargementPoints = null;
+	}
 	timer = window.setTimeout(function() {
 		supprimerLocalisations();
 		afficherMessageChargement('stations');
 		chargerLocalisations();
     }, 400);
+}
 function supprimerLocalisations() {
 	coucheSites.clearLayers();
+}
 function changerSource(projetClique) {
-	// dechecker les autres controles d'overlays dans le panel
+	// deselctionner les autres boutons des controles d'overlays dans le panel
 	for (var index = 0; index < overlays.length; index ++) {
 		if (overlays[index].value != projetClique) {
 			overlays[index].checked = false;
+		}
+	}
 	// afficher les sites dans la carte pour le projet selectionne
 	if (infoBulle != null) {
 		masquerInfoBulle();
+	}
 	source = projetClique;
 	programmerRafraichissementCarte();
+}
 function afficherMessageChargement(element) {
 	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();
 		requeteChargementPoints.abort();
+	}
 	requeteChargementPoints = $.getJSON(url).complete(function() {
-		fonctionCallback(requeteChargementPoints.responseText);
+		fonctionCallback();
 	});
+}
 function requeteEnCours() {
 	return (requeteChargementPoints != null && requeteChargementPoints.readyState != 4);
+}
+function retourRequeteOK() {
+	return ((requeteChargementPoints.status == 200 || requeteChargementPoints.status == 304)
+		|| requeteChargementPoints.status == 0);
+}
 function chargerLocalisations() {
 	// generer l'URL du script a interroger sur le serveur
-	bordure = map.getBounds();
 	var coordonneesBordure = calculerCoordonneesBordure();
+	var parametres = {
+		"source" : source,
+		"num_taxon" : num_taxon,
-	var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,
+		"referentiel" : referentiel,
+		"dept" : dept,
+		"auteur" : auteur,
-			"utilisateur" : utilisateur, "bbox" : coordonneesBordure, "zoom" : map.getZoom()};
+		"bbox" : coordonneesBordure,
+		"zoom" : map.getZoom()
+	};
-	url = urlBase + source + "/stations?" + convertirEnParametresUrl(parametres);
+	url = urlBase + "stations?" + convertirEnParametresUrl(parametres);
-	fonctionCallback = function(JSONtext) {
-		masquerMessageChargement();
-		if (requeteChargementPoints.status != 200 && requeteChargementPoints.status != 304
-			&& typeof(JSONtext) != 'undefined') {
-			alert(JSONtext);
-			return;
-		}
-		var data = eval("(function(){return " + JSONtext + ";})()");
-		if (typeof(data) != 'undefined' && typeof(data.features) != 'undefined') {
-			ajouterObjets(data);
-		}
 	fonctionCallback = traiterDonneesStations;
 	executerAJAX();
+}
 function calculerCoordonneesBordure() {
-function calculerCoordonneesBordure() {
+	var bordure = map.getBounds();
 	var ouest = bordure.getSouthWest().lng,
 		sud = Math.max(bordure.getSouthWest().lat, -85.051129),
 		est = bordure.getNorthEast().lng,
 		nord = Math.min(bordure.getNorthEast().lat, 85.051129);
 	// 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)
 	if (ouest < -180) {
 		ouest += 360;
 	} else if (ouest > 180) {
 		ouest -= 360;
+	}
 	if (est < -180) {
 		est += 360;
 	} else if (est > 180) {
 		est -= 360;
+	}
 	return [ouest, sud, est, nord].join(',');
+}
+function traiterDonneesStations() {
+	masquerMessageChargement();
+	var texte = requeteChargementPoints.responseText;
+	if (!retourRequeteOK()) {
+		alert(texte);
+	} else {
+		var donneesJSON = eval("(function(){return " + texte + ";})()");
+		if (typeof(donneesJSON) != 'undefined' && typeof(donneesJSON.features) != 'undefined') {
+			ajouterObjets(donneesJSON);
+		}
+	}
+}
 function ajouterObjets(data) {
 	coucheSites.clearLayers();
-	var contientMailles = false;
+	var contientMailles = (data.features[0].properties.typeSite == 'MAILLE');
-	// ajout des nouveaux points a la couche
-	for (var i = 0; i < data.features.length; i ++) {
+	for (var index = 0; index < data.features.length; index ++) {
-		var typeSite = data.features[i].properties.typeSite;
+		switch (data.features[index].properties.typeSite) {
-		var objet = null;
-		switch (typeSite) {
-			case 'MAILLE' : {
-				contientMailles = true;
-				ajouterMaille(data.features[i]);
+			case 'MAILLE'  : ajouterMaille(data.features[index]);
 				break;
-			}
 			case 'COMMUNE' :
-			case 'STATION' : {
-				ajouterPoint(data.features[i]);
+			case 'STATION' : ajouterPoint(data.features[index]);
 				break;
-			}
+		}
+	}
-	// afficher/masquer la legende
-	if (contientMailles) {
+	if (contientMailles && legende == null) {
 		afficherLegende();
-	} else {
+	} else if (legende != null) {
 		masquerLegende();
+	}
+}
 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);
+	}
 	var objet = new L.Polygon(coordonnees, {
 		color: '#FFFFFF',
 		opacity : 0.7,
 		weight: 1,
 		fillColor : getColor(feature.properties.nombrePoints),
 		fillOpacity : 0.6
 	});
 	objet.typeSite = feature.properties.typeSite;
 	objet.nombrePoints = feature.properties.nombrePoints;
 	objet.on('click', clicSurMaille);
 	coucheSites.addLayer(objet);
 	// afficher le nombre de points inclus dans la maille
 	afficherNombreStationsDansMaille(objet);
+}
 function afficherNombreStationsDansMaille(maille) {
-	var recul = 0;
-	if (maille.nombrePoints >= 10000) {
+	// comme la div qui contiendra la valeur du nombre de stations va se placer dans la page
-		recul = 14;
-	} else if (maille.nombrePoints >= 1000) {
+	// au centre de la maille (et qui va servir de point d'ancrage pour le bord gauche par defaut)
-		recul = 9;
+	// il est necessaire de creer un decalage vers la gauche en fonction du nombre de chiffres
-	} else if (maille.nombrePoints >= 100) {
+	var decalage = calculerDecalagePositionnementNombre(maille.nombrePoints);
-		recul = 5;
-	}
 	var sudMaille    = maille._originalPoints[0].y,
 		ouestMaille  = maille._originalPoints[0].x,
 		nordMaille   = maille._originalPoints[2].y,
 		estMaille    = maille._originalPoints[2].x,
-		centreMaille = new L.Point((ouestMaille + estMaille) / 2 - recul, (sudMaille + nordMaille) / 2);
+		centreMaille = new L.Point((ouestMaille+estMaille)/2 - decalage, (sudMaille+nordMaille)/2);
 	var divIcon = new L.divIcon({
 		className : "nombre-sites",
 		html : maille.nombrePoints
 	});
 	var marqueurDiv = new L.Marker(map.layerPointToLatLng(centreMaille), {
 		icon : divIcon,
 		maille : maille.getBounds()
 	});
 	marqueurDiv.on('click', clicSurMaille);
 	coucheSites.addLayer(marqueurDiv);
+}
+function calculerDecalagePositionnementNombre(nombrePoints) {
+	var recul = 0;
+	if (nombrePoints >= 10000) {
+		recul = 14;
+	} else if (nombrePoints >= 1000) {
+		recul = 9;
+	} else if (nombrePoints >= 100) {
+		recul = 5;
+	}
+	return recul;
+}
 function clicSurMaille(event) {
 	if (event.target._zIndex != null) {
 		map.fitBounds(event.target.options.maille)
 	} else {
 		map.fitBounds(event.target.getBounds());
+	}
+}
+// generer la couleur a afficher pour les mailles
+function getColor(nombrePoints) {
+	var couleur = {'bleu': 231, 'vert': 224, 'rouge': 64},
+		seuils = [1, 10, 50 ,100, 500, 1000, 2500],
-function getColor(nbPoints) {
+		pas = 26,
+		position = 0;
-	if (nbPoints >= 2500) {
+	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+')';
-		return '#E74440';
+	/*var codeHexa = 'rgb(231,224,64)';
-	} else if (nbPoints >= 1000) {
+	if (nombrePoints >= 2500) {
-		return '#E75E40';
+		codeHexa =  'rgb(231,68,64)';
-	} else if (nbPoints >= 500) {
+	} else if (nombrePoints >= 1000) {
-		return '#E77840';
+		codeHexa =  'rgb(231,94,64)';
-	} else if (nbPoints >= 100) {
+	} else if (nombrePoints >= 500) {
-		return '#E79240';
+		codeHexa =  'rgb(231,120,64)';
-	} else if (nbPoints >= 50) {
+	} else if (nombrePoints >= 100) {
-		return '#E7AC40';
+		codeHexa =  'rgb(231,146,64)';
-	} else if (nbPoints >= 10) {
+	} else if (nombrePoints >= 50) {
-		return '#E7C640';
+		codeHexa =  'rgb(231,172,64)';
-	} else {
+	} else if (nombrePoints >= 10) {
-		return '#E7E040';
+		codeHexa =  'rgb(231,198,64)';
+	}
 	return codeHexa;*/
+}
 function ajouterPoint(feature) {
-	var point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),
+	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]),
 		marker = new L.Marker(point, {
-		icon : icone,
+			icon : icone,
-		type : feature.properties.typeSite,
+			type : feature.properties.typeSite,
-		title : feature.properties.nom
+			title : feature.properties.nom
-	}).addTo(map);
+		}).addTo(map);
-	// evenement onclick sur marqueur pour recuperer les observations sur ce point
-	marker.on('click', clicSurMarqueur);
+	marker.on('click', surClicMarqueur);
 	coucheSites.addLayer(marker);
+}
 function afficherLegende() {
-	if (legende != null) {
-		return;
-	}
 	legende = new L.Control({position : 'bottomright'});
 	legende.onAdd = function(map) {
-		var div = L.DomUtil.create('div', 'info');
+		return construireContenuHtmlLegende();
-		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"><i style="background:' + getColor(seuils[i] + 1) + '"></i>' + seuils[i]
-				+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+') + '</div>';
-		}
-		return div;
 	};
 	map.addControl(legende);
+}
+function construireContenuHtmlLegende() {
+	var div = L.DomUtil.create('div', 'info');
+	div.innerHTML = '<h4>' + titreLegende + '</h4>';
-function masquerLegende() {
+	var seuils = [1, 10, 50 ,100, 500, 1000, 2500];
+	var labels = [];
+	for (var i = 0; i < seuils.length; i ++) {
-	if (legende != null) {
+		div.innerHTML +=
+			'<div class="legend">'+
+				'<span style="background:' + getColor(seuils[i] + 1) + '"></span>'+
-		map.removeControl(legende);
+				seuils[i]+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+')+
-		legende = null;
+			'</div>';
+	}
+	return div;
+}
+function masquerLegende() {
+	map.removeControl(legende);
 	legende = null;
+}
-function clicSurMarqueur(event) {
-	// centrer la carte sur le marqueur
+function surClicMarqueur(event) {
 	var latitude = event.target.getLatLng().lat;
 	var longitude = event.target.getLatLng().lng;
 	pointClique = event.target;
 	afficherMessageChargement('observations');
+	var parametres = {
+		"source" : source,
-	// charger les observations se trouvant sur ce point
+		"num_taxon" : num_taxon,
-	var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,
+		"referentiel" : referentiel,
+		"auteur" : auteur,
-		"utilisateur" : utilisateur, "longitude" : longitude, "latitude" : latitude};
+		"longitude" : longitude,
+		"latitude" : latitude
+	};
-	url = urlBase + source + "/observations?" + convertirEnParametresUrl(parametres);
+	url = urlBase + "observations?" + convertirEnParametresUrl(parametres);
-	fonctionCallback = function(JSONtext) {
+	fonctionCallback = traiterDonneesObservations;
+	executerAJAX();
+}
+function traiterDonneesObservations() {
-		masquerMessageChargement();
+	masquerMessageChargement();
-		if (requeteChargementPoints.status != 200 && requeteChargementPoints.status != 304
+	var texte = requeteChargementPoints.responseText;
-				&& typeof(JSONtext) != 'undefined') {
+	if (!retourRequeteOK()) {
-			alert(JSONtext);
+		alert(texte);
-			return;
+	} else {
-		}
-		obsJSON = eval("(function(){return " + JSONtext + ";})()");
-		// vider la liste des observations de l'infobulle precedente
-		while (obsStation.length > 0) {
+		obsJSON = eval("(function(){return " + texte + ";})()");
-			obsStation.pop();
 		viderListeObservations();
 		if (obsJSON.total > 0) {
-			// centrer la vue de la carte sur la station
+			doitRafraichirCarte = false;
-			map.setView(new L.LatLng(latitude, longitude), map.getZoom());
-			// afficher les observations dans une infobulle
+			map.setView(new L.LatLng(pointClique.getLatLng().lat, pointClique.getLatLng().lng), map.getZoom());
 			afficherInfoBulle();
-		} else if (infoBulle != null)  {
-			// supprimer l'infobulle
+		} else if (infoBulle != null)  {
 			masquerInfoBulle();
+		}
+	}
-	executerAJAX();
+}
+function viderListeObservations() {
+	obsStation = new Array();
-///////////////////////////////////////
+}
-//             INFOBULLE             //
-///////////////////////////////////////
 // ====================================================================
 //  Gestion de l'infobulle
 var infoBulle = null,
-	obsJSON = null,
+var obsJSON = null,
 	pointClique = null,
 	obsStation = [],
 	typeAffichage = "";
 function afficherInfoBulle() {
-	// creer l'infobulle sur le marqueur qui a declenche l'evenement clicSurMarqueur
 	var latitude = pointClique.getLatLng().lat;
 	var longitude = pointClique.getLatLng().lng;
-	infoBulle = new L.Popup({maxWidth : 600, maxHeight : 350});
+	infoBulle = new L.Popup({maxWidth : definirLargeurInfoBulle(), maxHeight : 350});
 	infoBulle.setLatLng(new L.LatLng(latitude, longitude));
-	// afficher la popup sur la carte
 	infoBulle.setContent($("#tpl-obs").html());
 	infoBulle.openOn(map);
+	remplirContenuPopup();
+}
+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());
+	$('#info-bulle').css('width',  definirLargeurInfoBulle());
+}
-	// remplir le contenu de la popup
+function remplirContenuPopup() {
 	ajouterTableauTriable("#obs-tableau");
 	ajouterTitre();
 	afficherOnglets();
 	afficherTexteStationId();
+}
 function masquerInfoBulle() {
 	if (map.hasLayer(infoBulle) && infoBulle != null) {
 		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 : ')
 		+ pointClique.options.title;
 	$('#obs-station-titre').text(texteStationTitre);
+}
 function selectionnerOnglet() {
 	$("#obs-vue-" + typeAffichage).css("display", "block");
 	$('#obs-tableau-lignes').empty();
 	$('#obs-liste-lignes').empty();
 	if (typeAffichage=='liste') {
 		$("#obs-vue-tableau").css("display", "none");
 	} else {
 		$("#obs-vue-liste").css("display", "none");
+	}
+}
 function ajouterObservationsDansHTML() {
 	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]);
+		}
+	}
 	// ajouter les observations dans le code HTML
 	var obsPage = [];
 	for (var index = 0; index < obsStation.length; index ++) {
 		obsPage.push(obsStation[index]);
+	}
 	$("#tpl-obs-"+typeAffichage).tmpl(obsPage).appendTo("#obs-"+typeAffichage+"-lignes");
+}
 function afficherOnglets() {
 	var $tabs = $('#obs').tabs();
 	$('#obs').bind('tabsselect', function(event, ui) {
 		if (ui.panel.id == 'obs-vue-tableau') {
 			surClicAffichageTableau();
 		} else if (ui.panel.id == 'obs-vue-liste') {
 			surClicAffichageListe();
+		}
 	});
 	if (obsJSON.total > 4) {
 		surClicAffichageTableau();
 	} else {
 		$tabs.tabs('select', "#obs-vue-liste");
+	}
+}
 function surClicAffichageTableau() {
 	typeAffichage = 'tableau';
 	selectionnerOnglet();
 	ajouterObservationsDansHTML();
 	mettreAJourTableauTriable("#obs-tableau");
+}
 function surClicAffichageListe() {
 	typeAffichage = 'liste';
 	selectionnerOnglet();
 	ajouterObservationsDansHTML();
+}
 function ajouterTableauTriable(element) {
 	// add parser through the tablesorter addParser method
 	$.tablesorter.addParser({
 		// Définition d'un id unique pour ce parsseur
 		id: 'date_cel',
 		is: function(s) {
 			// doit retourner false si le parsseur 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");
 			// Remplace la date par un nombre de millisecondes pour trier numériquement
 			return $.tablesorter.formatFloat(new Date(date).getTime());
 		},
 		// set type, either numeric or text
 		type: 'numeric'
 	});
 	$(element).tablesorter({
         headers: {
 : {
             	sorter:'date_cel'
+        	}
+    	}
 	});
+}
 function mettreAJourTableauTriable(element) {
 	$(element).trigger('update');
+}
 function afficherTexteStationId() {
 	var latitude = pointClique.getLatLng().lat;
 	var longitude = pointClique.getLatLng().lng;
 	var texteStationId = pointClique.options.type + ':' + latitude + '|' + longitude;
 	$('#obs-station-id').text(texteStationId);
+}

Subversion Repositories eFlore/Applications.moissonnage

(root)/trunk/widget/modules/carto/squelettes/scripts/carto.js – Rev 7 → 28