WebSVN – eFlore/Applications.cel – /branches/v2.28-semoir/widget/modules/saisie2/squelettes/js/carte.js

/**
 * Constructeur WidgetSaisie par défaut
 */
function WidgetSaisie() {
        this.map = null;
        this.marker = null;
        this.latLng = null; // position en cours
        this.geocoder = null;
        this.serviceNomCommuneUrl = null;
        this.serviceNomCommuneUrlAlt = null;
        this.googleMapMarqueurUrl = null;
        this.chargementIconeUrl = null;
        this.chargementImageIconeUrl = null;
}

/**
 * Initialisation du widget
 */
WidgetSaisie.prototype.init = function() {
        this.initCarto();
        this.initEvts();
};

/**
 * Initialise la cartographie
 */
WidgetSaisie.prototype.initCarto = function() {
        this.initialiserGoogleMap();
        this.initialiserAutocompleteCommune();
};

/**
 * Initialise les écouteurs d'événements
 */
WidgetSaisie.prototype.initEvts = function() {
        // Autocompletion du champ adresse
        $("#carte-recherche").on('focus', function() {
                $(this).select();
        });
        $("#carte-recherche").on('mouseup', function(event) {// Pour Safari...
                event.preventDefault();
        });
        $("#carte-recherche").keypress(function(e) {
                if (e.which == 13) {
                        e.preventDefault();
                }
        });
};

/**
 * Initialise l'autocomplétion de la commune, en fonction du référentiel
 */
WidgetSaisie.prototype.initialiserAutocompleteCommune = function() {
        var geocoderOptions = {
        },
        addressSuffix = '',
        lthis = this;

        switch(this.nomSciReferentiel) {
                case 'isfan':
                        // Si des résultats se trouvent dans ce rectangle, ils apparaîtront en premier.
                        // Ça marche moyen...
                        geocoderOptions.bounds = new google.maps.LatLngBounds(
                                new google.maps.LatLng(20.756114, -22.023927),
                                new google.maps.LatLng(38.065392, 33.78662)
                        );
                        break;
                case 'apd':
                        geocoderOptions.bounds = new google.maps.LatLngBounds(
                                        new google.maps.LatLng(-6.708254, -26.154786),
                                        new google.maps.LatLng(27.488781, 30.490722)
                                );
                        break;
                case 'bdtfx':
                case 'bdtxa':
                        geocoderOptions.region = 'fr';
                        addressSuffix = ', France';
        }

        $("#carte-recherche").autocomplete({
                //Cette partie utilise geocoder pour extraire des valeurs d'adresse
                source: function(request, response) {
                        geocoderOptions.address = request.term + addressSuffix;
                        lthis.geocoder.geocode( geocoderOptions, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                        response($.map(results, function(item) {
                                                var retour = {
                                                        label: item.formatted_address,
                                                        value: item.formatted_address,
                                                        latitude: item.geometry.location.lat(),
                                                        longitude: item.geometry.location.lng()
                                                };
                                                return retour;
                                        }));
                                } else {
                                        lthis.afficherErreurGoogleMap(status);
                                }
                        });
                },
                // Cette partie est executee a la selection d'une adresse
                select: function(event, ui) {
                        lthis.latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
                        lthis.deplacerMarker(lthis.latLng);
                }
        });
};

WidgetSaisie.prototype.afficherErreurGoogleMap = function(status) {
        if (this.debug) {
                $('#dialogue-google-map .contenu').empty().append(
                        '<pre class="msg-erreur">'+
                        "Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+
                        '</pre>');
                this.afficherPanneau('#dialogue-google-map');
        }
};

WidgetSaisie.prototype.surDeplacementMarker = function() {
        this.latLng = this.marker.getPosition();
        this.trouverCommune(this.latLng);
        this.mettreAJourMarkerPosition(this.marker.getPosition());
};

WidgetSaisie.prototype.surClickDansCarte = function(event) {
        this.latLng = event.latLng;
        this.deplacerMarker(this.latLng);
};

