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 © <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 ©' + 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 © <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 ©' + 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 ? '–' + 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 ? '–' + 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(); |