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 © <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, |
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 ? '–' + 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 |