| 1,9 → 1,9 |
|---|
| // Javascript Document |
| |
| |
| // ============================================================== |
| //============================================================== |
| // FONCTIONS ADDITIONNELLES POUR GERER LES URLS |
| function convertirEnParametresUrl(objet) { |
| convertirEnParametresUrl = function(objet) { |
| var parametresUrl = ''; |
| for (attribut in objet) { |
| if (typeof(objet[attribut]) == 'function' || typeof(objet[attribut]) == 'undefined' || |
| 14,53 → 14,39 |
|---|
| return parametresUrl; |
| }; |
| |
| function estParametreDansUrl(nomParametre) { |
| var estDansUrl = false; |
| 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) { |
| estDansUrl = true; |
| return true; |
| } |
| } |
| return estDansUrl; |
| return false; |
| }; |
| |
| // ============================================================= |
| //============================================================= |
| |
| |
| |
| 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]], |
| layers : [couchePlanGoogle] |
| maxBounds : [[-85.051129, -180], [85.051129, 180]] |
| }, |
| legende = null, |
| infoBulle = null; |
| 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, |
| doitRafraichirCarte = true, |
| timer = null, |
| url = ''; |
| |
| 76,7 → 62,7 |
|---|
| initialiserListeners(); |
| initialiserPanneauControle(); |
| chargerLimitesCommunales(); |
| if (!estParametreDansUrl('source')) { |
| if (!parametreDansUrl('source')) { |
| initialiserSources(); |
| } |
| programmerRafraichissementCarte(); |
| 84,9 → 70,6 |
|---|
| |
| $(window).resize(function() { |
| dimensionnerCarte(); |
| if (infoBulle != null) { |
| redimensionnerPopup(); |
| } |
| }); |
| |
| |
| 97,11 → 80,30 |
|---|
| |
| 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, |
| 110,12 → 112,26 |
|---|
| }); |
| 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() { |
| map.on('moveend', surChangementVueSurCarte); |
| map.on('zoomend', surChangementVueSurCarte); |
| // evenements sur deplacement ou zoom sur la carte |
| map.on('moveend', programmerRafraichissementCarte); |
| map.on('zoomend', programmerRafraichissementCarte); |
| |
| map.on('popupclose', function(e) { |
| masquerInfoBulle(); |
| programmerRafraichissementCarte(); |
| }); |
| } |
| |
| 127,15 → 143,12 |
|---|
| }; |
| |
| var overlayMaps = {}; |
| if (!estParametreDansUrl('source')) { |
| if (!parametreDansUrl('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'); |
| 142,21 → 155,11 |
|---|
| 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) { |
| 173,13 → 176,6 |
|---|
| }); |
| } |
| |
| function surChangementVueSurCarte() { |
| if (doitRafraichirCarte == false) { |
| doitRafraichirCarte = true; |
| } else { |
| programmerRafraichissementCarte(); |
| } |
| } |
| |
| function programmerRafraichissementCarte() { |
| if(timer != null) { |
| 203,7 → 199,7 |
|---|
| |
| |
| function changerSource(projetClique) { |
| // deselctionner les autres boutons des controles d'overlays dans le panel |
| // 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; |
| 237,7 → 233,7 |
|---|
| requeteChargementPoints.abort(); |
| } |
| requeteChargementPoints = $.getJSON(url).complete(function() { |
| fonctionCallback(); |
| fonctionCallback(requeteChargementPoints.responseText); |
| }); |
| } |
| |
| 245,37 → 241,38 |
|---|
| 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 = { |
| "source" : source, |
| "num_taxon" : num_taxon, |
| "referentiel" : referentiel, |
| "dept" : dept, |
| "auteur" : auteur, |
| "bbox" : coordonneesBordure, |
| "zoom" : map.getZoom() |
| }; |
| url = urlBase + "stations?" + convertirEnParametresUrl(parametres); |
| var parametres = {"num_taxon" : num_taxon, "referentiel" : referentiel, "dept" : dept, |
| "utilisateur" : utilisateur, "bbox" : coordonneesBordure, "zoom" : map.getZoom()}; |
| url = urlBase + source + "/stations?" + convertirEnParametresUrl(parametres); |
| |
| fonctionCallback = traiterDonneesStations; |
| 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 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) { |
| 288,43 → 285,40 |
|---|
| } 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 = (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]); |
| 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[index]); |
| case 'STATION' : { |
| ajouterPoint(data.features[i]); |
| break; |
| } |
| } |
| } |
| if (contientMailles && legende == null) { |
| // afficher/masquer la legende |
| if (contientMailles) { |
| afficherLegende(); |
| } else if (legende != null) { |
| } else { |
| masquerLegende(); |
| } |
| } |
| |
| |
| function ajouterMaille(feature) { |
| var coordonnees = []; |
| for (var i = 0; i < feature.geometry.coordinates.length; i++) { |
| 348,15 → 342,20 |
|---|
| } |
| |
| function afficherNombreStationsDansMaille(maille) { |
| // 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 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 - decalage, (sudMaille+nordMaille)/2); |
| centreMaille = new L.Point((ouestMaille + estMaille) / 2 - recul, (sudMaille + nordMaille) / 2); |
| |
| var divIcon = new L.divIcon({ |
| className : "nombre-sites", |
| html : maille.nombrePoints |
| 369,18 → 368,6 |
|---|
| 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) |
| 389,160 → 376,126 |
|---|
| } |
| } |
| |
| // 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 ++; |
| 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'; |
| } |
| 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 iconePoint = new L.Icon({ iconUrl : pointImageUrl, iconSize : [16, 16] }), |
| iconeCommune = new L.Icon({ iconUrl : communeImageUrl, iconSize : [24, 32] }), |
| var point = new L.LatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]), |
| 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); |
| marker.on('click', surClicMarqueur); |
| 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) { |
| return 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"><i style="background:' + getColor(seuils[i] + 1) + '"></i>' + seuils[i] |
| + (i + 1 < seuils.length ? '–' + seuils[i + 1] : '+') + '</div>'; |
| } |
| return div; |
| }; |
| map.addControl(legende); |
| } |
| |
| 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>'; |
| function masquerLegende() { |
| if (legende != null) { |
| map.removeControl(legende); |
| legende = null; |
| } |
| return div; |
| } |
| |
| function masquerLegende() { |
| map.removeControl(legende); |
| legende = null; |
| } |
| |
| |
| |
| function surClicMarqueur(event) { |
| 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'); |
| 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 { |
| // 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 " + texte + ";})()"); |
| viderListeObservations(); |
| obsJSON = eval("(function(){return " + JSONtext + ";})()"); |
| // vider la liste des observations de l'infobulle precedente |
| while (obsStation.length > 0) { |
| obsStation.pop(); |
| } |
| if (obsJSON.total > 0) { |
| doitRafraichirCarte = false; |
| map.setView(new L.LatLng(pointClique.getLatLng().lat, pointClique.getLatLng().lng), map.getZoom()); |
| // 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(); |
| } |
| |
| function viderListeObservations() { |
| obsStation = new Array(); |
| } |
| |
| /////////////////////////////////////// |
| // INFOBULLE // |
| /////////////////////////////////////// |
| |
| // ==================================================================== |
| // Gestion de l'infobulle |
| |
| var obsJSON = null, |
| 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 : definirLargeurInfoBulle(), maxHeight : 350}); |
| 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); |
| 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() { |
| infoBulle.openOn(map); |
| |
| // remplir le contenu de la popup |
| ajouterTableauTriable("#obs-tableau"); |
| ajouterTitre(); |
| afficherOnglets(); |
