Subversion Repositories eFlore/Applications.moissonnage

Compare Revisions

Ignore whitespace Rev 27 → Rev 28

/trunk/widget/modules/carto/squelettes/scripts/carto.js
1,9 → 1,9
// 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' ||
14,39 → 14,53
return parametresUrl;
};
 
parametreDansUrl = function(nomParametre) {
function estParametreDansUrl(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 = '';
 
62,7 → 76,7
initialiserListeners();
initialiserPanneauControle();
chargerLimitesCommunales();
if (!parametreDansUrl('source')) {
if (!estParametreDansUrl('source')) {
initialiserSources();
}
programmerRafraichissementCarte();
70,6 → 84,9
 
$(window).resize(function() {
dimensionnerCarte();
if (infoBulle != null) {
redimensionnerPopup();
}
});
 
 
80,30 → 97,11
 
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,
112,26 → 110,12
});
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('moveend', surChangementVueSurCarte);
map.on('zoomend', surChangementVueSurCarte);
map.on('popupclose', function(e) {
masquerInfoBulle();
programmerRafraichissementCarte();
});
}
 
143,12 → 127,15
};
 
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');
155,11 → 142,21
selecteursFonds[0].checked = false;
selecteursFonds[1].checked = true;
selecteursFonds[2].checked = false;
coucheOSM.bringToBack();
couchePlanGoogle.bringToFront();
coucheSatelliteGoogle.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});
coucheDepartement.on("loaded", function(e) {
map.fitBounds(e.target.getBounds());
});
map.addLayer(coucheDepartement);
}
}
}
 
function initialiserSources() {
overlays = $('.leaflet-control-layers-overlays .leaflet-control-layers-selector');
$.each(overlays, function (index, input) {
176,6 → 173,13
});
}
 
function surChangementVueSurCarte() {
if (doitRafraichirCarte == false) {
doitRafraichirCarte = true;
} else {
programmerRafraichissementCarte();
}
}
 
function programmerRafraichissementCarte() {
if(timer != null) {
199,7 → 203,7
 
 
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;
233,7 → 237,7
requeteChargementPoints.abort();
}
requeteChargementPoints = $.getJSON(url).complete(function() {
fonctionCallback(requeteChargementPoints.responseText);
fonctionCallback();
});
}
 
241,38 → 245,37
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 = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept,
"utilisateur" : utilisateur, "bbox" : coordonneesBordure, "zoom" : map.getZoom()};
url = urlBase + source + "/stations?" + convertirEnParametresUrl(parametres);
var parametres = {
"source" : source,
"num_taxon" : num_taxon,
"referentiel" : referentiel,
"dept" : dept,
"auteur" : auteur,
"bbox" : coordonneesBordure,
"zoom" : map.getZoom()
};
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() {
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) {
285,40 → 288,43
} 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;
// 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]);
var contientMailles = (data.features[0].properties.typeSite == 'MAILLE');
for (var index = 0; index < data.features.length; index ++) {
switch (data.features[index].properties.typeSite) {
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++) {
342,20 → 348,15
}
 
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;
}
// comme la div qui contiendra la valeur du nombre de stations va se placer dans la page
// au centre de la maille (et qui va servir de point d'ancrage pour le bord gauche par defaut)
// il est necessaire de creer un decalage vers la gauche en fonction du nombre de chiffres
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
368,6 → 369,18
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)
376,126 → 389,160
}
}
 
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';
// 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,
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+')';
/*var codeHexa = 'rgb(231,224,64)';
if (nombrePoints >= 2500) {
codeHexa = 'rgb(231,68,64)';
} else if (nombrePoints >= 1000) {
codeHexa = 'rgb(231,94,64)';
} else if (nombrePoints >= 500) {
codeHexa = 'rgb(231,120,64)';
} else if (nombrePoints >= 100) {
codeHexa = 'rgb(231,146,64)';
} else if (nombrePoints >= 50) {
codeHexa = 'rgb(231,172,64)';
} else if (nombrePoints >= 10) {
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,
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);
icon : icone,
type : feature.properties.typeSite,
title : feature.properties.nom
}).addTo(map);
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]
+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+') + '</div>';
}
return div;
return construireContenuHtmlLegende();
};
map.addControl(legende);
}
 
function masquerLegende() {
if (legende != null) {
map.removeControl(legende);
legende = null;
function construireContenuHtmlLegende() {
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:' + getColor(seuils[i] + 1) + '"></span>'+
seuils[i]+ (i + 1 < seuils.length ? '&ndash;' + seuils[i + 1] : '+')+
'</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');
// 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;
}
var parametres = {
"source" : source,
"num_taxon" : num_taxon,
"referentiel" : referentiel,
"auteur" : auteur,
"longitude" : longitude,
"latitude" : latitude
};
url = urlBase + "observations?" + convertirEnParametresUrl(parametres);
fonctionCallback = traiterDonneesObservations;
executerAJAX();
}
 
function traiterDonneesObservations() {
masquerMessageChargement();
var texte = requeteChargementPoints.responseText;
if (!retourRequeteOK()) {
alert(texte);
} else {
obsJSON = eval("(function(){return " + JSONtext + ";})()");
// vider la liste des observations de l'infobulle precedente
while (obsStation.length > 0) {
obsStation.pop();
}
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) {
// supprimer l'infobulle
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);
// remplir le contenu de la popup
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());
}
 
function remplirContenuPopup() {
ajouterTableauTriable("#obs-tableau");
ajouterTitre();
afficherOnglets();