Subversion Repositories eFlore/Applications.moissonnage

// Javascript Document

//==============================================================

//  FONCTIONS ADDITIONNELLES POUR GERER LES URLS

convertirEnParametresUrl = function(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;

};

parametreDansUrl = function(nomParametre) {

	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;

		}

	}

	return false;

};

//=============================================================

var map = null,

optionsCarte = {

	center : new L.LatLng(46, 2),

	zoom : 6,

	minZoom : 3,

	maxBounds : [[-85.051129, -180], [85.051129, 180]]

},

coucheOSM, couchePlanGoogle, coucheSatelliteGoogle,

bordure = null,

legende = 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,

timer = null,

url = '';

$(document).ready(function() {

	initialiserWidget();

});

function initialiserWidget() {

	initialiserCarte();

	initialiserListeners();

	initialiserPanneauControle();

	chargerLimitesCommunales();

	if (!parametreDansUrl('source')) {

		initialiserSources();

	}

	programmerRafraichissementCarte();

}

$(window).resize(function() {

	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

	};

	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('zoomend', programmerRafraichissementCarte);

	map.on('popupclose', function(e) {

		masquerInfoBulle();

	});

}

function initialiserPanneauControle() {

	var baseMaps = {

		"OSM" : coucheOSM,

		"Plan" : couchePlanGoogle,

		"Satellite" : coucheSatelliteGoogle

	};

	var overlayMaps = {};

	if (!parametreDansUrl('source')) {

		for (var index = 0; index < nomSources.length; index ++) {

			overlayMaps[nomSources[index]] = new L.LayerGroup();

		}

	}

	L.control.layers(baseMaps, overlayMaps).addTo(map);

	// 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();

	couchePlanGoogle.bringToFront();

	coucheSatelliteGoogle.bringToBack();

}

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 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

	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);

	});

}

function requeteEnCours() {

	return (requeteChargementPoints != null && requeteChargementPoints.readyState != 4);

}

function chargerLocalisations() {

	// generer l'URL du script a interroger sur le serveur

	bordure = map.getBounds();

	var coordonneesBordure = calculerCoordonneesBordure();

	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 + ";})()");

		if (typeof(data) != 'undefined' && typeof(data.features) != 'undefined') {

			ajouterObjets(data);

		}

	}

	executerAJAX();

}

function calculerCoordonneesBordure() {

	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 ajouterObjets(data) {

	coucheSites.clearLayers();

	var contientMailles = false;

	// ajout des nouveaux points a la couche

	for (var i = 0; i < data.features.length; i ++) {

		var typeSite = data.features[i].properties.typeSite;

		var objet = null;

		switch (typeSite) {

			case 'MAILLE' : {

				contientMailles = true;

				ajouterMaille(data.features[i]);

				break;

			}

			case 'COMMUNE' :

			case 'STATION' : {

				ajouterPoint(data.features[i]);

				break;

			}

		}

	}

	// afficher/masquer la legende

	if (contientMailles) {

		afficherLegende();

	} else {

		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) {

		recul = 14;

	} else if (maille.nombrePoints >= 1000) {

		recul = 9;

	} else if (maille.nombrePoints >= 100) {

		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);

	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 clicSurMaille(event) {

	if (event.target._zIndex != null) {

		map.fitBounds(event.target.options.maille)

	} else {

		map.fitBounds(event.target.getBounds());

	}

}

function getColor(nbPoints) {

	if (nbPoints >= 2500) {

		return '#E74440';

	} else if (nbPoints >= 1000) {

		return '#E75E40';

	} else if (nbPoints >= 500) {

		return '#E77840';

	} else if (nbPoints >= 100) {

		return '#E79240';

	} else if (nbPoints >= 50) {

		return '#E7AC40';

	} else if (nbPoints >= 10) {

		return '#E7C640';

	} else {

		return '#E7E040';

	}

}

function ajouterPoint(feature) {

	var point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),

		icone = (feature.properties.typeSite == 'STATION') ? iconePoint : iconeCommune,

		marker = new L.Marker(point, {

		icon : icone,

		type : feature.properties.typeSite,

		title : feature.properties.nom

	}).addTo(map);

	// evenement onclick sur marqueur pour recuperer les observations sur ce point

	marker.on('click', clicSurMarqueur);

	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]

				+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+') + '</div>';

		}

		return div;

	};

	map.addControl(legende);

}

function masquerLegende() {

	if (legende != null) {

		map.removeControl(legende);

		legende = null;

	}

}

function clicSurMarqueur(event) {

	// centrer la carte sur le marqueur

	var latitude = event.target.getLatLng().lat;

	var longitude = event.target.getLatLng().lng;

	pointClique = event.target;

	afficherMessageChargement('observations');

	// charger les observations se trouvant sur ce point

	var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,

		"utilisateur" : utilisateur, "longitude" : longitude, "latitude" : latitude};

	url = urlBase + source + "/observations?" + convertirEnParametresUrl(parametres);

	fonctionCallback = function(JSONtext) {

		masquerMessageChargement();

		if (requeteChargementPoints.status != 200 && requeteChargementPoints.status != 304

				&& typeof(JSONtext) != 'undefined') {

			alert(JSONtext);

			return;

		}

		obsJSON = eval("(function(){return " + JSONtext + ";})()");

		// vider la liste des observations de l'infobulle precedente

		while (obsStation.length > 0) {

			obsStation.pop();

		}

		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

			afficherInfoBulle();

		} else if (infoBulle != null)  {

			// supprimer l'infobulle

			masquerInfoBulle();

		}

	}

	executerAJAX();

}

///////////////////////////////////////

//             INFOBULLE             //

///////////////////////////////////////

var infoBulle = null,

	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.setLatLng(new L.LatLng(latitude, longitude));

	// afficher la popup sur la carte

	infoBulle.setContent($("#tpl-obs").html());

	infoBulle.openOn(map);

	// remplir le contenu de la popup

	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: {

			1: {

            	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);

}