Subversion Repositories eFlore/Applications.moissonnage

Compare Revisions

No changes between revisions

Ignore whitespace Rev 6 → Rev 7

/trunk/widget/modules/carto/squelettes/scripts/carto.js
New file
0,0 → 1,610
// 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);
}
Property changes:
Added: svn:executable
+*
\ No newline at end of property