/**
 * Place le marqueur aux coordonnées indiquées dans les champs "latitude" et "longitude"
 */
WidgetSaisie.prototype.geolocaliser = function() {
        var latitude = $('#latitude').val();
        var longitude = $('#longitude').val();
        this.latLng = new google.maps.LatLng(latitude, longitude);
        this.deplacerMarker(this.latLng);
};

WidgetSaisie.prototype.initialiserGoogleMap = function(localisationNavigateur) {
        // par défaut on tente de localiser le navigateur (avec son sextant)
        if (localisationNavigateur === undefined) {
                localisationNavigateur = true;
        }

        var lthis = this;
        var latLng,
                zoomDefaut;
        // Carte @TODO mettre ça dans la config
        if(this.nomSciReferentiel == 'bdtre') {
                latLng = new google.maps.LatLng(-21.10, 55.30);// Réunion
                zoomDefaut = 7;
        } else if(this.nomSciReferentiel == 'lbf') {
                latLng = new google.maps.LatLng(33.72211, 35.8603);// Liban
                zoomDefaut = 7;
        } else if(this.nomSciReferentiel == 'bdtxa') {
                latLng = new google.maps.LatLng(14.6, -61.08334);// Fort-De-France
                zoomDefaut = 8;
        } else if(this.nomSciReferentiel == 'isfan') {
                latLng = new google.maps.LatLng(29.28358, 10.21884);// Afrique du Nord
                zoomDefaut = 4;
        } else if(this.nomSciReferentiel == 'apd') {
                latLng = new google.maps.LatLng(8.75624, 1.80176);// Afrique de l'Ouest et du Centre
                zoomDefaut = 4;
        } else if(this.nomSciReferentiel == 'florical') {
                latLng = new google.maps.LatLng(-21.40722, 165.4541);// Nouvelle-Calédonie
                zoomDefaut = 7;
        } else if(this.nomSciReferentiel == 'aublet') {
                latLng = new google.maps.LatLng(3.80287, -53.09692);// Guyane
                zoomDefaut = 7;
        } else {
                latLng = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France - @WARNING Prémilhat !! :)
                zoomDefaut = 5;
        }

        var options = {
                zoom: zoomDefaut,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                mapTypeControlOptions: {
                        mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
        };

        // Ajout de la couche OSM à la carte
        osmMapType = new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                        return "http://tile.openstreetmap.org/" +
                        zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                isPng: true,
                alt: 'OpenStreetMap',
                name: 'OSM',
                maxZoom: 19
        });

        // Création de la carte Google
        this.map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
        this.map.mapTypes.set('OSM', osmMapType);

        // Création du Geocoder
        this.geocoder = new google.maps.Geocoder();

        // Marqueur google draggable
        this.marker = new google.maps.Marker({
                map: this.map,
                draggable: true,
                title: 'Ma station',
                icon: this.googleMapMarqueurUrl,
                position: latLng
        });

        this.initialiserMarker(latLng);

        // Tentative de geocalisation depuis le navigateur
        if (localisationNavigateur && navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                        var latitude = position.coords.latitude;
                        var longitude = position.coords.longitude;
                        lthis.latLng = new google.maps.LatLng(latitude, longitude);
                        lthis.deplacerMarker(lthis.latLng);
                });
        }

        // intéraction carte
        $("#geolocaliser").on('click', this.geolocaliser.bind(this));
        google.maps.event.addListener(this.marker, 'dragend', this.surDeplacementMarker.bind(this));
        google.maps.event.addListener(this.map, 'click', this.surClickDansCarte.bind(this));
};

WidgetSaisie.prototype.initialiserMarker = function(latLng) {
        if (this.marker != undefined) {
                this.marker.setPosition(latLng);
                this.map.setCenter(latLng);
                // au chargement de la carte, la position est nulle
                this.viderMarkerPosition();
        }
};

