/branches/v1.5-cisaille/widget/modules/saisie/squelettes/defaut/defaut.tpl.html |
---|
140,14 → 140,31 |
</div> |
<div class="row-fluid"> |
<div class="span6"> |
<form id="form-station" class="well control-group" action="#" enctype="multipart/form-data" autocomplete="on"> |
<h2>Lieu du relevé</h2> |
<div class="well"> |
<div class="row-fluid"> |
<div class="span12"> |
<h2>Lieu du relevé</h2> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span4"> |
<label for="map_canvas" title="Veuillez localiser l'observation"> |
<strong class="obligatoire">*</strong> |
Géolocalisation |
</label> |
</div> |
<div class="span8 droite"> |
<form id="form-carte-recherche" class="form-search form-horizontal" action="#" > |
<div class="control-group"> |
<label for="carte-recherche">Rechercher</label> |
<input id="carte-recherche" class="search-query" type="text" value="" |
placeholder="Centrer la carte sur un lieu..."/> |
</div> |
</form> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span12"> |
<div id="map-canvas"></div> |
</div> |
</div> |
169,54 → 186,56 |
</span> |
</div> |
</div> |
<div id="coordonnees-geo" class="well" style="display:none;"> |
<div class="row-fluid form-inline"> |
<div id="coord-lat" class="span4"> |
<label for="latitude">Latitude</label> |
<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on"> |
<div id="coordonnees-geo" class="well" style="display:none;"> |
<div class="row-fluid form-inline"> |
<div id="coord-lat" class="span4"> |
<label for="latitude">Latitude</label> |
<div> |
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/> |
</div> |
</div> |
<div id="coord-lng" class="span4"> |
<label for="longitude">Longitude</label> |
<div> |
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/> |
</div> |
</div> |
<div class="span1"> |
<div> |
<input id="geolocaliser" type="button" value="Voir sur la carte"/> |
</div> |
</div> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span4"> |
<label for="lieudit"> |
Lieu-dit |
</label> |
<div> |
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/> |
<input type="text" id="lieudit" class="input-medium" name="lieudit" value="" /> |
</div> |
</div> |
<div id="coord-lng" class="span4"> |
<label for="longitude">Longitude</label> |
<div class="span4"> |
<label for="station"> |
Station |
</label> |
<div> |
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/> |
<input type="text" id="station" class="input-medium" name="station" value="" /> |
</div> |
</div> |
<div class="span1"> |
<div class="span4"> |
<label for="milieux"> |
Milieu |
</label> |
<div> |
<input id="geolocaliser" type="button" value="Voir sur la carte"/> |
<input type="text" id="milieu" class="input-medium" name="milieu" value="" /> |
</div> |
</div> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span4"> |
<label for="lieudit"> |
Lieu-dit |
</label> |
<div> |
<input type="text" id="lieudit" class="input-medium" name="lieudit" value="" /> |
</div> |
</div> |
<div class="span4"> |
<label for="station"> |
Station |
</label> |
<div> |
<input type="text" id="station" class="input-medium" name="station" value="" /> |
</div> |
</div> |
<div class="span4"> |
<label for="milieux"> |
Milieu |
</label> |
<div> |
<input type="text" id="milieu" class="input-medium" name="milieu" value="" /> |
</div> |
</div> |
</div> |
</form> |
</form> |
</div> |
</div> |
<div class="span6"> |
<div class="well"> |
249,9 → 268,11 |
<div class="row-fluid"> |
<div class="span12"> |
<label for="notes">Notes</label> |
<textarea id="notes" class="span5" rows="7" name="notes" |
placeholder="Vous pouvez éventuellement ajouter une note sur votre observation..." |
></textarea> |
<div> |
<textarea id="notes" class="span5" rows="7" name="notes" |
placeholder="Vous pouvez éventuellement ajouter une note sur votre observation..." |
></textarea> |
</div> |
</div> |
</div> |
</form> |
266,7 → 287,7 |
<p id="miniature-msg" class="span12"> </p> |
</form> |
<div class="row-fluid"> |
<div class="span12"> |
<div class="span12 centre"> |
<button id="ajouter-obs" class="btn btn-primary btn-large" type="button" |
title="Ajoute l'observation courante à la liste ci-dessous."> |
Créer |
/branches/v1.5-cisaille/widget/modules/saisie/squelettes/defaut/js/defaut.js |
---|
169,7 → 169,56 |
var map; |
var marker; |
var latLng; |
var geocoder; |
$(document).ready(function() { |
initialiserGoogleMap(); |
// Autocompletion du champ adresse |
$("#carte-recherche").autocomplete({ |
//Cette partie utilise geocoder pour extraire des valeurs d'adresse |
source: function(request, response) { |
geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, 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 { |
afficherErreurGoogleMap(status); |
} |
}); |
}, |
// Cette partie est executee a la selection d'une adresse |
select: function(event, ui) { |
var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
deplacerMarker(latLng); |
} |
}); |
$("#geolocaliser").click(function() { |
var latitude = $('#latitude').val(); |
var longitude = $('#longitude').val(); |
latLng = new google.maps.LatLng(latitude, longitude); |
deplacerMarker(latLng); |
}); |
google.maps.event.addListener(marker, 'dragend', function() { |
trouverCommune(marker.getPosition()); |
mettreAJourMarkerPosition(marker.getPosition()); |
}); |
google.maps.event.addListener(map, 'click', function(event) { |
deplacerMarker(event.latLng); |
}); |
}); |
function initialiserGoogleMap(){ |
// Carte |
var latLng = new google.maps.LatLng(48.8543, 2.3483);// Paris |
199,6 → 248,9 |
map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas |
map.mapTypes.set('OSM', osmMapType); |
// Création du Geocoder |
geocoder = new google.maps.Geocoder(); |
// Marqueur google draggable |
marker = new google.maps.Marker({ |
map: map, |
221,27 → 273,6 |
} |
} |
$(document).ready(function() { |
initialiserGoogleMap(); |
$("#geolocaliser").click(function() { |
var latitude = $('#latitude').val(); |
var longitude = $('#longitude').val(); |
latLng = new google.maps.LatLng(latitude, longitude); |
deplacerMarker(latLng); |
}); |
google.maps.event.addListener(marker, 'dragend', function() { |
trouverCommune(marker.getPosition()); |
mettreAJourMarkerPosition(marker.getPosition()); |
}); |
google.maps.event.addListener(map, 'click', function(event) { |
deplacerMarker(event.latLng); |
}); |
}); |
function deplacerMarker(latLng) { |
if (marker != undefined) { |
marker.setPosition(latLng); |