Subversion Repositories eFlore/Applications.moissonnage

Rev

Rev 28 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

// 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);
}