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),
-var map = null,
 optionsCarte = {
 	center : new L.LatLng(46, 2),
-	zoom : 6,
-	minZoom : 3,
-	maxBounds : [[-85.051129, -180], [85.051129, 180]]
-},
+	zoom : 6,
-coucheOSM, couchePlanGoogle, coucheSatelliteGoogle,
+	minZoom : 3,
-bordure = null,
+	maxBounds : [[-85.051129, -180], [85.051129, 180]],
+	layers : [couchePlanGoogle]
-legende = null;
+},
 legende = null,
 function initialiserWidget() {
 	initialiserCarte();
 	initialiserListeners();
 	initialiserPanneauControle();
 	chargerLimitesCommunales();
-	if (!parametreDansUrl('source')) {
+	if (!estParametreDansUrl('source')) {
 		initialiserSources();
+	}
 	programmerRafraichissementCarte();
+}
 $(window).resize(function() {
+	dimensionnerCarte();
+	if (infoBulle != null) {
+		redimensionnerPopup();
 	dimensionnerCarte();
 });
 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
+function initialiserCarte() {
-	};
-	coucheOSM = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-		optionsCoucheOSM);
+	dimensionnerCarte();
-	coucheOSM.addTo(map);
-	couchePlanGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
-		optionsCoucheGoogle);
+	map = L.map('map', optionsCarte);
-	couchePlanGoogle.addTo(map);
-	coucheSatelliteGoogle = new L.TileLayer("http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
-		optionsCoucheGoogle);
+	coucheSites.addTo(map);
-	coucheSatelliteGoogle.addTo(map);
+	coucheOSM.addTo(map);
 	couchePlanGoogle.addTo(map);
-	// ajout echelle
+	coucheSatelliteGoogle.addTo(map);
 	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);
 		updateWhenIdle : true
