28,6 → 28,16 |
//+----------------------------------------------------------------------------------------------------------+ |
//UPLOAD PHOTO : Traitement de l'image |
$(document).ready(function() { |
|
$("#effacer-miniature").click(function () { |
supprimerMiniature(); |
}); |
|
$("#fichier").bind('change', function () { |
$("#form-upload").ajaxSubmit(options); |
return false; |
}); |
|
//prepare the form when the DOM is ready |
//create service object(proxy) using SMD (generated by the json result) |
var options = { |
35,30 → 45,25 |
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type) |
resetForm: true // reset the form after successful submit |
}; |
|
// post-submit callback |
function afficherMiniature(reponse) { |
// 'responseXML' is the XML document returned by the server; we use |
// jQuery to extract the content of the message node from the XML doc |
var miniatureUrl = $("miniature-url", reponse).text(); |
var imgNom = $("image-nom", reponse).text(); |
$("#miniature").empty(); |
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'); |
console.log(imgNom); |
console.log(miniatureUrl); |
}; |
|
$("#form-upload").submit(function() { |
// inside event callbacks 'this' is the DOM element so we first |
// wrap it in a jQuery object and then invoke ajaxSubmit |
$(this).ajaxSubmit(options); |
|
// !!! Important !!! |
// always return false to prevent standard browser submit and page navigation |
return false; |
}); |
}); |
|
function afficherMiniature(reponse) { |
// 'responseXML' is the XML document returned by the server; we use |
// jQuery to extract the content of the message node from the XML doc |
var miniatureUrl = $("miniature-url", reponse).text(); |
var imgNom = $("image-nom", reponse).text(); |
$("#miniature").empty(); |
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'); |
$("#effacer-miniature").show(); |
console.log(imgNom); |
console.log(miniatureUrl); |
} |
|
function supprimerMiniature() { |
$("#miniature").empty(); |
$("#effacer-miniature").hide(); |
} |
|
//+----------------------------------------------------------------------------------------------------------+ |
// GOOGLE MAP |
var geocoder; |
66,19 → 71,39 |
var marker; |
var latLng; |
|
function initialize(){ |
function initialiserGoogleMap(){ |
// Carte |
var latLng = new google.maps.LatLng(43.29545, 5.37458); |
$('#adresse').val('1 rue de la canebiere, 13001'); |
$('#latitude').val('43.29545'); |
$('#longitude').val('5.37458'); |
if (VILLE == 'Montpellier') { |
latLng = new google.maps.LatLng(43.61077, 3.87672); |
} else { |
console.log('Ville:'+VILLE); |
} |
|
var options = { |
zoom: 16, |
center: latLng, |
mapTypeId: google.maps.MapTypeId.SATELLITE |
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 |
}); |
|
map = new google.maps.Map(document.getElementById("map_canvas"), options); //affiche la google map dans la div map_canvas |
// Création de la carte Google |
map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas |
map.mapTypes.set('OSM', osmMapType); |
|
// Geocodeur |
geocoder = new google.maps.Geocoder(); |
92,10 → 117,13 |
icon: GOOGLE_MAP_MARQUEUR_URL, |
position: latLng |
}); |
|
deplacerMarker(latLng); |
} |
|
$(document).ready(function() { |
initialize(); |
|
initialiserGoogleMap(); |
|
$(function() { |
// Tentative de geocalisation |
107,9 → 135,8 |
var geocalisation = new google.maps.LatLng(latitude, longitude); |
marker.setPosition(geocalisation); |
map.setCenter(geocalisation); |
$('#latitude').val(marker.getPosition().lat()); |
$('#longitude').val(marker.getPosition().lng()); |
$('#adresse').val(codeLatLng(marker.getPosition())); |
mettreAJourMarkerPosition(marker.getPosition()); |
}); |
} |
|
117,37 → 144,42 |
$("#adresse").autocomplete({ |
//Cette partie utilise geocoder pour extraire des valeurs d'adresse |
source: function(request, response) { |
geocoder.geocode( {'address': request.term }, function(results, status) { |
response($.map(results, function(item) { |
return { |
label: item.formatted_address, |
value: item.formatted_address, |
latitude: item.geometry.location.lat(), |
longitude: item.geometry.location.lng() |
} |
})); |
geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
response($.map(results, function(item) { |
return { |
label: item.formatted_address, |
value: item.formatted_address, |
latitude: item.geometry.location.lat(), |
longitude: item.geometry.location.lng() |
} |
})); |
} else { |
afficherErreurGoogleMap(status); |
} |
}) |
}, |
// Cette partie est executee a la selection d'une adresse |
select: function(event, ui) { |
$("#latitude").val(ui.item.latitude); |
$("#longitude").val(ui.item.longitude); |
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
marker.setPosition(location); |
map.setCenter(location); |
map.setZoom(20); |
remplirChampLatitude(ui.item.latitude); |
remplirChampLongitude(ui.item.longitude); |
var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
deplacerMarker(latLng); |
map.setCenter(latLng); |
map.setZoom(19); |
} |
}); |
|
// Ajoute un ecouteur sur le marker pour le reverse geocoding |
google.maps.event.addListener(marker, 'drag', function() { |
|
google.maps.event.addListener(marker, 'dragend', function() { |
trouverCommune(marker.getPosition()); |
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
if (results[0]) { |
$('#adresse').val(results[0].formatted_address); |
$('#latitude').val(Math.round(marker.getPosition().lat()*100000)/100000); |
$('#longitude').val(Math.round(marker.getPosition().lng()*100000)/100000); |
mettreAJourMarkerPosition(marker.getPosition()); |
} |
} else { |
afficherErreurGoogleMap(status); |
} |
}); |
}); |
167,11 → 199,112 |
$('#adresse').val(results[0].formatted_address); |
} |
} else { |
alert("Geocoder failed due to: " + status); |
afficherErreurGoogleMap(status); |
} |
}); |
} |
|
function afficherErreurGoogleMap(status) { |
if (DEBUG) { |
$("#dialogue-google-map").empty(); |
$("#dialogue-google-map").append('<pre class="msg-erreur">'+ |
"Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+ |
'</pre>'); |
$("#dialogue-google-map").dialog(); |
} |
} |
|
function deplacerMarker(latLon) { |
if (marker != undefined) { |
marker.setPosition(latLon); |
mettreAJourMarkerPosition(marker.getPosition()); |
trouverCommune(marker.getPosition()); |
} |
} |
|
function mettreAJourMarkerPosition(latLng) { |
var lat = latLng.lat().toFixed(5); |
var lng = latLng.lng().toFixed(5); |
remplirChampLatitude(lat); |
remplirChampLongitude(lng); |
} |
|
function remplirChampLatitude(latDecimale) { |
var lat = Math.round(latDecimale*100000)/100000; |
$('#latitude').val(lat); |
} |
|
function remplirChampLongitude(lngDecimale) { |
var lng = Math.round(lngDecimale*100000)/100000; |
$('#longitude').val(lng); |
} |
|
function trouverCommune(pos) { |
$(function() { |
var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng()); |
$.ajax({ |
url : urlNomCommuneFormatee, |
type : "GET", |
dataType : "jsonp", |
beforeSend : function() { |
$(".commune-info").empty(); |
$("#dialogue-erreur").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 (DEBUG) { |
$("#dialogue-erreur").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").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>'); |
} |
} |
}, |
error : function(jqXHR, textStatus, errorThrown) { |
if (DEBUG) { |
$("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>'); |
reponse = jQuery.parseJSON(jqXHR.responseText); |
var erreurMsg = ""; |
if (reponse != null) { |
$.each(reponse, function (cle, valeur) { |
erreurMsg += valeur + "<br />"; |
}); |
} |
|
$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>'); |
} |
}, |
complete : function(jqXHR, textStatus) { |
if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') { |
var debugMsg = ""; |
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data")); |
if (debugInfos != null) { |
$.each(debugInfos, function (cle, valeur) { |
debugMsg += valeur + "<br />"; |
}); |
$("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>'); |
} |
} |
if ($("#dialogue-erreur .msg").length > 0) { |
$("#dialogue-erreur").dialog(); |
} |
} |
}); |
}); |
} |
|
//+---------------------------------------------------------------------------------------------------------+ |
// FORMULAIRE |
$(document).ready(function() { |
195,7 → 328,6 |
min : 1}, |
rue_cote : "required", |
milieu : "required", |
adresse : "required", |
latitude : { |
required: true, |
range: [-90, 90]}, |
216,30 → 348,13 |
return false; |
}); |
|
/*---Afficher/cacher les coordonnees geographiques----*/ |
|
var showText=" -Afficher-"; |
var hideText=" -Masquer- "; |
|
//créer le lien afficher/masquer |
$("#coordonnees-geo").before("<a href='#' id='toogle_link'>"+showText+"</a>") |
//masquer le contenu |
$("#masque").hide(); |
//bascule le texte d'afficher à masquer |
$("a#toogle_link").click(function() { |
//changer le texte du lien |
if($('a#toogle_link').text()==showText){ |
$('a#toogle_link').text(hideText); |
} else{ |
$('a#toogle_link').text(showText); |
} |
//basuler l'affichage |
$('#masque').toggle('slow'); |
//valeur false pour que le lien ne soit pas suivi |
return false |
$("a.afficher-coord").click(function() { |
$("a.afficher-coord").toggle(); |
$("#coordonnees-geo").toggle('slow'); |
//valeur false pour que le lien ne soit pas suivi |
return false |
}); |
|
/*------obs-----------*/ |
|
var obsNumero = 0; |
$("#ajouter-obs").bind('click', function(e) { |
255,10 → 370,9 |
'<td>'+$("#adresse").val()+'</td>'+ |
'<td>'+$("#taxon option:selected").text()+'</td>'+ |
'<td>'+$('input[name=milieu]:checked').val()+'</td>'+ |
'<td>'+$("#latitude").val()+'</td>'+ |
'<td>'+$("#longitude").val()+'</td>'+ |
'<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+ |
//Ajout du champ photo |
'<td><img class="miniature" alt="'+$("#miniature-img").attr("alt")+'"src="'+$("#miniature-img").attr("src")+'" /></td>'+ |
'<td class="obs-miniature">'+ajouterImgMiniature()+'</td>'+ |
'<td>'+$("#notes").val()+'</td>'+ |
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+ |
'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+ |
299,10 → 413,6 |
$('#obs'+obsId).remove(); |
$("#liste-obs").removeData('obsId'+obsId) |
}); |
|
$("#effacer-miniature").click(function () { |
$("#miniature").empty(); |
}); |
|
// TODO : remplacer par du jquery |
//document.getElementById('image_file').addEventListener('change', handleFileSelect, false); |
336,6 → 446,7 |
}, |
success : function(data, textStatus, jqXHR) { |
$("#dialogue-obs-transaction").append('<p class="msg">Vos observations ont bien été transmises.</p>'); |
supprimerMiniature(); |
}, |
statusCode : { |
500 : function(jqXHR, textStatus, errorThrown) { |
399,6 → 510,15 |
}); |
}); |
|
function ajouterImgMiniature() { |
var miniature = ''; |
if ($("#miniature img").length == 1) { |
var src = $("#miniature-img").attr("src"); |
var alt = $("#miniature-img").attr("alt"); |
miniature = '<img class="miniature" alt="'+alt+'"src="'+src+'" />'; |
} |
return miniature; |
} |
|
function handleFileSelect(evt) { |
// Check for the various File API support. |