WidgetSaisie.prototype.deplacerMarker = function(latLng) {
        if (this.marker != undefined) {
                this.marker.setPosition(latLng);
                this.map.setCenter(latLng);
                this.mettreAJourMarkerPosition(latLng);
                this.trouverCommune(latLng);
        }
};

WidgetSaisie.prototype.viderMarkerPosition = function() {
        this.remplirChampLatitude(null);
        this.remplirChampLongitude(null);
};

WidgetSaisie.prototype.mettreAJourMarkerPosition = function(latLng) {
        var lat = latLng.lat().toFixed(5);
        var lng = latLng.lng().toFixed(5);
        this.remplirChampLatitude(lat);
        this.remplirChampLongitude(lng);
};

/**
 * Définit la valeur de latitude, à travers la "value" du champ "#latitude";
 * pour définir une valeur vraiment vide (et non 0), passer null en argument
 */
WidgetSaisie.prototype.remplirChampLatitude = function(latDecimale) {
        var lat = '';
        if (latDecimale !== null) {
                lat = Math.round(latDecimale * 100000) / 100000;
        }
        $('#latitude').val(lat);
};

/**
 * Définit la valeur de longitude, à travers la "value" du champ "#longitude";
 * pour définir une valeur vraiment vide (et non 0), passer null en argument
 */
WidgetSaisie.prototype.remplirChampLongitude = function(lngDecimale) {
        var lng = '';
        if (lngDecimale !== null) {
                lng = Math.round(lngDecimale * 100000) / 100000;
        }
        $('#longitude').val(lng);
};

WidgetSaisie.prototype.trouverCommune = function(pos) {
        if (this.latLng == null) { // tentative de protection contre le démon de Prémilhat
                return;
        }
        var lthis = this;
        $(function() {

                var url_service = lthis.serviceNomCommuneUrl;

                var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
                $.ajax({
                        url : urlNomCommuneFormatee,
                        type : "GET",
                        dataType : "jsonp",
                        beforeSend : function() {
                                $(".commune-info").empty();
                                $("#dialogue-erreur .alert-txt").empty();
                        },
                        success : function(data, textStatus, jqXHR) {
                                $(".commune-info").empty();
                                $("#commune-nom").append(data.nom);
                                $("#commune-code-insee").append(data.codeINSEE);
                                $("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
                        },
                        statusCode : {
                            500 : function(jqXHR, textStatus, errorThrown) {
                                        if (this.debug) {
                                                $("#dialogue-erreur .alert-txt").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
                                                reponse = jQuery.parseJSON(jqXHR.responseText);
                                                var erreurMsg = "";
                                                if (reponse != null) {
                                                        $.each(reponse, function (cle, valeur) {
                                                                erreurMsg += valeur + "<br />";
                                                        });
                                                }

                                                $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
                                        }
                            }
                        },
                        error : function(jqXHR, textStatus, errorThrown) {
                                if (this.debug) {
                                        $("#dialogue-erreur .alert-txt").append('<p class="msg">Une erreur Ajax est survenue lors de la recherche de la commune.</p>');
                                        reponse = jQuery.parseJSON(jqXHR.responseText);
                                        var erreurMsg = "";
                                        if (reponse != null) {
                                                $.each(reponse, function (cle, valeur) {
                                                        erreurMsg += valeur + "<br />";
                                                });
                                        }

                                        $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
                                }
                        },
                        complete : function(jqXHR, textStatus) {
                                var debugMsg = extraireEnteteDebug(jqXHR);
                                if (debugMsg != '') {
                                        if (this.debug) {
                                                $("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
                                        }
                                }
                                if ($("#dialogue-erreur .msg").length > 0) {
                                        $("#dialogue-erreur").show();
                                }
                        }
                });
        });
};
Subversion Repositories eFlore/Applications.cel

(root)/branches/v2.28-semoir/widget/modules/saisie2/squelettes/js/carte.js @ 3304 – Rev 3136