-	}*/
-}
+	});
+	map.addControl(echelle);
-function initialiserListeners() {
 	// evenements sur deplacement ou zoom sur la carte
-	map.on('moveend', programmerRafraichissementCarte);
+function initialiserListeners() {
+	map.on('moveend', surChangementVueSurCarte);
-	map.on('zoomend', programmerRafraichissementCarte);
+	map.on('zoomend', surChangementVueSurCarte);
 	map.on('popupclose', function(e) {
-	map.on('popupclose', function(e) {
+		masquerInfoBulle();
-		masquerInfoBulle();
+		programmerRafraichissementCarte();
 		"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();
-	L.control.layers(baseMaps, overlayMaps).addTo(map);
+	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;
-	selecteursFonds[1].checked = true;
+}
+function chargerLimitesCommunales() {
+	if (urlsLimitesCommunales != null) {
+		for (var index = 0; index < urlsLimitesCommunales.length; index ++) {
-	selecteursFonds[2].checked = false;
+			var url = urlsLimitesCommunales[index];
-	coucheOSM.bringToBack();
+			var coucheDepartement = new L.KML(url, {async: true});
+			coucheDepartement.on("loaded", function(e) {
+				map.fitBounds(e.target.getBounds());
+			});
+			map.addLayer(coucheDepartement);
 	couchePlanGoogle.bringToFront();
 	coucheSatelliteGoogle.bringToBack();
+}
 			changerSource(event.target.value);
+		}
 	});
+}
+function surChangementVueSurCarte() {
+	if (doitRafraichirCarte == false) {
+		doitRafraichirCarte = true;
+	} else {
+		programmerRafraichissementCarte();
+	}
+}
 function programmerRafraichissementCarte() {
 	if(timer != null) {
 	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;
 	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
-function chargerLocalisations() {
+	var coordonneesBordure = calculerCoordonneesBordure();
+	var parametres = {
+		"source" : source,
-	// generer l'URL du script a interroger sur le serveur
+		"num_taxon" : num_taxon,
+		"referentiel" : referentiel,
+		"dept" : dept,
-	bordure = map.getBounds();
+		"auteur" : auteur,
-	var coordonneesBordure = calculerCoordonneesBordure();
+		"bbox" : coordonneesBordure,
-	var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,
-			"utilisateur" : utilisateur, "bbox" : coordonneesBordure, "zoom" : map.getZoom()};
-	url = urlBase + source + "/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 + ";})()");
+		"zoom" : map.getZoom()
-		if (typeof(data) != 'undefined' && typeof(data.features) != 'undefined') {
+	};
-			ajouterObjets(data);
+	url = urlBase + "stations?" + convertirEnParametresUrl(parametres);
 	fonctionCallback = traiterDonneesStations;
 	executerAJAX();
 	executerAJAX();
 function calculerCoordonneesBordure() {
-	var ouest = bordure.getSouthWest().lng,
+	var bordure = map.getBounds();
-		sud = Math.max(bordure.getSouthWest().lat, -85.051129),
+	var ouest = bordure.getSouthWest().lng,
-		est = bordure.getNorthEast().lng,
+		sud = Math.max(bordure.getSouthWest().lat, -85.051129),
-		nord = Math.min(bordure.getNorthEast().lat, 85.051129);
+		est = bordure.getNorthEast().lng,
 	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;
+	coucheSites.clearLayers();
-	// ajout des nouveaux points a la couche
+	var contientMailles = (data.features[0].properties.typeSite == 'MAILLE');
-	for (var i = 0; i < data.features.length; i ++) {
-		var typeSite = data.features[i].properties.typeSite;
-		var objet = null;
-		switch (typeSite) {
-			case 'MAILLE' : {
+	for (var index = 0; index < data.features.length; index ++) {
-				contientMailles = true;
+		switch (data.features[index].properties.typeSite) {
-				ajouterMaille(data.features[i]);
-				break;
+			case 'MAILLE'  : ajouterMaille(data.features[index]);
-			}
-			case 'COMMUNE' :
+				break;
-			case 'STATION' : {
+			case 'COMMUNE' :
-				ajouterPoint(data.features[i]);
-				break;
+			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 = [];
 	// afficher le nombre de points inclus dans la maille
 	afficherNombreStationsDansMaille(objet);
+}
-function afficherNombreStationsDansMaille(maille) {
-	var recul = 0;
+function afficherNombreStationsDansMaille(maille) {
-	if (maille.nombrePoints >= 10000) {
-		recul = 14;
+	// comme la div qui contiendra la valeur du nombre de stations va se placer dans la page
-	} 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) {
-		recul = 5;
 	var decalage = calculerDecalagePositionnementNombre(maille.nombrePoints);
 	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
 	});
 	});
 	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],
+		pas = 26,
-function getColor(nbPoints) {
+		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+')';
-	if (nbPoints >= 2500) {
-		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) {
+		codeHexa =  'rgb(231,198,64)';
 		return '#E7E040';
 	return codeHexa;*/
 }
+function ajouterPoint(feature) {
 	var iconePoint = new L.Icon({ iconUrl : pointImageUrl,   iconSize : [16, 16] }),
-function ajouterPoint(feature) {
+		iconeCommune   = new L.Icon({ iconUrl : communeImageUrl, iconSize : [24, 32] }),
-	var point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),
+		icone = (feature.properties.typeSite == 'STATION') ? iconePoint : iconeCommune,
-		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,
-		type : feature.properties.typeSite,
+			icon : icone,
-		title : feature.properties.nom
+			type : feature.properties.typeSite,
-	}).addTo(map);
+			title : feature.properties.nom
-	// evenement onclick sur marqueur pour recuperer les observations sur ce point
+		}).addTo(map);
-	marker.on('click', clicSurMarqueur);
-	coucheSites.addLayer(marker);
-}
 	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');
-		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]
+function afficherLegende() {
-				+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+') + '</div>';
+	legende = new L.Control({position : 'bottomright'});
+	legende.onAdd = function(map) {
+		return construireContenuHtmlLegende();
+	};
-		}
+	map.addControl(legende);
+}
-		return div;
+function construireContenuHtmlLegende() {
+	var div = L.DomUtil.create('div', 'info');
+	div.innerHTML = '<h4>' + titreLegende + '</h4>';
-	};
+	var seuils = [1, 10, 50 ,100, 500, 1000, 2500];
-	map.addControl(legende);
+	var labels = [];
+	for (var i = 0; i < seuils.length; i ++) {
+		div.innerHTML +=
+			'<div class="legend">'+
+				'<span style="background:' + getColor(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 masquerLegende() {
 	map.removeControl(legende);
+	legende = null;
+}
-}
+function surClicMarqueur(event) {
+	var latitude = event.target.getLatLng().lat;
+	var longitude = event.target.getLatLng().lng;
+	pointClique = event.target;
-function clicSurMarqueur(event) {
+	afficherMessageChargement('observations');
+	var parametres = {
+		"source" : source,
+		"num_taxon" : num_taxon,
+		"referentiel" : referentiel,
-	// centrer la carte sur le marqueur
+		"auteur" : auteur,
-	var latitude = event.target.getLatLng().lat;
+		"longitude" : longitude,
-	var longitude = event.target.getLatLng().lng;
+		"latitude" : latitude
-	pointClique = event.target;
+	};
-	afficherMessageChargement('observations');
+	url = urlBase + "observations?" + convertirEnParametresUrl(parametres);
-	// charger les observations se trouvant sur ce point
-	var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,
+	fonctionCallback = traiterDonneesObservations;
-		"utilisateur" : utilisateur, "longitude" : longitude, "latitude" : latitude};
-	url = urlBase + source + "/observations?" + convertirEnParametresUrl(parametres);
-	fonctionCallback = function(JSONtext) {
+	executerAJAX();
-		masquerMessageChargement();
 		if (requeteChargementPoints.status != 200 && requeteChargementPoints.status != 304
-				&& typeof(JSONtext) != 'undefined') {
-			alert(JSONtext);
+function traiterDonneesObservations() {
-			return;
 	masquerMessageChargement();
 	var texte = requeteChargementPoints.responseText;
-		obsJSON = eval("(function(){return " + JSONtext + ";})()");
-		// vider la liste des observations de l'infobulle precedente
+	if (!retourRequeteOK()) {
-		while (obsStation.length > 0) {
+		alert(texte);
-			obsStation.pop();
+	} else {
-		}
 		if (obsJSON.total > 0) {
+		obsJSON = eval("(function(){return " + texte + ";})()");
+		viderListeObservations();
+		if (obsJSON.total > 0) {
-			// centrer la vue de la carte sur la station
-			map.setView(new L.LatLng(latitude, longitude), map.getZoom());
-			// afficher les observations dans une infobulle
+			doitRafraichirCarte = false;
+			map.setView(new L.LatLng(pointClique.getLatLng().lat, pointClique.getLatLng().lng), map.getZoom());
-			afficherInfoBulle();
-		} else if (infoBulle != null)  {
+			afficherInfoBulle();
-			// supprimer l'infobulle
+		} else if (infoBulle != null)  {
 			masquerInfoBulle();
+		}
+	}
-	executerAJAX();
+}
+function viderListeObservations() {
-///////////////////////////////////////
+	obsStation = new Array();
-//             INFOBULLE             //
 ///////////////////////////////////////
+// ====================================================================
+//  Gestion de l'infobulle
+var obsJSON = null,
+	pointClique = null,
+	obsStation = [],
+	typeAffichage = "";
+function afficherInfoBulle() {
+	var latitude = pointClique.getLatLng().lat;
+	var longitude = pointClique.getLatLng().lng;
+	infoBulle = new L.Popup({maxWidth : definirLargeurInfoBulle(), maxHeight : 350});
+	infoBulle.setLatLng(new L.LatLng(latitude, longitude));
+	infoBulle.setContent($("#tpl-obs").html());
+	infoBulle.openOn(map);
+	remplirContenuPopup();
+}
+function definirLargeurInfoBulle() {
+	var largeurViewPort = $(window).width();
-var infoBulle = null,
+	var lageurInfoBulle = null;
-	obsJSON = null,
+	if (largeurViewPort < 800) {
-	pointClique = null,
+		largeurInfoBulle = 400;
-	obsStation = [],
+	} else if (largeurViewPort >= 800 && largeurViewPort < 1200) {
-	typeAffichage = "";
+		largeurInfoBulle = 500;
 	} else if (largeurViewPort >= 1200) {

Subversion Repositories eFlore/Applications.moissonnage

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